第一部分 准备篇

第1章 认识Cocos Creator

伴随着过去几年手机游戏市场的火爆，跨平台游戏开发引擎Cocos2D-X（2014年的品牌，现已“进化”为Cocos）得到了快速发展，截至2017年10月，引擎的注册用户已经突破了100万，以45%的占有率在国内市场占据国内游戏引擎市场的头把交椅，从《我叫MT》到《刀塔传奇》，再到《阴阳师》，这些年度游戏都是基于Cocos2D-X引擎开发的。然而，Cocos2D-X的开发者们并未对此满足，他们在引擎易用性和相关工具链上做了很多积极的尝试，2013年引擎团队发布第一款官方编辑器Cocos Studio，但是Cocos Studio由于自身bug和没有实现高效的开发流程等因素并未被开发者广泛接受，很多团队都在自研相关的编辑器和开发工具，直到2016年，引擎团队发布了Cocos Creator。Cocos Creator具有脚本化、数据驱动和高效工作流等特点，具有很强的易用性并且可以提供高效的开发流程，发布后仅用了半年时间，在没有开发者红利的情况下，用户数就已经达到了Cocos Studio上线四年才达到的水平，并获得开发者的广泛好评。本章就带领大家走进Cocos Creator的世界，首先从认识Cocos Creator开始。

1.1 什么是Cocos Creator

Cocos Creator是以游戏内容创作为核心的开发工具，它基于Cocos2D-X引擎进行开发，实现了一个一体化、可扩展、可自定义工作流的编辑器，实现了开发的脚本化、组件化和数据驱动等特点，它在Cocos系列产品中第一次引入组件化的编程思想和数据驱动的架构设计，可以完整地实现包括场景编辑、UI设计、资源管理、调试、预览及发布等工作，是游戏开发团队提高开发效率，实现完整工作流的最佳选择，同时由于它便捷的使用规则，也是帮助开发者快速实现游戏Demo的高效开发工具。

1.1.1 Cocos Creator的由来

提到Cocos Creator，就不得不提到Cocos2D-X引擎，Cocos2D-X引擎脱胎于Cocos-iPhone引擎，是Cocos2D系列开源引擎的一个分支，也是发展最好的分支。相较于Cocos2D-X由于具有跨平台的特点，尤其是对两大移动操作系统iOS和Android的支持，使得Cocos2D-X受到广大开发者欢迎，截至2018年，Cocos2D-X已经走过了八个年头，在这八年里，市场上基于Cocos2D-X开发的爆款游戏层出不穷：网易游戏的二次元卡牌《阴阳师》、占领海外市场的策略类游戏《列王的纷争》、动作卡牌手游《刀塔传奇》（后更名为《小冰冰传奇》）、火爆一时的《我叫MT》，这些家喻户晓的经典手机游戏都是基于Cocos2D-X开发的。同时，为了更好地为开发者服务，提高开发者效率，Cocos2D-X的引擎团队也在不断完善引擎相关工具链，包括可发布多渠道打包工具AnySDK，缩减了游戏上线前大量接入SDK所需的人力，为大量游戏开发者提供了便捷的渠道接入SDK解决方案；首款编辑器Cocos Studio，使得UI界面的编辑更加方便，同时也探索了引擎的编辑器化。2014年，Cocos2D-X将品牌升级为Cocos，旗下包括Cocos2D-X引擎、Cocos2D-JS引擎、AnySDK工具和Cocos Studio，从单一的引擎发展为产品族。截至2017年底，Cocos2D-X引擎在国内市场以45%的占有率保持领先地位，在竞争更激烈的国际市场有18%的占有率，Cocos2D-X的发展历程如图1-1所示。

2016年全新编辑器Cocos Creator发布，取代了之前的Cocos Studio，同时Cocos Creator采用全新的设计思路，它包含了开发一款游戏所需的全部工作流，而且完全实现了脚本化和数据驱动，极大提高了引擎的易用性。同时，Cocos Creator也拥有了全新的标志，如图1-2所示，这个标志是基于Cocos引擎的标志的，也就是那个奔跑的椰子。

Cocos Creator上线后，虽然不像Cocos2D-X引擎和Cocos Studio刚上线时那样拥有用户红利，毕竟很多公司和开发者都已经习惯于自己之前制定的开发工具和工作流，但是Cocos Creator依然得到了迅速发展，并获得开发者的广泛好评。图1-3所示为Cocos Creator用户增长趋势图。

1.1.2 Cocos Creator的组成

通过浏览Cocos Creator程序文件夹的内容可以发现，它主要包括三个部分：编辑器、Cocos2D-X和Cocos2D-JS。

1）编辑器：类似于之前的Cocos Studio和CocosBuilder，编辑器包含场景编辑、UI编辑和动画编辑等功能，同时也有导出等功能，观察整个界面，与其说它类似于之前的Cocos编辑器，不如说它更像Unity3D编辑器。

2）Cocos2D-X：打开Cocos Creator的应用路径，可以发现在“编辑器路径/Resources/Cocos2D-X”目录下有一个Cocos2D-X，不过这个Cocos2D-X严格来说是一个删减版，具体的删减内容可以参考目录下的Readme文件，首先删除了一些对其他平台的支持，目前只支持iOS、Android和Windows；另外，引擎暂时删除了对于Lua库的支持，但是从文档来看，后续应该会添加回来，毕竟作为Cocos引擎最流行的脚本语言，Lua在开发者心中还是有一定地位的；最后就是对于一些无用库和无用类的删减，这个删减版的Cocos2D-X引擎可以在GitHub上下载得到，具体地址是：https://github.com/cocos-creator/cocos2d-x-lite.git。

3）Cocos2D-JS:Cocos Creator上线之初主要是基于JavaScript语言的，而且Cocos Creator完全是用JavaScript编写的，可见JavaScript在Cocos Creator中的分量。Cocos2D-JS也被继承在了Cocos Creator中，和集成的Cocos2D-X一样，Cocos2D-js也是一个删减版，它是为编辑器和最后打包生成的游戏所服务的，正因为有了Cocos2D-js,Cocos Creator才可以提供扩展功能。

1.1.3 Cocos Creator的特点

初次接触Cocos Creator，你可能会觉得它只是一个编辑器，它的用途就是替代Cocos Studio或者是CocosBuilder。其实，把Cocos Creator比作另一款流行游戏引擎Unity似乎更加合适，因为Cocos Creator提供的是一套完整的工作流程——从资源导入到场景编辑，再到调试和预览，直到导出和发布，都可以用Cocos Creator完成——这个特点和Unity一样，Cocos Creator可以帮助开发团队建立完整的工作流程，从而使团队中负责不同部分的成员间进行更高效的分工和合作。

Cocos Creator另一个特色就是实现完全的脚本化。脚本语言可以提高团队开发效率，节约开发成本，同时还可以做到项目热更新，所以使用脚本开发游戏中的主要逻辑已经成为各个研发团队的首选，Cocos2D-X引擎也一直对Lua和JavaScript语言有着非常好的支持。而之所以说Cocos Creator特点之一是脚本化，主要是因为通过Cocos Creator可以使用JavaScript开发所有的功能，你不止可以使用Cocos Creator开发游戏逻辑，还可以通过JavaScript编写插件来扩展引擎。

Cocos Creator采用ECS（Entity Component System，实体-组件系统）设计模式，ECS是一个游戏逻辑层的框架，它建立在渲染引擎和物理引擎的基础上，主要解决如何建立一个模型来处理游戏对象的更新操作的问题，著名的《守望先锋》就是采用了ECS架构。

ECS设计模式，其实就是将各种各样的功能点设计封装成组件的形式，然后将这些组件，按需挂载在容器节点上，这些容器节点就是不同的实体，然后通过系统来管理这些实体。表现在Cocos Creator上就是将可重用的组件，用不同的组合方式，挂载到不同的节点上，从而组成各种不同的功能实体。

ECS设计模式提倡用组合代替继承，可以很好地封装和重用功能组件，并且可以轻松地扩展引擎。

1.2 Cocos Creator的基本架构和工作流

通过1.1节的介绍，我们可以了解到Cocos Creator并不是简单的编辑器，它包含了游戏引擎、资源管理、场景编辑器、游戏预览和发布工具的全套工具集，和之前发布的Cocos Studio和CocosBuilder不同，它实现了完全的脚本化，并使用ECS模式实现了组件化和数据驱动的方式，本节就介绍Cocos Creator的架构和工作流。

1.2.1 Cocos Creator的架构

整体来看，Cocos Creator的技术架构可以分为编辑器层、引擎层和平台层，如图1-4所示。它将所有的功能和工具链都整合到了Cocos Creator应用程序里，在编辑器层中，它不仅包含场景编辑器、属性检查器和资源管理器等编辑组件，还提供了运行预览工具、调试工具、平台导出工具。在引擎层，Cocos Creator集成了精简版的Cocos2D-JS和Cocos2D-X，这样既可以整体获得Cocos引擎之前的成熟功能，又可以通过脚本插件的方式扩展。在平台层，目前Cocos Creator支持两大移动操作系统Android和iOS，开发者可以通过Cocos Creator轻松导出这两个平台的本地安装包，同时Cocos Creator还支持HTML5和其他衍生平台，比如可以导出项目到微信小游戏平台。

Cocos Creator不仅无缝融合了Cocos引擎的JavaScript体系，一方面能够使之前Cocos2D-X引擎的开发者快速适应，另一方面也可以为美术人员和策划人员提供内容创作生产和即时预览的所见即所得环境。同时Cocos Creator提供了开放式的插件架构，开发者可以轻松扩展编辑器，定制个性化的工作流程。

1.2.2 Cocos Creator的工作流程

Cocos Creator为开发者提供了完整的工作流程，可以实现包括场景编辑、UI设计、资源管理、调试、预览及发布等工作，如图1-5所示。Cocos Creator将除了资源制作以外的游戏开发全部工作流程集成在了一个开发工具中，这样做的好处，首先是可以让整个开发团队保持在一个工作流之下，提高了开发效率，可以将整个项目用git或者svn等协作工具同步，节约了同步资源和沟通成本；其次是有助于规范团队工作流程，有助于项目管理；最后，对于程序员来说，这样的集成工具也避免了很多不必要的操作，使程序员专注于重要的事情。

在开发阶段，Cocos Creator已经可以为用户带来巨大的效率提升，然而，Cocos Creator提供帮助的不止是开发层面，对于游戏开发者来说，开发和调试、商业化SDK的集成、多平台的发布测试上线，整套工作流程要经过多次迭代，而且缺一不可，可以说这一部分在上线后将占据工作量的很大部分。说到这里，就不得不提到AnySDK，它是一款为手机游戏开发商提供免费、快速接入第三方SDK一站式解决方案，并采用安全和快速的方法进行本地打包的工具。Cocos Creator集成了AnySDK后，从游戏引擎方面，完善了整个引擎的工作流程，对于开发者来说，AnySDK也会提高开发者的效率，使得游戏更加快速地上线测试。

1.2.3 Cocos Creator 2.0版本

相比起Cocos Creator 1.0版本，2.0版本在性能上有了很大提升，它彻底移除了渲染树并重新实现了全新的渲染流程。Cocos Creator 1.0版本的渲染节点树是基于Cocos2D-X引擎的场景结构，2.0版本移除了之前的渲染树并且重新定义了渲染系统，将渲染的数据传递给Scene然后显示出来，从2.0版本开始，建立了性能基线跟踪测试，如图1-6所示为Cocos Creator 2.0版本和Cocos Creator 1.8.2版本的性能对比。

可以发现在所有平台上，2.0版本的性能都有所提高。究其原因，首先是移除了之前的渲染树，减少了中间层次的调用；其次是重新设计了渲染流程，直接使用渲染组件进行渲染，彻底实现了组件化，同时也分离了渲染层和逻辑层，如图1-7所示。

除了性能优化外，Cocos Creator 2.0版还对引擎的初始化流程做了修改，项目脚本代码和项目插件脚本代码都在引擎的初始化之前被初始化，这样可以在项目代码中对引擎和渲染器的加载重新定义，而如果想在1.0版本中实现这个功能，需要在main.js中进行相应的修改，两个版本的引擎加载流程如图1-8所示。

1.2.4 升级你的项目到Cocos Creator 2.0版本

和每个大版本更新一样，Cocos Creator 2.0的版本也对API进行了很多更新，如果你想把你的项目更新为全新版本的引擎，可能会遇到很多“坑”。

早在Cocos2D-X时代，“升级或者不升级，这是一个问题”就困扰着很多开发者，如果不升级，那么无法获得引擎的最新特性和bug修复；如果升级，则很有可能会由于API或者底层的某些变化造成问题，因此，这里也给出一些升级引擎版本时需要注意的事情或者小技巧：

1）备份你的项目，“升级有风险”，其实不仅是Cocos引擎，Unity引擎也面临着同样的问题，因此每当整体升级项目的Unity版本时，都会提示你把原有的项目备份，这样即使升级过程遇到问题，也不会影响你原有的开发成果。

2）注意Cocos Creator的控制台提示，可以让开发者长舒一口气的是，这一次版本的升级是比较“柔和”的，也就是说，一些API在短期内不会被完全移除，采用了一个过渡的方式，就是对于一些API暂时保留或者一些API在你需要更新时会给出一定提示，如图1-9所示。

3）关注每个版本的升级日志，看看是否有你需要升级的功能，对于一般的小项目或者刚开始不久的项目，升级到最新的引擎版本往往非常简单，但是对于已经上线维护的项目或者开发到中后期的项目，升级会需要很大的成本的。

1.3 为何选择Cocos Creator

通过前两节的介绍，我们认识了Cocos Creator，了解到Cocos Creator是一款手机游戏开发工具，不同于之前的Cocos产品族的编辑器，它包括场景编辑、UI设计、资源管理、调试、预览及发布等游戏开发的完整流程，实现了完全的脚本化，并使用ECS模式实现了组件化和数据驱动的方式，那么相对于之前的Cocos2D-X引擎，它有什么优势呢？或者说在什么情况下我们会选择Cocos Creator来代替Cocos2D-X呢？另外比起Unity等引擎，Cocos Creator又有什么优势呢？本节就来介绍如何选择游戏引擎，以及为何选择Cocos Creator。

1.3.1 Cocos Creator和Cocos2D-X

Cocos2D-X是一套开源的跨平台游戏开发框架，核心代码采用C++编写，提供C++、Lua和JavaScript三种编程语言接口。引擎中提供了图形渲染、界面、音乐音效、物理、网络等丰富的功能。Cocos2D-X支持iOS、Android、HTML5、Windows和macOS X等系统，侧重在手机原生和HTML5两大领域，并积极向3D领域延伸扩展。在2D移动游戏领域，Cocos2D-X可以说是开发者的首选引擎，截至2017年底，Cocos2D-X在全球的注册开发者超过100万，在中国的市场占有率为45%，在全球的市场占有率为18%，是中国第一、全球第二的手机游戏引擎。

那么同样作为2D手机游戏引擎，Cocos Creator和Cocos2D-X有什么异同，用户又应如何在二者之间做出选择呢？实际上，Cocos Creator和Cocos2D-X是一回事，因为Cocos Creator的引擎层也是采用Cocos2D-X，所以在基本功能、运行效率和开发思路上，二者保持着高度的一致，作为Cocos2D-X的开发者，可以十分轻松地转移到Cocos Creator的开发上来。刚上手使用Cocos Creator时，资深的Cocos2D-X工程师可能会觉得有些功能被删掉了，但是仔细使用一段时间你会发现，这些功能都还在。Cocos Creator基本保留了Cocos2D-X除3D功能以外几乎全部的功能，对于如何选择Cocos2D-X和Cocos Creator，笔者建议从以下几点来考虑。

首先是编程语言，Cocos2D-X可以支持C++、Lua和JavaScript三种编程语言，而目前Cocos Creator只支持JavaScript语言；其次是自由度，直接使用Cocos2D-X进行开发的时候，我们可以通过修改引擎代码轻松扩展引擎的功能，而使用Cocos Creator时我们是使用ECS架构通过编写扩展组件实现引擎的扩展，这种扩展相对于引擎代码级的修改自由度相对要差一些；最后是开发效率问题，Cocos Creator作为一套完整的工具集，肯定会大大提升开发效率，可以将美术人员和策划人员纳入整个工作流当中，更有利于完整工作流的建立。所以从整体角度，首先考虑游戏内容的需求，如果你的项目需要大幅度扩展引擎功能的时候，显然Cocos Creator不是你的最佳选择，但是当你的游戏类型合适，同时你有志于让你的游戏开发团队更有效率地工作，Cocos Creator是一个不错的选择。

1.3.2 Cocos Creator和Unity

Unity引擎是Unity Technologies开发的一个让开发者轻松创建游戏的综合性开发工具，是一个全面整合的游戏引擎。类似于Director、Blender game engine、Virtools或者Torque Game Builder等利用交互图形化开发环境为首要方式的软件，Unity可以运行在Windows和macOS X上，可以发布到Windows、macOS X、Wii、iOS、Android、Windows Phone 8和HTML5等平台。Unity引擎以它的快速开发特性，以及跨平台能力为人们所知，并成为3D手机游戏开发者的首选引擎。

为什么要把Cocos Creator和Unity进行比较呢，因为二者的设计理念很相似，都是使用组件化的方式扩展节点，都是使用脚本驱动，包括游戏逻辑和编辑器扩展都是使用脚本。那么如何决定是使用Cocos Creator还是Unity呢？答案很简单，那就是3D游戏选择Unity,2D游戏选择Cocos Creator。

因为Unity引擎虽然提供了2D功能，但是对于2D游戏来说，很多功能需要引入第三方的库才能完成，比如属性动画，Unity本身并没有提供相应的功能接口，需要引入比如iTween这种第三方的插件或者自己开发才能完成相应的功能，另外在2D游戏中我们经常使用的动画工具spine的解析库也要自己引入，使用过程中甚至有一些bug需要自己修改，相比起Cocos Creator的完整集成，Unity显然在2D的支持上无法和Cocos Creator相比，因此当我们需要快速开发2D游戏时，Cocos Creator显然是更加合适的，当然，如果你需要开发一个3D游戏时，目前来看Unity更为合适，但Cocos Creator在2.0版本以后也在扩展3D的功能，不过要想完全取代Unity在技术上还需积累。

相比起Unity,Cocos Creator的另一大优势就是基础的引擎Cocos2D-X是开源的，注意，不是说编辑器是开源的，而是基础的渲染引擎是开源的，当我们需要性能优化或者扩展引擎功能的时候，开源引擎的优势是不可比拟的。

1.3.3 学习Cocos Creator需要的知识

游戏开发是一个综合的技术栈，开发游戏需要学习编程语言、平台知识、编辑器使用、算法、设计模式等多种知识，当我们想要使用Cocos Creator时，我们需要学习下面这些知识：

1）编程语言JavaScript：这是Cocos Creator支持的脚本语言，你可以使用JavaScript编写游戏逻辑和扩展编辑器，Cocos Creator中的JavaScript是基于脚本语言的基本语法，并加入了一些特有的规则，作为初学者，你需要同时学习基本语法和本地规则。

2）编辑器的基本使用：开发一款游戏，不只是编写代码，还需要将图片、音乐音效、字体、粒子、地图等资源有效地组织起来，Cocos Creator提供了完善的资源导入和管理的解决方案，你需要在熟悉这些资源的同时学会资源管理的方法。

3）游戏的基本系统：游戏的系统涉及三大模块，UI系统、动画系统和物理系统，这是开发游戏的基础，学习一款引擎的使用，除了编程语言外，最重要的就是对于这三个模块的学习。

4）实战和扩展：学习完基础知识之后，你需要的就是自己动手开发游戏，并且在自己开发的基础上进行性能优化、打包导出等，这些内容都需要建立在开发实战的基础之上。

本书后续的章节将逐步介绍这些知识，基础篇将介绍编程语言JavaScript、编辑器的基本使用和三大基本系统；实战篇会通过三个不同类型的游戏展示Cocos Creator在实际项目的使用；高级篇将介绍高于基础知识的高级知识点。

1.4 本章小结

本章介绍Cocos Creator的由来、特征和应用。你需要了解Cocos Creator的特点和基本架构，Cocos Creator是一款手机游戏开发工具，它包括场景编辑、UI设计、资源管理、调试、预览及发布等游戏开发的完整流程，不同于之前的Cocos产品族的编辑器，Cocos Creator实现了完全的脚本化，并使用ECS模式实现了组件化和数据驱动的方式。另外本章还介绍了Cocos Creator和其他引擎的异同以及其他学习Cocos Creator所必备的知识。通过本章的学习，相信你已经为后续的学习做好了准备。