第二部分 基础篇
第3章 Cocos Creator的场景制作
Cocos2D-X引擎作为一个基于OpenGL ES的二维游戏引擎，它主要的功能是将OpenGL的绘制功能封装在更加贴近游戏的对象里，因此它的主要设计思路是将游戏的各个部分抽象成特殊的概念，包括导演、场景、布景层和人物精灵，然后用这些接近游戏中的概念的对象来封装OpenGL的渲染，更好地供游戏开发者调用。Cocos Creator在Cocos2D-X基础上进行了又一次的封装，使用“实体-组件”方式用组合替代继承扩充节点类。
本章主要介绍这些Cocos Creator的场景制作。首先介绍Cocos Creator的基本分区和基本界面，然后介绍Cocos Creator中的节点和组件，以及Cocos Creator中的坐标系，最后引导你制作你的第一个Cocos Creator的场景。
3.1 认识Cocos Creator编辑器
Cocos Creator是以游戏内容创作为核心的开发工具，它基于Cocos2D-X引擎进行开发，实现了一个一体化、可扩展，可自定义工作流的编辑器，实现了开发的脚本化、组件化和数据驱动等特点，它在Cocos系列产品中第一次引入组件化的编程思想和数据驱动的架构设计，可以完整实现包括场景编辑、UI设计、资源管理、调试、预览及发布等工作，是游戏开发团队提高开发效率，实现完整工作流的最佳选择，同时由于它便捷的使用规则，也是帮助开发者快速实现游戏Demo的高效开发工具。
3.1.1 Cocos Creator基本界面
Cocos Creator和Unity引擎很相似，核心是编辑器，在编辑器中可以完成资源管理、场景编辑、场景预览、功能调试和打包发布等功能，因此它不同于之前Cocos推出的编辑器Cocos Studio和CocosBuilder，它的功能复杂且与Cocos2D-X具有不同的设计思路，本节就首先从认识Cocos Creator界面开始认识编辑器，如图3-1所示。
图3-1 Cocos Creator运行界面
大体上整个界面可以被分为五部分，中间是场景编辑和预览部分，左边上部分是层级管理器，左下部分是资源管理器，右边是属性检查器，下方是运行控制台和动画编辑器。Cocos Creator中这些面板可以自由移动、组合，以适应不同项目和开发者的需要。
资源管理器显示了项目资源文件夹中的所有资源，会以树形结构显示文件，可以自动同步操作系统中对于项目资源文件夹的修改，用户可以直接将文件从项目外面直接拖拽进来，也可以使用菜单“文件-资源导入”导入资源。
场景编辑器用来展示和编辑场景中的显示内容，编辑场景的内容是所见即所得的。层级管理器用属性结构展示场景中的节点并显示它们的层级关系，在场景编辑器中的内容都可以找到对应的节点，两个面板会同步显示。
属性检查器是查看并编辑当前选中节点和组件属性的工作区域，这个面板会以最适合的形式展示和编辑来自脚本定义的属性数据。
3.1.2 Cocos Creator编辑器的布局
通过主菜单中的布局菜单可以进行一系列布局设置，目前可以设置为“默认布局”“竖屏游戏布局”和“经典布局”三种，在预设布局的基础上，可以对各个面板的位置和大小进行调整，对于布局的修改会保存在“local/layout.windows.json”文件中。
首先可以将鼠标悬浮在两个面板的边界线上，鼠标形态发生变化时，可以拖动来修改两个面板的效果，如果面板设置了最小尺寸，当拖拽到最小尺寸时就无法继续缩小面板了。点击面板标签并拖拽，就可以将面板整个移动到任意区域，蓝色半透明方框会显示成松开鼠标后面板所在的位置，同时也支持层叠面板，当移动面板时出现橙色方块则是层叠面板，层叠面板在屏幕大小不足时非常实用。用户可以根据自己的使用习惯设置喜欢的编辑器布局。
3.2 Cocos Creator中的节点和组件
在Cocos2D-X中，最小的渲染单元就是节点类（Node）,Cocos Creator也保留了这个设计，所有绘制在屏幕上的对象都是节点类或者是节点类的子类，而Cocos Creator中另外一个全新的基础概念就是组件，它是Cocos Creator相比于之前版本的Cocos2D-X的一种变革，本节将分别介绍这两个概念。Cocos Creator中的重要的基本节点如图3-2所示。
图3-2 Cocos Creator中的节点
3.2.1 Cocos Creator中的节点
在Cocos Creator中节点被分为空节点、渲染节点和UI节点。空节点和Cocos2D-X中的节点一样，只包含位置大小等信息，而不包含任何渲染的元素，在屏幕上也不会显示出来，但它是有作用的。当我们要制作一些复合图片拼接的UI界面对象时，可以将零散的元素都当作空节点的子节点，这样，子节点就可以随父节点一起移动了。
渲染节点包含精灵、文本、富文本、地图和粒子系统等内容，这些都是可以渲染在界面上的。UI节点则包括按钮、列表、输入框、布局和画布等UI组件的内容，需要注意的是，在Cocos2D-X中，节点扩展到精灵是使用继承来实现的，而在Cocos Creator中，是使用组件扩展的方式来实现的。
3.2.2 Cocos Creator中的组件
相比于Cocos2D-X,Cocos Creator一个重要的变化就是使用了“实体-组件”的模式，从设计模式的角度来看，这是使用组合取代了继承的方法。什么是“实体-组件”模式？一般来说，游戏都是采用面向对象的方法编程，每个游戏中的实体对应一个对象，并且需要一个基于类的实例化系统，允许通过多态来扩展。但是这样的做法，无法控制游戏中的类数量，为了解决这个问题，我们采用“实体-组件”模式来用组合取代继承，Cocos Creator中就是使用这个方法。精灵组件的具体属性，如图3-3所示。
图3-3 精灵中的组件
组件在节点的属性检查器里，如图所示，在精灵的属性检查器中，就有节点属性和精灵组件，节点属性包括了节点位置、旋转、缩放和尺寸等信息和锚记点、颜色和透明度等信息。节点组件和精灵组件进行组合后，就可以通过修改节点属性来控制图片的显示方式。
在一个节点上可以添加多个组件，来为节点添加更多的功能，单击属性检查器中的添加组件按钮就可以添加组件，这个组件可以是内置的，也可以是你编写的脚本组件，如图3-4所示。
图3-4 添加组件界面
3.3 Cocos Creator中的坐标系
节点需要绘制出来才能被显出在屏幕上，绘制过程需要定位位置，坐标系帮助我们在屏幕中定位我们要绘制图像的位置。在操作时我们常常有这样的疑惑，我们的节点没有出现在我们想让它出现的位置，这是因为我们没有搞懂不同的坐标系，不同的坐标系就意味着不同的定位规则，这些规则很容易混淆，这一节就介绍四种常用的坐标系并把这四种坐标系在Cocos2D-X中扮演的角色分清楚。
3.3.1 笛卡儿坐标系
Cocos2D-X以OpenGL ES为基础，所以自然地，它的坐标系和OpenGL坐标系相同，坐标系的原点在屏幕左下角，它采用右手定则，x轴正方向向右，y轴正方向向上，z轴向外，如图3-5所示。
图3-5 笛卡儿坐标系
3.3.2 标准屏幕坐标系
屏幕坐标系和OpenGL坐标系相反，坐标系的原点位于屏幕的左上角，Android、iOS和Windows Phone等平台都使用标准屏幕坐标系，这点需要和Cocos Creator的坐标系作区分，如图3-6所示。
图3-6 标准屏幕坐标系
3.3.3 世界坐标系
世界坐标系也叫绝对坐标系，是游戏开发中的建立概念，因此，“世界”即是游戏世界。它建立了描述其他坐标系所需要的参考标准。我们能够用世界坐标系来描述其他坐标系的位置，它是Cocos Creator中一个全局坐标的概念。
Cocos2D-X中的元素是有父子关系的层级结构，通过节点设置位置使用的是相对其父节点的本地坐标系而非世界坐标系。最后在绘制屏幕的时候Cocos2D-X的渲染部分会把这些元素的本地节点坐标映射成世界坐标系坐标。世界坐标系和OpenGL坐标系方向一致，原点在屏幕左下角，x轴正方向向右，y轴正方向向上。
3.3.4 本地坐标系
本地坐标系也叫相对坐标系，是和特定节点相关联的坐标系。每个节点都有它们独立的坐标系，当节点移动或改变方向时，和该节点关联的坐标系（它的子节点）将随之移动或改变方向。这一切都是相对的，相对于基准的。本地坐标系只有在节点坐标系中才有意义。
节点的设置位置的方法使用的就是父节点的节点坐标系，它和笛卡儿坐标系的方向也是一致的，x轴正方向向右，y轴正方向向上，原点在父节点的左下角。如果父节点是场景树中的顶层节点，那么它使用的节点坐标系就和世界坐标系重合了。
3.3.5 节点的锚点
下面让我们从纷乱的坐标系中抽出来。对于一个有大小的节点，定位坐标还有一个重要概念：锚点。
锚点指定了贴图上和所在节点原点（也就是设置位置的点）重合的点的位置，因此只有在Node类节点使用贴图的情况下，锚点才有意义。
锚点的默认值是（0.5, 0.5），表示的并不是一个像素点，而是一个乘数因子。（0.5, 0.5）表示锚点位于贴图长度乘以0.5和宽度乘以0.5的地方，即贴图的中心。
默认锚点和本地坐标系的示意图如图3-7所示。
图3-7 默认锚点和本地坐标系
改变锚点的值虽然可能看起来节点的图像位置发生了变化，但并不会改变节点的位置，变化的只是贴图相对于你设置的位置的相对位置，相当于你在移动节点里面的贴图，而非节点本身。如果把锚点设置成(0,0)，贴图的左下角就会和节点的位置重合，这可能使得元素定位更为方便，但会影响到元素的缩放和旋转等一系列变换，因此并没有一种锚点设置是放之四海而皆准的，要根据每个对象的使用情况来定义。比如一个矩形框需要贴着屏幕左下角显示，只需要把锚点设在矩形框的左下角，然后设置坐标为原点（0, 0）即可。
渲染时都是从场景根节点开始处理，不管有多少级节点，都按照层级高低来依次处理，每个节点都使用父节点的坐标系和自身位置锚点属性来确定节点在场景中的位置。
3.4 创建你的第一个Cocos Creator项目
学习到这里，相信你已经跃跃欲试了，毕竟学习的目的还是要自己制作项目的，本节就来编辑制作你的第一个Cocos Creator场景吧！
3.4.1 创建项目
创建项目的过程十分简单，点击新建项目，选择合适的项目模板，在下方输入项目的目录，点击新建项目，就可以创建项目了，如图3-8所示。
图3-8 创建项目
这里我们选择Hello World模板，它包含我们熟悉的Hello World场景。创建项目成功后直接进入Cocos Creator主界面，在资源管理面板中右击并选择“新建-Scene”就可以创建新的场景，默认的场景是空的，里面只有一个默认的Canvas节点。
3.4.2 项目结构
默认的HelloWorld项目的结构如图3-9所示。
图3-9 HelloWorld项目结构
资源文件夹（assets）：用来放置游戏中的所有本地资源、脚本和第三方库文件。只有在资源文件夹下的文件才能显示在资源管理器中，打开文件夹，可以发现每个资源文件都有一个．meta文件，用于存储该文件作为资源导入后的信息和与其他信息的关联，这点和unity引擎十分相似。
资源库（library）：是资源导入后生成的，这里的文件结构和资源格式被处理成发布时需要的形式。如果你使用版本控制管理项目，这个文件夹是不需要进入版本控制的，如果它被删除或者损坏，只要完全删除它再打开项目就可以重新生成。
本地设置（local）：这里保留着编辑器的本地设置，包括编辑器布局等，这个文件夹也不需要进入版本控制。
项目设置（settings）：保存项目相关设置，如构建发布菜单里的包名、场景和平台选择等。
project.json:project.json本身目前用来规定当前使用的引擎类型和插件存储的位置，它和asset一起作为验证项目合法性标志。
构建目标（build）：这个文件夹在第一次构建发布后才会生成，使用默认发布路径发布项目后，目标平台的项目工程就会在build下生成。
项目新建完毕后，选择相应的场景就可以运行预览场景，点击编辑器中的运行按钮即可运行，可以选择浏览器或模拟器的方式运行，Hello World场景的运行效果如图3-10所示。
图3-10 HelloWorld运行效果
3.5 本章小结
这一章介绍了Cocos Creator的基本使用，介绍了Cocos Creator的界面，介绍了Cocos Creator不同窗口负责的功能。你可以发现Cocos Creator是一个集编辑、预览、调试和导出等功能于一体的编辑器。还介绍了Cocos Creator中的节点和组件这两个基本概念，节点是渲染的最小单位，而组件是一个全新的概念，它使得在Cocos Creator中扩展节点的方法由继承变为了扩展，这也是Cocos Creator中的重要概念，随后介绍了Cocos Creator中的不同坐标系，最后完成了第一个场景的创建与编辑。
通过这一章的学习，我们已经熟悉了编辑器的操作和使用，为今后进一步的项目制作打好了基础，制作一款游戏就是将资源与代码结合在一起，第4章将介绍Cocos Creator中的资源管理。