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) 时，锚点位于节点本地坐标系的初始原点位置，也就是节点约束框的左下角。锚点位置肯定后，全部子节点就会以锚点所在位置做为坐标系原点

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

　　一、位置(position)

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

　　二、旋转(rotation)

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

 　　三、缩放(scale)

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

　　四、尺寸(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 下面，这样作有如下两点好处：

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

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

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

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

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

　　一、空节点

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

　　二、渲染节点

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

　　这里的基础渲染组件，是没法用其余组件的组合来代替的，所以单独归为渲染类别。要注意每一个节点上只能添加一个渲染组件，重复添加会致使报错。可是能够经过将不一样渲染节点组合起来的方式实现更复杂的界面控件，好比下面 UI 类中的不少控件节点

　　三、UI节点

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