初识Cocos Creator

1.1 Cocos 不同时期与产品

刚接触Cocos家族的时候，会有很多个Cocos的版本与分支，比如Cocos2d, Cocos2d-x, Cocos Creator 1.x, Cocos Creator 2.x, Cocos Cretor3D, Cocos Creator 3.x, CocosDashboard, 等我们先把Cocos 的主要产品脉络梳理一遍。

智能手机刚出来的时候，国外做了一个2D游戏引擎给iphone上开发游戏使用，叫做cocos2d, 他是用objective-c实现的ios的2D游戏引擎。随着手机游戏的兴起,一次开发,同时可以发布到Android与IOS平台就成了手机游戏引擎的必备的需求，所以国内有一个团队，使用C++实现了cocos2d的objective-c的代码与接口，实现一次开发同时发布到Android与IOS等平台。并把这个游戏引擎项目开源，叫做cocos2d-x。基于cocos2d-x，又发展出来了cocos2d-x 2.x以及cocos2d-x 2.x相关的开发工具，如cocos studio等。基于cocos2d-x引擎内核又发展出cocos2d-x-lua与cocos2d-x-js分支,支持Lua与JavaScript开发游戏逻辑代码。这个期间很多手游都是用cocos2d-x开发出来的，比如《刀塔传奇》等。后来随着h5游戏的兴起，cocos2d-x团队又做了一件事情，就是用JavaScript基于h5实现了cocos2d-x开发接口相同的的h5游戏引擎。这样使用cocos2d-x-js开发游戏，既可以发布成手机游戏，也可以发布h5的游戏。

随着手机游戏的发展，越来越多的3D游戏出来了，cocos2d-x也迎来了一次重大的升级，支持3D游戏开发。也就是cocos2d-x 3.x系列。在这个时期，游戏引擎的编辑器与相关开发工具变得越来越重要，所以cocos团队发布了Cocos Creator产品家族系列。Cocos Creator是基于Cocos游戏引擎内核的游戏开发编辑器与工具，Cocos Creator采用编辑器不开源，引擎开源的模式, 采用当下游戏开发比较流行的数据化驱动,可视化编辑，组件化开发，多平台发布。Cocos Creator 1.x第一阶段只支持2D游戏开发, Cocos Creator 2.x阶段引入了TypeScript，同时让2D游戏开发更稳定，更成熟,性能更好。由于之前设计定位于2D游戏开发, 同时3D游戏开发需求越来越多，Cocos Creator 独立出来一个3D游戏引擎的分支，Cocos Ceator 3D, 丢弃掉一些历史包袱,从3D游戏出发来重新设计开发工具与编辑器。这个版本的分支成熟了以后，cocos creator 将3D与2D结合起来，推出了Cocos Creator 3.x 系列产品，至此Cocos Creator 3.x演变成一个完整的全新2D/3D游戏开发引擎。同时为了方便下载安装管理Cocos Creator项目与工具，cocos又推出了CocosDashboard工具,能快速的安装不同版本的Cocos Creator,管理不同版本开发的Cocos Creator项目。下面用一张图，整理以下Cocos的演变历史。

1.2 安装Cocos Creator

去到Cocos官网,

, 选择”产品/Cocos Creator”, 选择下载中心，立即下载，可以下载到各个版本的Cocos Creator,如下图所示:

Cocos Creator 3.x全新的2D/3D游戏开发引擎，Cocos Creator 2.x 传统的2D游戏开发引擎,后面Cocos Creator 2.x会停止维护，所以尽量大家新项目都用Cocos Creator 3.x系列。安装的时候，先安装CocosDashboard,后面基于Dashboard来安装对应的Cocos Creator版本就可以了。安装好了以后，打开CocosDashboard能看到你电脑上安装的Cocos Creator版本。如图所示:

安装完Cocos Creator相关开发工具后，最后安装代码编辑器，Cocos Creator采用代码编辑器Visual Studio Code,直接在微软的官网上可以下载得到，下载完成后安装就可以了。

1.3 创建一个Cocos Creator项目

打开CocosDashboard, 选择项目，选择”新建”,选择对应的模板，2D项目选”Empty 2D”, 3D项目选Empty 3D。如果2D/3D选错了，其实也不要紧，编辑的时候是可以切换的，只是2D项目默认进去是2D相关的设置，3D默认进去是3D相关默认设置。如果做VR，可以选择VR项目模板。

创建完成后编辑器就会打开项目，你就可以使用编辑器来开发游戏了。

4 Cocos Creator编辑器面板介绍

Cocos Creator编辑器面板由以下几个部分组成:

(1) 层级管理器: 用来查看当前场景或节点预制体的详细结构面板，如图所示:

(2) 场景编辑器: 用来可视化编辑2D/3D游戏场景与预制体。

(3) 资源管理器:用来查看与管理当前游戏项目的代码+资源。如图:

(4) 属性检查器:用来检查当前节点/资源文件等的相关属性信息，也可以做相关可视化修改与设置。如图:

(5) 动画编辑器: 可以查看与编辑游戏中的一些动画,如图:

(6) 调试预览工具栏: 开发完成以后预览运行，就基于工具栏中的按钮来运行预览，如图:

点击三角形按钮，就可以预览运行当前游戏场景的效果。左边的下拉选择框可以选择哪种模式下预览运行，一般开发的时候选浏览器模式预览运行，如图:

其它的一些编辑器上的功能我们在后面进行介绍。

1.5 Cocos Creator 重要菜单介绍

偏好设置菜单: 点击CocosCreator/偏好设置, 打开菜单，主要是编辑器的一些全局设置，针对这些全局设置，CocosCreator按照类别来进行分类，建议大家把每个类别的菜单都仔细看下,如图:

项目设置菜单: 点击”项目/项目设置”,能查看到当前针对项目的相关设置，这里的每一项也建议大家都看一遍，后面用到的时候再详细的讲解。如图:

其它的菜单都可以看以下，但是这两个部分的菜单最为重要，后续讲解中如果用到了某个菜单再详细讲解。