本文目录一览：

• 1、不止想做游戏，老牌引擎 Cocos 带着新的Flag出发了
• 2、cocos creator 2.4.0 渲染流程详解（七：ForwardRender）
• 3、cocoscreator 2.4.x版本 drawcall优化 第一期（掌握控制drawcall数量的必要知识）
• 4、cocos creator视频播放器加载太慢
• 5、如何评价cocos creator，与unity比的优劣势
• 6、Cocos Creator 最简易例子，场景切换，节点挂载脚本

不止想做游戏，老牌引擎 Cocos 带着新的Flag出发了

2021年即将过去，对于 游戏 行业来说，这是概念盛行的一年。人们对于新形态内容的渴望，不仅是对创作者们的视野提出挑战，更是对他们手上的工具——解放想象力的关键技术提出的刚性需求。

对于在全球市场份额占比超过20%的 Cocos 引擎来说，2021也是硕果累累的一年。不止2D，他们的3D版本一年进行了五次大更新，新功能的添加马不停蹄；不止 游戏 ，重新挑战生态结构，在其他内容领域上开疆拓土。

“数字化内容正在渗透到不同的行业里面去，这对于 游戏 引擎来说是一个机遇大于挑战的时代。我们会以 游戏 行业的建设为基础，再拓展到其他领域中去。”这是 Cocos 的联合创始人兼CTO林顺在与我们的交流中告诉我们的，打破过往或许存在的单一印象和定位限制，是这个有着十年 历史 的引擎团队的下一步。

1、Cocos 的升级打怪之路

从2010年诞生至今，Cocos 基本上可以说是与整个移动 游戏 市场的风潮同步发展的。从《梦幻西游》到《乱世王者》，从《剑与远征》到《最强蜗牛》，用 Cocos 引擎制作的产品一直没有远离市场最闪亮的镁光灯之下，在中国手游市场40%的份额占比和全球30 万的月活跃开发者，是其一路以来打下的地基。

同时，对于一部分开发者来说，Cocos 在2D 游戏 方面的广泛应用也让他们把Cocos 放进了某个固有印象的盒子当中——打破这个盒子，也是 Cocos 今年所努力在做的。

在今年年初，Cocos 发布了Creator 3.0版本， 这个版本融合了几乎所有 Creator 2.x 与 Creator 3D 1.x 版本的功能，将此前2D和3D两套产品进行合并， 是 Cocos 为开发者提供兼具轻量与重度 游戏 的开发体验、往更引擎一体化建设方向的开始。

到了5月份，Creator 3.1正式亮相，该版本包含了华为HMS CG Kit团队贡献的延迟渲染管线，以及PhysX 物理后端的支持，意味着光照计算能力和物体运动逻辑都更加逼真写实， 这对于 Cocos 来说是迈向3D旅途的新起点，标志着Creator引擎的计算能力踏上一个新台阶。

v3.4 的延迟管线 FrameGraph

紧接着6月，随着华为 鸿蒙系统的发布Cocos也迅速升级到Creator 3.2版本，让开发者搭配HarmonyOS的多设备协同能力， 成为全球首家支持 HarmonyOS 的 游戏 引擎。

华为鸿蒙多设备协同

到了8月份，Creator3.3版本在2D和3D同时发力，在2D小 游戏 平台启动性能直接提升了60%，促进了小 游戏 产品的买量转化；3D方面完善了物理系统，加强了阴影效果。 这在整体上为 Cocos 在接下来的年度收官版本做了扎实的铺垫。

前段时间，Cocos 终于扯下Creator 3.4版本的神秘面纱，在这个研发和测试周期都是全年中最长的版本中，Cocos 大量优化了内容生产体验和效率，其中包括新增的动画状态机、光照模型和渲染表现优化、底层的前向和延迟渲染管线也基于FrameGraph和 subpass 进行了重构。 对自身 3D 技术进行了大幅的加强和优化，是 Cocos 引擎发展中里程碑的一步。

以下视频来源于 COCOS，时长 01:27

3.4版本中最抢眼的新功能要数动画系统Marionette（意为提线木偶）的添加，通过对状态机、状态切换、子状态机、动画混合 等角色动画必要功能的支持，让动画师可以更加方便定义动作顺序，而不必关心底层代码的实现。这从核心上增强了开发者在 游戏 中通过角色叙事的能力。

回顾 Cocos 的这一年，其 在2D应用领域立足脚跟、持续优化的同时，在3D方面的自身突破和长足进步是给到开发者最大的惊喜。作为一款全球性的引擎，二维和三维皆应是主场，对于依然在升级打怪的 Cocos 来说，2021无疑是充满了里程碑和成就解锁的一年。

昼转夜动画演示

2、不止 游戏 ，坐稳出发数字内容世界的新列车

但对于 Cocos 来说，在 游戏 引擎方面的进步只不过是他们今年升级的一部分。如果你仔细观察，就会发现除了 游戏 外，这家有着10年 历史 的数字互动内容开发平台在其他领域的布局也已逐渐成型。

谈到近两年来 游戏 行业相关的热门议题，哪几个关键词会排在队列首位？工业化、多平台、云 游戏 、元宇宙……这些搅动市场新浪潮的风向标都有着共同的特点：预示着万物互联成为不可避免的趋势，以及 对数字内容的开发提出极高的要求。

数字内容的生产从来都离不开技术，而在新形态内容发展的初期，技术更是能起到奠基和领导的作用。在上世纪90年代初期，id Software就通过自己的技术力开启了3D 游戏 的革命时代：其在1992年的作品《德军总部3D》成为第一款有3D FPS 游戏 ，而引擎改良后在次年推出的《毁灭战士》更是以其 革命性的3D效果冲击了整个 游戏 工业的发展进程。

其之后的《雷神之锤》所使用的Quake引擎，则是当时第一款完全支持多边形模型、动画和粒子特效的引擎的3D引擎，这直接催生了整个行业3D 游戏 技术和FPS这个 游戏 类型的急速发展。id Software还通过将引擎面向市场商用， 直接催生了现代“ 游戏 引擎”的概念， 大名鼎鼎的《半条命》和《反恐精英》系列都是使用了该引擎所制作的作品。

雷神之锤（1996）

不难看出， 在工业发展的关键节点技术不仅是驱动创新内容生产的基石，更是解放创作者的未知想象力的钥匙。 而当下即将到来的万物互联时代，就正如当年从2D跃进3D，同样是行业的一个新起点。

Cocos 的联合创始人林顺告诉我们，“数字内容的发展对于立体画面表现力和交互的形态要求都很高， 游戏 引擎在这制作这方面内容是天然的、最适合的工具， 行业的发展趋势对于引擎来说是一个非常巨大的机遇。 ”

正如他所说的，Cocos 引擎凭借其高性能、小包体、可热更的特点，已经广泛“入侵”各种应用场景。

在教育场景下，Cocos 基于引擎能力推出面向教育行业的 Cocos ICE，作为一款无需编码，即可快速上手的互动课件编辑器，同时因为强大的兼容性，其可定制化的特性更是能满足大部分教育机构的需求，获得多家教育领域龙头企业青睐。

Cocos ICE

在VR 方面，Cocos 已经做好相关引擎能力的储备，目前XR的项目可以通过Cocos 引擎以源码的方式来开发，未来将会推出双目渲染技术方向的插件，帮助开发者快速完成3D 游戏 向VR版本的转化。

Cocos 和华为 AR Engine 合作示例 游戏 《AR 指尖战争》

在 IoT 方面，如今中国多数智能电视的互动界面都是基于 Cocos 开发，在智能手表上也已经实现了虚拟偶像落地的场景；在 车机 方面，Cocos 也已经实现完美适配，在人与人、车与外界的不同场景上实现了功能互动。

这个互动性视频不仅可以从剑侠情缘手游中作为副本进入，也可以在微信小 游戏 上直接体验，任意门的“入口”无处不在。

《剑侠情缘之忘忧酒馆 - 不下线恋人》

林顺表示：“围绕着这些未来趋势， 我们更多的还是做基础的积累，让我们的引擎能更好地去适应未来内容生产。 在工具链上我们可能会继续完善，让开发者在生产的时间、人力上的占用降低成本，是我们今天正在做。”

在已经有着广泛覆盖率的 游戏 和教育领域以外，Cocos 在其他领域也在造路修车，做好了拥抱数字内容世界新形态的准备。

3、在未来，属于 Cocos 的位置

站在内容形态的下一站路口，引擎之间的竞争激烈程度丝毫不比内容制作间的竞争弱。面对这一点，林顺表示在今天虽然引擎的竞争确实很激烈，但是不同的引擎擅长的领域还是有很大不同。

“我觉得对于 游戏 引擎来讲，大家未来共同发展的方向仍然是围绕着如何去承接更多品类的数字内容的开发，如何去降低这些数字内容开发的门槛，去提供更加智能化的工具，让开发者更加高效的生产这些内容，以及让这些内容表现力上升到另外一个纬度。”他说道，“大方向一致的前提下，每个引擎厂商的布局不一样的地方。 Cocos 还是会继续发挥在2D 游戏 、小 游戏 和教育、IoT等方向既有优势，同时在3D原生和其他方向不断突破自己。 ”

而当我们问到在下一个10年，Cocos 打算在整个国内行业中扮演一个怎样的角色时，林顺回答道：

“ Cocos 始终还是围绕着以工具为平台来做的一个定位。无论是 游戏 还是其他行业，我们会以工具为基础来提供服务给所有的开发者，让大家整个内容生产的效率得以提升。我们未来的规划也会围绕着这个目标所展开，同时不断地去完善自己的工具链，让行业的开发者有更好的体验。 无论是今天还是未来，我们一直会是生态的建设者。 ”

据悉 Cocos 引擎团队将于12月23日晚19点半在B站开播，详细解读 v3.4 的重要更新，现场演示动画系统 Marionette 的功能与使用方法，有兴趣的读者可搜索微信公众号“ 游戏 陀螺”，找到文章点击 [阅读原文] 查看。

cocos creator 2.4.0 渲染流程详解（七：ForwardRender）

全文共5000+字，分为8个章节，由本人历时一周整理而来。由于篇幅问题，将本文分为8个章节分开发布。全文 （ 不 ） 详细描述了cocoscreator 引擎的2.40版本中，web平台的js部分引擎的渲染流程。请将文章配合源码一起食用！

由于我尚在学习引擎源码中，文章可能有不正确的部分，所以我会不断更新内容。如有错误或补充，请留言交流！

全部章节链接：

一： 渲染流程中用到的核心类

二 ： 渲染流程详解

三： RenderFlow 的运行逻辑

四： Assembler 的作用

五： ModelBatcher 数据合批

六： 材质系统

七： ForwardRender

ForwardRender 继承于 Base, 是与底层渲染最靠近的类型，当上面的流程处理完毕后，会在ForwardRender 的 render() 中处理当前场景的渲染状态，材质,光照，通道，着色器，更新着色器的统一变量。并在 _draw() 中调用 device.draw()方法，进行绘制。

部分重要的继承于 Base 的成员变量：

_device：根据运行平台对应的绘制图形对象 gfx.Device 的实例，用于绘制图形到屏幕，类型定义于 cocos2d\renderer\gfx\index.js。

_programLib ： 管理 shader 定义，获取，检查等相关的变量。类型定义于 cocos2d\renderer\core\program-lib.js。

_stage2fn：保存有不同渲染通道的名称与其对应的不同渲染方法。ForwardRender 中设置有 shadowcast， opaque, transparent 三种渲染通道。

_viewPools：单个相机的描述数据类(View) 的对象池。一个View对应一个相机。

_drawItemsPools：渲染数据类的对象池，保存有每个渲染批次需要的model，effect 等数据。

_stageItemsPools：单个渲染通道需要渲染的数据的对象池，本质是对 _drawItemsPools 中的数据按照不同通道进行了分类。

ForwardRender 中定义的成员变量：

_lights：保存所有灯光数据。

_shadowLights：保存所有阴影灯光数据。

类名 ForwardRender 翻译为前向渲染，泛指传统上只有 Opaque 和 Transparent 两个通道的渲染技术。cocos有三个渲染通道，渲染通道方法定义在 _stage2fn 中。

渲染管线具体详解请参考unity官方文档（对的，真要学cocos还得看unity的文档）：

内置渲染管线中的渲染路径

相关链接

cocoscreator 2.4.x版本 drawcall优化 第一期（掌握控制drawcall数量的必要知识）

1，测试环境

2，为何drawcall多会影响性能

3, 哪些组件支持渲染

4，影响drawcall的因素

5，一句话介绍如何减少drawcall

6，哪些渲染组件不会被渲染

7，减少drawcall的理论（放在第二期）

8，理论指导实践，实践印证理论，demo实操（放在第三期）

9，总结（放在第三期）

「测试环境」 :

1.Mac 系统

2.cocoscreator 2.4.x版本

「为何drawcall多会影响性能？」

Drawcall: 绘制调用，指cpu调用图形绘制接口命令gpu进行图形绘制

「每一次绘制前，CPU要准备绘制参数(状态)比如色彩通道(color filter)，绘图方式(shader)等复杂的数据处理，然后Drawcall,如果有大量drawcall，cpu会很“忙”,而gpu的处理能力很强，这时他可能闲置，不能充分发挥应有的能力，导致性能下降。」

「哪些组件支持渲染：」 因为一个drawcall是一次cpu调用图形绘制接口命令 gpu进行图形绘制渲染的过程，所以需要了解cocoscreator中哪些组件支持渲染，才能更好的控制drawcall

**

「影响drawcall的因素：」

1,层级(zindex)

2,材质(Material)（shander,贴图（纹理），混合模式（blend））。只有拥有相同材质的渲染节点 才可能进行批处理，贴图，shader 决定了材质，而层级则决定了相同的材质 是否能 进行合并处理 即合并网格（mesh） 合并drawcall.，

「一句话介绍如何减少drawcall：」 绘制状态的变化 是导致drawcall增多的 主要原因。cocoscreator认为要以深度(zindex)优先的方式对渲染组件进行渲染，并且cocoscreator认为相同的材质可以被批量渲染。所以具有相同材质的并且连续的渲染节点 可以合并渲染 减少drawcall.

「连续：」

1,层级相同添加顺序相邻，

2,层级不同 中间层级没有其他材质的渲染组件。比如 a的层级是1 b的层级是3 在 1-3层级之间没有其他材质的 渲染组件.

「影响drawcall的因素:」

「1，渲染节点（zindex）层级」

zIndex是节点的层级是用来对节点进行排序的关键属性，它决定一个节点 在兄弟节点之间的层级，和谁被优先渲染。

1） zIndex 的取值介于 cc.macro.M IN_ZINDEX 和 cc.macro.MAX_ZINDEX 之间

即 - math.pow(2,15). 和 math.pow(2,15)-1之间。

实际操作中一般是 -1 到 n n一般不会超过1000

2）父节点主要根据节点的 zIndex 和添加次序来排序，拥有更高 zIndex 的节点将被排在后面（后被渲染先被渲染的图在后被渲染的图下面)，如果两个节点的 zIndex 一致，先添加的节点会稳定排在另一个节点之前。排在前面的节点先被渲染，也就是说两张图层级相同 先添加的会先被渲染 显示出来的结果是 在后被渲染的图的下面。

3）节点在 children 中的顺序决定了其渲染顺序。父节点永远在所有子节点之前被渲染

4)node节点放在Canvas或者父节点的zindex默认值是0

5）决定节点层级的另一个因素是siblingIndex 他的权重低于 zIndex 当我们在编辑器上编辑借点的时候 兄弟节点之间的zIndex相同，为什么会出现一个先被渲染一个后被渲染呢 ，就是因为 siblingIndex 不同，排在前面的siblingIndex要小一些后面的要大一些 最终后面的后选择然 层级就在 前面的上边。 也就是说 zindex 其决定性作用，zIndex相同 就比较siblingIndex来判定最终层级。

「2，材质」

1）纹理（贴图）

2）shander：渲染器，能够读懂的点和颜色的对应关系的程序，简单来说就是绘图的方式)

只有拥有相同材质的物体才可以进行批处理。因此，如果你想要得到良好的批处理效果，你需要在程序中尽可能地复用材质和物体。

如果你的两个材质仅仅是纹理不同，那么你可以通过 纹理拼合 操作来将这两张纹理拼合成一张大的纹理。一旦纹理拼合在一起，你就可以使用这个单一材质来替代之前的两个材质了。

「哪些渲染组件不会被渲染」

cocoscreator 认为 透明度 === 0. 或者 active = false 的渲染组件 不会被渲染。

cocos creator视频播放器加载太慢

可以优化首页的加载速度。

开发组为了加快首页的渲染速度，减少白屏时间，把逻辑代码和首页加载代码做了彻底分离。首次页面加载的只是一个相当于加载器的初始化文件，文件体积特别小，不像某些引擎，一开始就需要加载主逻辑js文件，一开始就给我来个上百kb的文件加载，然后才能显示loading条，白屏时间当然会延长不少。

如何评价cocos creator，与unity比的优劣势

你好，我做过UNITY也做过COCOS综合来分析的话我觉得各有千秋。unity的优势我觉得在于它开发的强大灵活度高而且所见即所得，这一点真的是很牛逼得。在编码过程中可以实时查看所有Public变量改变反正就是很方便，而unity最大的问题个人觉得就是这个APK打包出来体积大的吓人。。而相对于cocos就不太方便了，他的游戏是基于一个个层或者一个个组建拼凑而成，写起来的时候会需要有大量的东西去准备。但是这样也有一个好处那就是只要构思好写好所有的层级修改起来还算方便而且很多功能也是Unity无法实现的。其实他们各有各的好处看你喜欢那样咯，unity现在倾向于3d游戏这一块和虚拟现实，而cocos终究还是2d游戏的首选开发引擎。

Cocos Creator 最简易例子，场景切换，节点挂载脚本

节点怎么挂载脚本？

点选 层级管理器 中的任意 节点，查看 右侧 属性检查器，拉到最下面，可以看到 添加组件 按钮，点击，选择 用户脚本组件，可以看到 当前所有的js脚本文件，选择 想要 挂载 的脚本，完成 节点和脚本的 挂载。

资源管理器 中任何地方，鼠标右键，新建--JavaScript。留意js文件放在统一的目录下面，比如Script[目录需要自行建立]

层级管理器 中任何地方，鼠标右键，创建节点

SceneMain.js

Scene1.js

2.5.1 CanvasScene1节点【见文中20220317160146_1.png截图】 首先挂载脚本Scene1.js

双击资源管理器中的 场景 Scene1【路径Scene--Scene1】,层级管理器中，找到 CanvasScene1节点，点击，查看右侧 属性检查器，拉到最下面，点击 添加组件 -- 用户脚本组件 -- Scene1。完成挂载。

2.5.2 BtnGoToNextScene节点【按钮类型】【见文中20220317160146_1.png截图】 设置点击响应函数

层级管理器中，找到 BtnGoToNextScene节点，点击，查看右侧 属性检查器，拉到最下面，

Click Events 中的值修改为1，表示有一个点击事件响应。

最初第一个显示框空着时，提示为 cc.Node ，表示，这个地方需要拖拽一个 节点类型。节点类型，在 层级管理器中，只有 CanvasScene1节点 挂载了脚本，而且挂载的脚本中，有我们需要的响应函数 onBtnGoToNextScene()。

这个时候，只能使用拖拽形式，把 层级管理器中的 CanvasScene1节点 拖拽到 这个 显示框区域。完成之后，这个显示框中，显示的就是 CanvasScene1。

这一步做好之后，水平并列在后面的两个下拉框就有选择项了。一个选择脚本，一个选择响应函数。

--the end