CocosCreator学习笔记（一）

什么是Cocos Creator

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

Cocos Creator的特点

• 提供了一套完整的工作流程——从资源导入到场景编辑，再到调试和预览，直到导出和发布。
• 实现完全的脚本化。提高开发效率节约开发成本，同时还可以做到项目的热更新。在cocos2dx的时候对Lua和JS便有着非常好的支持。在creator中还可以使用js编写插件来扩展引擎

• 采用ECS（Entity Component System，实体-组件系统）设计模式。

  ECS模式是什么，是一个游戏逻辑的框架，它建立在渲染引擎和物理引擎的基础上，主要解决如何建立一个模型来处理游戏对象的更新操作的问题

  ECS由Entity、Component、System三部分组成，分别是实体、组件、系统。 实例就是一个游戏对象实体，一个实体拥有众多的组件，而游戏系统则负责一句组件对实例做出更新。

  举个例子，如果对象A需要实现碰撞和渲染，那么我们就给他加一个碰撞组件和一个渲染组件。而在游戏循环中，每一个系统都会遍历一次对象，当渲染系统发现对象持有一个渲染组件时，就会根据渲染组件的数据来执行相应的的渲染过程。碰撞系统也是如此。换句话说实例只需要持有必要的数据，由系统负责逻辑就行了。

CocosCreator的渲染方式（2.X）

• 在CocosCreator2.X的引擎中，所有的渲染组件都继承于cc.RenderComponent，例如cc.Sprite，cc.Label等等。组件的Assembler主要是负责组件的数据更新以及数据的填充，由于不同的渲染组件在数据内容及填充上也都不相同，所以每一个渲染组件都会拥有自己的Assembler对象，而所有的Assembler对象都是继承于cc.Assembler。Material作为资源，主要记录和渲染组件的渲染状态，使用的纹理以及Shader

• 在 Cocos Creator2.X 中，RenderFlow 会根据渲染过程中调用的频繁度划分出多个渲染状态，比如

  Transform，Render，Children 等，而每个渲染状态都对应了一个自己的函数。在 RenderFlow

  的初始化过程中，会预先根据这些状态创建好对应的渲染分支，这些分支会把对应的状态依次链接在一起。例如一个节点在当前帧需要更新矩阵，以及需要渲染自己，那么这个节点会更新他的

  flag 为node._renderFlag = RenderFlow.FLAG_TRANSFORM |RenderFlow.FLAG_RENDER。RenderFlow 在渲染这个节点的时候就会根据节点的 node._renderFlag的状态进入到 transform => render 分支，而不需要再进行多余的状态判断。

• 与1.X的区别，1.X则是在遍历节点的时候进行多次的判断，例如一个空节点都需要判断位置，颜色等等，2.X通过标志去省去了这些的判断提升了性能

CocosCreator1.X和2.X引擎加载的流程对比

• 1.X：加载引擎-》加载main.js-》初始化引擎-》初始化渲染器-》加载项目的插件脚本-》加载项目主脚本

  2.X：加载引擎-》加载main.js-》加载项目的插件脚本-》加载项目主脚本-》初始化引擎-》初始化渲染器

  具体解释：2.X将项目脚本代码和项目插件脚本代码都在迎请的初始化之前进行初始化，这样可以在项目代码中对引擎和渲染器的加载重新定义

遇到的问题

• 在使用vscode打开初始HelloWorld的默认项目的脚本后，本来想默认打一点代码，打了cc后发现并没有智能提示。

  解决方法：

  1、在CocosCreator编辑器上选项卡-》开发者-》VS Code工作流-》更新VS Code智能提示数据

  2、等待几秒后，下方控制台会提示一行绿色的文字，“API data generated and copied to XXXXXX”（XXX是文件生成的路径），一般在项目的assets的文件夹外，与assets同级

  3、重新打开vscode，如果是ts的脚本，会发现已经可以有只能提示了，如果你是js的脚本，则需要第4步

  4、如果前面几步做完了发现还是不能提示，则把assets文件外的tsconfig.json文件删除，则js脚本即可产生智能提示。官方给出了问题所在，是tsconfig.json配置文件影响了jsconfig.json配置文件，导致智能提示只能在ts中运行