Cocos Creator:核心概念(1)
一.节点与组件
1.节点Node:
渲染的重要组成部分，在层级管理器和场景编辑器中看到的所有内容都是节点，选择后可以查看属性检查器。Node看起来和其他组件类似，但是不可移除，永远处于**状态
A.Position位置:由两人属性X和Y组成,指定了当前锚点所在的相对坐标,cocos.Node:position:由于父节点锚点位置在正中心,父节点没有任何旋转和缩放
B.Rotation旋转:属性只有一个值,即旋转角度.表示以锚点为中心,顺时针旋转的角度,单位是" ° "
C.Scale缩放:由两个属性X和Y组成,代表横向缩放与纵向缩放,默认值为1,即100%,通常情况下尽量保持缩放的长短比不变以保持图片的效果
D.Anchor锚点:节点位置的参照点,默认位(0.5,0.5)及节点的正中央,(0.0)在左下角(1.1)在右上角;自身旋转.缩放的基准点,同时锚点也是该节点子节点的坐标原点
E.Size尺寸:本节点的大小,对节点本身没有太多影响,但是会影响节点上的主键,具体参照各组件,比如常见的精灵组件会根据节点尺寸对渲染图片进行缩放
F.Color颜色:节点颜色,影响本节点及其所属组件的渲染,以及其子节点个其所属组件的渲染.在不透明的情况下,设置节点颜色会直接叠加到节点与所属组件的渲染效果上,并影响其子节点
G.Opacity透明度:0-255,0完全透明,255完全不透明,128半透明,会影响本节点及其所属组件的渲染,以及其子节点和所属组件的渲染
H.Skey倾斜度:倾斜度数,斜向拉伸,0和180效果一致
I.Group分组:任意字符串,不可重复.节点分组是为了属性判断.比如需求是“友方子弹”分组中和”敌人“做碰撞判断,而不和”友方“做碰撞判断;那么至少需要拥有”敌方“和”友方“两个分组,并把节点正确的配置分组
2.创建节点
在层级管理器创建
3.子节点
每个节点都有自己的父节点(parent),父节点与子节点(child)以一对多的方式形成树形结构,最根部的节点以根节点为自己的父节点,通常用户自定义节点都会是画布的子节点或者更深层次子节点
子节点的节点属性受父节点属性影响:位置,旋转,缩放均是现对父节点的锚点为原点的,父节点旋转为正方向,父节点缩放为尺度的坐标系下相对值
颜色与透明度deng 属性则是基于父节点的颜色和透明度进行叠加;相乘叠加,比如子节点的透明度为128约半透明(0.5),其父节点透明度同样为128约半透明(0.5),则子节点的显示效果透明度约为64(255×0.5×0.5)
4.组件
组件是Cocos Creator的主体构成,渲染(显示内容).逻辑.用户输入反馈.计时器等几个方面均是由组件完成的;根据Cocos Creator的总体架构,组件和节点配合完成游戏所需的内容
所有的组件都是脚本(代码);一部分是Cocos Creator提供的,源码在Cocos Creator按照目录里,在编辑器中无法直接查看;一些是用户自定义脚本,在资源管理器中找到对应的脚本文件.组件脚本需要添加到节点上才能执行
5.节点与组件的结合
以精灵节点为例:"Hello, World"案例:蓝色"cocos"图标就是精灵节点:(能正确的将图片显示在屏幕中央主要是靠两部分内容而生效)节点与精灵组件
精灵组件:这里可以粗略的认为精灵组件的功能是将指定的图片以正确的渲染方式显示出来,其中主要是选定了哪张图片,并指定了一些缩放方式等
节点:节点负责控制图片的位置在(0,50),在屏幕正中心稍微偏上一点的地方,不旋转.正常缩放等
Sprite节点--->节点(Node):提供位置.旋转.缩放.尺寸.颜色等信息
----------------->Sprite组件:提供对特定图片的渲染功能
二.Cocos坐标系
1.Cocos坐标系
笛卡尔右手坐标系
其中X.Y的有范围为0至设计分辨率,超出有效范围会导致不能在屏幕中完整显示.由于Cocos Creator是2D引擎,Z轴只影响遮挡,不存在近大远小等3D特征,想同父节点Z值约高越靠前,反之会被考前的节点遮挡
（iOS或Android)都是以屏幕左上角为原点,而Cocos系列则遵循OpenGL习惯,以左下角为原点
2.世界坐标系与本地坐标系
通常的开发者提到的位置或坐标有两中意义,一是在世界坐标系内的世界坐标或是在本地坐标系内的本地坐标
世界坐标系:也叫绝对坐标系,值得是上述Cocos坐标系的坐标,及一屏幕左下角为原点,无旋转.无缩放的坐标系
本地坐标系:也叫相对坐标系,值得是相对父节点的坐标系,即以父节点的锚(Anchor)为原点,父节点的旋转为方向,父节点的缩放为缩放的坐标系
Cocos Creator中绝大多数都是本地坐标系,比如节点属性中的位置.旋转与缩放都是基于本地坐标系,前面书中提到的脚本的位置.旋转与缩放页都是本地坐标系概念
3.节点的变换属性
节点的变换属性主要包括位置.旋转和缩放,节点的变换属性指的就是相对坐标系的相对值.
下节:
三.节点与渲染
遮挡关系:2D世界不存近大远小,但是需要明确其遮挡关系.Cocos Creator通过渲染顺序来处理遮挡问题,后渲染的图像会挡住先渲染的图片
下面介绍如何控制渲染和遮挡
1.同级别遮挡
这里的同级别,指的是有同样的父节点。
同级别节点的绘制顺序是由上至下,即下面的节点内容会遮挡上面的节点内容
2.不同级别遮挡
这里的不同级别,指的是不同父节点.在子节点和父节点中,子节点会遮挡父节点.而在不同级别的各节点,遵照子节点遮挡父节点,同级别节点下方遮挡上方节点并且遮挡上方节点拥有的所有子节点规则进行遮拦
四.精灵(Sprite)
是Cocos系列的核心概念之一,是Cocos Creator最常用的显示团像(图片）组件
1.精灵组件参考
在层级管理器中创建
2.精灵组件的主要属性
精灵组件在属性编辑器中可以看到很多属性选项
| 属性 | 功能说明 |
| Atlas(地图集） | 精灵显示图片资源所属的Atlas图集资源 |
| Sprite Frame(精灵帧） |
渲染精灵使用的Sprite Frame图片资源 |
| Type(类型) | 渲染模式,包括普通(Simple).九宫格(Sliced).平铺(Tiled)和填充(Filled)渲染4种模式.主要针对节点尺寸和图片资源尺寸不符时如何处理 |
| Size Mode(大小模式) | 指定精灵的尺寸,Trimmed会使用原始图片资源资源裁剪透明外边后的尺寸;Raw会使用原始图片未经裁剪的尺寸;当用户手动修改过尺寸属性后,Size Mode会被自动设置为Custom,除非再次指定为前两种尺寸 |
| Trim(修剪) | 节点约束框是否包含图片中的透明部分 |
| Src Blend Factor(Src混合因素) | 混合模式显示两张图时,原图片的取值模式 |
| Dst Blend Factor(Dst混合因素) | 背景图像混合模式,和上面的属性共同作用,可以将前景和背景精灵用不同的凡是混合渲染,效果预览可以参照glBlendFunc Tool |
3.渲染模式
A.Simple普通模式:最常用的渲染模式,适用于不需要调整图片大小的图片,当调整尺寸时会拉伸图片
B.Sliced九宫格模式:适用于需要无限拉伸的UI,常用于底框.背景.按钮底涂等
C.Tiled平铺模式:一种像是Windows桌面平铺效果的渲染方式,当尺寸大于图片原有尺寸时会将图片不断重复渲染.适用于背景.底纹不断重复的图片
D.Filled填充模式:可按照多种方式.不同进度填充渲染图片,常见的填充方式由横向填充(HORIZONTAL).纵向填充(VERTICAL)和扇形填充(RADIAL).适用于各种进度条.进度表示等等
4.精灵组件简单使用
资源管理器里拖拽素材图片类型资源(Cocos支持*.jgp.*.bmp.*.png等格式资源图片)到组件”Sprite Frame精灵帧"属性引用中,就可以使用精灵节点渲染指定图片
之后调整节点尺寸与渲染模式.填充模式将图片的指定部分渲染出来(不一定渲染整张图片)
最后通过调整节点的位置.旋转和缩放等将精灵节点布置到场景中