目录
1、 节点和组件
2、 节点层级和显示顺序
3、坐标系和节点变换属性
坐标系
锚点
旋转
缩放
尺寸
4、 常用技巧
5、参考
1、 节点和组件
Cocos Creator 的工作流程是以组件式开发为核心的,组件式架构也称作 组件 — 实体系统(或 Entity-Component System),简单的说,就是以组合而非继承的方式进行实体的构建。
在 Cocos Creator 中,节点(Node) 是承载组件的实体,我们通过将具有各种功能的 组件(Component) 挂载到节点上,来让节点具有各式各样的表现和功能。
2、 节点层级和显示顺序
1. 在 层级管理器 中会按照节点排列顺序依次渲染,也就是显示在列表上面的节点会被下面的节点遮盖住,父节点永远是出现在子节点上面的,因此子节点永远都会遮盖住父节点。
2. 父节点移动时,父子节点会作为一个整体一起移动。
3. 性能问题
父节点可以用来组织逻辑关系甚至是当做承载子节点的容器,但节点数量过多时,场景加载速度会受影响,因此在制作场景时应该避免出现大量无意义的节点,应该尽可能合并相同功能的节点。
3、坐标系和节点变换属性
我们将会深入了解节点所在场景空间的坐标系,以及节点的 位置(Position)、旋转(Rotation)、缩放(Scale)、尺寸(Size) 四大变换属性的工作原理。
坐标系
标准屏幕坐标系使用和 OpenGL 不同的坐标系,和 Cocos2d-x 坐标系有很大区别。在 iOS、Android 等平台用原生 SDK 开发应用时使用的是标准屏幕坐标系,原点为屏幕左上角,x 向右,y 向下。Cocos2d-x 坐标系和 OpenGL 坐标系一样,原点为屏幕左下角,x 向右,y 向上。
1. 世界坐标系
世界坐标系也叫做绝对坐标系,在 Cocos Creator 游戏开发中表示场景空间内的统一坐标体系,「世界」就用来表示我们的游戏场景。
2. 本地坐标系
本地坐标系也叫相对坐标系,是和节点相关联的坐标系。每个节点都有独立的坐标系,当节点移动或改变方向时,和该节点关联的坐标系将随之移动或改变方向。
锚点
锚点(Anchor) 是节点的另一个重要属性,它决定了节点以自身约束框中的哪一个点作为整个节点的位置
锚点由 anchorX
和 anchorY
两个值表示,它们是通过节点尺寸计算锚点位置的乘数因子,范围都是 0 ~ 1
之间。(0.5, 0.5)
表示锚点位于节点长度乘 0.5 和宽度乘 0.5 的地方,即节点的中心。
锚点属性设为 (0, 0)
时,锚点位于节点本地坐标系的初始原点位置,也就是节点约束框的左下角。
旋转
旋转属性只有一个值,表示节点当前的旋转角度。
- 角度值为 正 时,节点 逆时针 旋转。
- 角度值为 负 时,节点 顺时针 旋转。
缩放
在子节点上设置的缩放属性会和父节点叠加作用,子节点的子节点会将每一层级的缩放属性全部 相乘 来获得在世界坐标系下显示的缩放倍率。这一点和 位置、旋转 属性其实是一致的,只不过 位置 和 旋转 属性是 相加 作用,而 缩放 属性是 相乘,作用表现得更加明显。
比如父节点缩放 0.5,子节点缩放 0.5,那么相当于 子节点变成了 0.25 的样子。
缩放 属性会影响当前节点的 尺寸,不影响 位置 和 旋转,但会影响子节点的 位置 和 尺寸。(保证锚点设置正确,才会变化)
尺寸
尺寸 属性不会直接影响子节点的尺寸(但可以通过 对齐挂件(Widget) 间接影响)
4、 常用技巧
1、Canvas 作为渲染根节点。除了有具体图像渲染任务的节点之外,我们还会有一部分节点只负责挂载脚本,执行逻辑,不包含任何渲染相关内容。通常我们将这些节点放置在场景根层级,和 Canvas 节点并列。
2、创建空节点
就能够创建一个不包含任何组件的节点。空节点可以作为组织其他节点的容器,也可以用来挂载用户编写的逻辑和控制组件。
3、创建节点菜单 里下一个类别是 创建渲染节点
,这里我们能找到像 Sprite(精灵)、Label(文字)、ParticleSystem(粒子)、Tilemap(瓦片图)等由节点和基础渲染组件组成的节点类型。
4、UI 节点
类别里可以创建包括 Button(按钮)、Widget(对齐挂件)、Layout(布局)、ScrollView(滚动视图)、EditBox(输入框)等节点在内的常用 UI 控件。
5、参考
1. Cocos Creator 2.4 手册 - 管理节点层级和显示顺序
2. Cocos Creator 2.4 API - Node
3. Cocos Creator 2.4 手册 - 节点和组件
4. Cocos Creator 2.4 手册 - 坐标系和变换