3、Cocos Creator 节点和组件

时间:2024-04-01 09:34:11

目录

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 手册 - 坐标系和变换