cocos 场景制作流程

前面的话

　　本文将详细介绍 cocos 场景制作流程

 

节点和组件

　　Cocos Creator 的工作流程是以组件式开发为核心的，组件式架构也称作组件-实体系统，简单的说，就是以组合而非继承的方式进行实体的构建

　　在 Cocos Creator 中，节点（Node）是承载组件的实体，通过将具有各种功能的组件（Component）挂载到节点上，来让节点具有各式各样的表现和功能

　　要最快速的获得一个具有特定功能的节点，可以通过层级管理器左上角的创建节点按钮

　　以创建一个最简单的 Sprite（精灵）节点为例，点击创建节点按钮后选择创建渲染节点/Sprite（精灵）

　　之后就可以在场景编辑器和层级管理器中看到新添加的 Sprite 节点了。新节点命名为 New Sprite，表示这是一个主要由 Sprite 组件负责提供功能的节点

　　选中刚才创建的 New Sprite 节点，可以看到属性检查器中的显示

　　属性检查器中以 Node 标题开始的部分就是节点的属性，节点属性包括了节点的位置、旋转、缩放、尺寸等变换信息和锚点、颜色、不透明度等其他信息

　　接下来以 Sprite 标题开始的部分就是 Sprite 组件的属性，在 2D 游戏中，Sprite 组件负责游戏中绝大部分图像的渲染。Sprite 组件最主要的属性就是 Sprite Frame，可以在这个属性指定 Sprite 在游戏中渲染的图像文件

　　下面从资源管理器中拖拽任意一张图片资源到属性检查器的 Sprite Frame 属性中

　　刚才的默认 Sprite 图片变成了指定的图片，这就是 Sprite 组件的作用：渲染图片

　　组件式的结构是以组合方式来实现功能的扩展的，下图中就展示了节点和 Sprite 组件的组合

　　节点的颜色（Color）属性和不透明度（Opacity）属性直接影响了 Sprite 组件对图片的渲染。颜色和不透明度同样会影响文字（Label）这样的渲染组件的显示。 这两个属性会和渲染组件本身的渲染内容进行相乘，来决定每个像素渲染时的颜色和不透明度。此外不透明度（Opacity）属性还会作用于子节点，可以通过修改父节点的 Opacity 轻松实现一组节点内容的淡入淡出效果

　　值得注意的是，一个节点上只能添加一个渲染组件，渲染组件包括 Sprite（精灵）， Label（文字），Particle（粒子）等

 

坐标系

　　在 iOS, Android, Windows Phone 等平台用原生 SDK 开发应用时使用的是标准屏幕坐标系，原点为屏幕左上角，x 向右，y 向下。

　　Cocos2d-x 坐标系和 OpenGL 坐标系一样，原点为屏幕左下角，x 向右，y 向上

　　世界坐标系也叫做绝对坐标系，在 Cocos Creator 游戏开发中表示场景空间内的统一坐标体系，「世界」就用来表示游戏场景

　　本地坐标系也叫相对坐标系，是和节点相关联的坐标系。每个节点都有独立的坐标系，当节点移动或改变方向时，和该节点关联的坐标系将随之移动或改变方向

　　Cocos Creator 中的节点（Node）之间可以有父子关系的层级结构，修改节点的位置（Position）属性设定的节点位置是该节点相对于父节点的本地坐标系而非世界坐标系。最后在绘制整个场景时 Cocos Creator 会把这些节点的本地坐标映射成世界坐标系坐标

　　锚点（Anchor）决定了节点以自身约束框中的哪一个点作为整个节点的位置。选中节点后看到变换工具出现的位置就是节点的锚点位置

　　锚点由 anchorX 和 anchorY 两个值表示，他们是通过节点尺寸计算锚点位置的乘数因子，范围都是 0 ~ 1 之间。(0.5, 0.5) 表示锚点位于节点长度乘 0.5 和宽度乘 0.5 的地方，即节点的中心。锚点属性设为 (0, 0) 时，锚点位于节点本地坐标系的初始原点位置，也就是节点约束框的左下角。锚点位置确定后，所有子节点就会以锚点所在位置作为坐标系原点

　　节点包括四个主要的变换属性

　　1、位置(position)

　　位置（Position） 由 x 和 y 两个属性组成，分别规定了节点在当前坐标系 x 轴和 y 轴上的坐标。

　　2、旋转(rotation)

　　旋转属性只有一个值，表示节点当前的旋转角度。角度值为正时，节点顺时针旋转，角度值为负时，节点逆时针旋转

 　　3、缩放(scale)

　　缩放属性也是一组乘数因子，由 scaleX 和 scaleY 两个值组成，分别表示节点在 x 轴和 y 轴的缩放倍率

　　4、尺寸(size)

　　尺寸属性由 Width（宽度）和 Height （高度）两个值组成，用来规定节点的约束框大小。对于 Sprite 节点来说，约束框的大小也就相当于显示图像的大小

【坐标变换】

　　通过getPosition()获得的值是本地坐标系的值，即相对于其直接父级的坐标值。比如，父级坐标为(100, 0)，子级坐标为(30, 0)，而实际上子级坐标是(130, 0)。

　　要获得子级的真实坐标，需要先将子级坐标基于其直接父级转换成世界坐标

item.parent.convertToWorldSpaceAR(item.getPosition()))

　　然后，再将得到的子级世界坐标转换到实际坐标系下，如转换到this.node坐标系下

this.node.convertToNodeSpaceAR(item.parent.convertToWorldSpaceAR(item.getPosition()))

 

节点层级

　　当场景中的元素越来越多时，需要通过节点层级来将节点按照逻辑功能归类，并按需要排列显示顺序

　　每个视觉元素都是一个节点，通常不会把所有节点平铺在场景上，而是会按照一定的分类和次序组织成如下图所示的节点树

　　节点树中由箭头连接的两个节点之间就是父子关系，把显示在上面的叫做父节点，下面的叫子节点。在层级管理器中，上面的节点树就会是这个样子

　　在游戏中经常需要控制复杂的玩家角色，这种角色通常不会只由单个节点组成，下面来看看下面这张图里的英雄角色，就由三个不同的部分组成

　　将英雄角色的 Sprite 图像显示和帧动画组件放在 body 节点上，然后需要跟随角色移动的阴影 Sprite 单独拿出来作为 shadow 节点。最后把负责生命值显示的进度条作为一组独立功能的节点，形成自己的迷你节点树 HPBar

　　上面的例子就是典型的根据逻辑需要来组织节点关系，可以根据游戏逻辑操作英雄角色节点的动画播放、左右翻转；根据角色当前血量访问 HPBar 节点来更新生命值显示；最后他们共同的父节点 player用于控制角色的移动，并且可以作为一个整体被添加到其他场景节点中

　　在层级管理器中会按照节点排列顺序依次渲染，也就是显示在列表上面的节点会被下面的节点遮盖住。body 节点在列表里出现在下面，因此实际渲染时会挡住 shadow 节点

　　父节点永远是出现在子节点上面的，因此子节点永远都会遮盖住父节点

　　虽然父节点可以用来组织逻辑关系甚至是当做承载子节点的容器，但节点数量过多时，场景加载速度会受影响，因此在制作场景时应该避免出现大量无意义的节点，应该尽可能合并相同功能的节点

 

场景编辑器

　　Canvas 节点是推荐使用的渲染根节点，将所有渲染相关的节点都放在 Canvas 下面，这样做有以下两点好处：

　　1、Canvas 能提供多分辨率自适应的缩放功能，以 Canvas 作为渲染根节点能够保证制作的场景在更大或更小的屏幕上都保持较好的图像效果

　　2、Canvas 的默认锚点位置是 (0.5, 0.5)，加上 Canvas 节点会根据屏幕大小自动居中显示，所以 Canvas 下的节点会以屏幕中心作为坐标系的原点

　　除了有具体图像渲染任务的节点之外，还会有一部分节点只负责挂载脚本，执行逻辑，不包含任何渲染相关内容。通常将这些节点放置在场景根层级，和 Canvas 节点并列，如下图所示：

　　除了 Canvas 下的背景、菜单、玩家角色等节点之外，还将包含有游戏主逻辑组件的 Game节点放在了和 Canvas 平行的位置上，方便协作的时候其他开发者能够第一时间找到游戏逻辑和进行相关的数据绑定

　　为场景添加内容时，一般会先从层级管理器的创建节点菜单开始，也就是点击左上角的 + 按钮弹出的菜单。这个菜单的内容和主菜单中节点菜单里的内容一致，都可以从几个简单的节点分类中选择需要的基础节点类型并添加到场景中。添加节点时，在层级管理器中选中的节点将成为新建节点的父节点

　　1、空节点

　　选择创建节点菜单里的创建空节点就能够创建一个不包含任何组件的节点。空节点可以作为组织其他节点的容器，也可以用来挂载用户编写的逻辑和控制组件

　　2、渲染节点

　　创建节点菜单里下一个类别是创建渲染节点，这里能找到像 Sprite（精灵）、Label（文字）、ParticleSystem（粒子）、Tilemap（瓦片图）等由节点和基础渲染组件组成的节点类型

　　这里的基础渲染组件，是无法用其他组件的组合来代替的，因此单独归为渲染类别。要注意每个节点上只能添加一个渲染组件，重复添加会导致报错。但是可以通过将不同渲染节点组合起来的方式实现更复杂的界面控件，比如下面 UI 类中的很多控件节点

　　3、UI节点

　　从创建节点菜单中的创建 UI 节点类别里可以创建包括 Button（按钮）、Widget（对齐挂件）、Layout（布局）、ScrollView（滚动视图）、EditBox（输入框）等节点在内的常用 UI 控件。UI 节点大部分都是由渲染节点组合而成的，比如通过菜单创建的 Button 节点，就包含了一个包含 Button + Sprite 组件的按钮背景节点，加上一个包含 Label 组件的标签节点