这一次是真的等了好久
大家好，我是麒麟子，停更了五个月的我，很高兴又和大家见面了。
这次“复出”的原因是：
Cocos Creator 3.6 ”毁天灭地版“ 终于发布了。
虽然每一次发布，都会有配套的版本发布说明，列出版本中的新增特性和重要问题修复列表，但并不是所有朋友都有时间去细读这个说明，去研究每一个特性。
所以麒麟子想为某些引擎版本写一些分享内容，挖掘版本中为开发者带来的效率、效果、性能方面的提升，这也是引擎能为开发者们带来价值的基础三要素。
同时也希望通过这些分享，让来不及尝试新版本的朋友感受一下新版本的风采，给正在评估要不要入手新版本的朋友们提供一些参考。
3.6 版本是麒麟子特别期待的一个版本，因为它包含了太多“刚需”特性。这个版本麒麟子从公司内测版开始使用，持续跟进到社区公测版、正式发布版。
整体使用感受是：满足中略微带着惊喜
由于此次 3.6 版本更新内容较多，将分为编辑器、渲染、性能优化三篇进行。
工欲善其事，必先利其器
生产工具是生产力发展的客观尺度,是人类改造自然能力的物质标志
在正式分享之前，麒麟子想简单讲一下引擎的发展史。
游戏开发工具的演进从本质上讲，也是以提升生产力为主要目标的。这个演进大致可以分为四个时代。
I. 零时代
在这个时代，没有SDK，没有工具，所有项目都是直接调用系统的绘图API进行开发，每一个项目都会根据自身需求，从头构建游戏框架。
II. SDK时代
随着越来越多的游戏项目问世，有一些开发者抽离了多个项目共同需要的部分（如渲染流程、资源加载、动画播放、用户输入、平台兼容等问题），形成了SDK代码库，我们称之为引擎。
开源界比较火的如 OGRE、Irrlicht、早期版本的 Cocos2d-x。基于引擎开发项目，可以大大缩短前期的基础构建时间，节约成本，提升生产效率。
III. 工具集时代
纯代码的SDK无法使美术和策划很好的投入到工作中，每一个项目组都需要根据自己的需求实现一些工具，如场景编辑器，UI编辑器，特效编辑器等等，以所见即所得的方式提升工作效率。
IV. 集成式开发环境（IDE）时代
工具集时代，每一个工具是独立的，一个引擎SDK会配套一系列工具以满足游戏开发需求。
完成一项工作有可能需要在多个工具间切换才能完成，各个工具之间的数据格式可能会随着版本变迁而变得不兼容。
工具集这样的方式，生产效率和容错率都有明显的瓶颈，集成式开发环境的出现打破这一瓶颈，极大地提高了生产效率和容错率。
同时，项目中所有人使用的是同一套工具，学习交流成本低了很多，团队成员间的协同也更加和谐。 Cocos Creator 就是这个时代的产物。
3.6 版本中的编辑器有着非常多可圈可点的提升，比如编辑器内置的预览、渲染调试模式、动画可以嵌入触发轨道播放器、可视化多语言编辑器等等。
接下来我们进入本文主题，细数一下 Cocos Creator 3.6 在编辑器方面的重要提升。
UI视觉、交互体验改版
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QYGN1QtQ-1660898387586)(https://files.mdnice.com/user/21366/65d55ab6-00e6-4eae-b185-f40b6ac28780.png)]
打开编辑器，首先感受到的就是：它不一样了！
这里省略掉上百字的赞美之词，浓缩成一句：666！
那它到底有哪些不一样呢？
主题风格
1、偏好设置里，去除了配色主题（Theme Color）选项，不能再更换主题了。
2、新版本的明暗度介于旧版本 “creator” 和 “dark” 两个主题色之间，看起来更轻松了。
3、标题栏和主题色一致（目前仅 Mac OSX 支持，Jare 悄悄对我说 Windows 平台会在后续版本中支持），区域之间的间隔采用了深色线条，显得更高端了。
场景视图区域
可以很明显地看到，许多功能从面板上改为了场景区域上的浮动按钮，这些浮动按钮会根据编辑模式变化，使开发者可以更聚焦于当前编辑的内容。
这一次的UI改版远不止这些，更多的细节朋友们请打开 Cocos Creator 3.6 自行体验吧！
如果想对此发表建议的朋友，可以移步官方论坛贴：3.6 | Cocos Creator 首位编辑器UI设计师入驻社区啦
编辑器预览
当 Cocos Creator 0.9 版本出来的时候，麒麟子就开始期待，期待着有一天，能在 Cocos Creator 编辑器中直接运行、调试游戏。
有了内置预览功能，开发游戏的时候就可以很直观地看到节点数据的变化；可以借助编辑器编辑的功能，修改对象信息；可以在节点树中看到动态创建的对象情况；可以在面板上测试我的各项Shader参数等等。
如上图所示，启动内置预览功能只需要两步：
- 1.将启动模式切换到 编辑器预览（Preview in Editor）
- 2.点击红色箭头所指的按钮，即可进入下图一样的界面。
为了照顾到各类项目需求，预览模式提供了以下实用功能：
- 1.红色箭头（停止运行时预览）：点击后即可退出预览状态
- 2.蓝色箭头（调节预览帧率）：可手工输入想要的帧率。这个功能非常有用，比如，你可以设置为 1，就可以逐帧检查动画状态。也可以设置为任意值，用于检查不同帧率下的游戏逻辑功能是否正常。
- 3.绿色箭头（切换预览分辨率）：分辨率列表提供了主流的配置可供选择，也提供了自定义分辨率能力。
- 4.黄色箭头（旋转方向）：可以切换横竖屏预览模式。
- 5.灰色箭头（预览缩放）：可以缩放预览窗口大小。
- 6.白色箭头（自适应大小）：点击后，预览窗口内容会自动撑满。
更多细节请移步至官方论坛：3.6 | 编辑器预览（GameView）公测帖
渲染调试（Rendering Debug View）
经常做3D项目的朋友应该时常面临一些检查阴影区域，检查UV，检查法线，检查高光等操作。
Cocos Creator 3.6 版本中新增了这个特性，如下图所示：
我们拉近看：
目前这个特性支持的列表如下：
公共信息：
- 基础颜色光照（Lighting With Base Color）
- 级联阴影染色（CSM Layer Coloration）
原始模型信息：
- 顶点颜色（Vertex Colors）
- 世界位置、法线、切线（World Posistions,Normals,Tangents）
- 前向面颜色（Front Face Coloration）
- 一套UV，二套UV，光照贴图UV（UV0,UV1,Light Map UV）
- 透视深度（Projection Depth Z）
- 线性深度（Linear Depth W）
原始材质数据：
- 世界空间像素法线、切线、副法线
- 基础颜色、漫反射颜色、高光颜色
- 透明度、金属度、粗糙度、高光强度
除此之外，还有一些光照结果数据、雾化因子等选项，就不一一列举了，看下图：
部分效果截图：
3D模型预览增强
Cocos Creator 3.6 增强了3D模型的预览效果，到目前为止，Cocos Creator 的资源管理器、资源预览窗口、Mesh选择窗口均支持 3D 模型预览，在选择模型的时候终于不用猜了。
美中不足的是，材质预览依然还是下面这样子。
目前版本中，如果想要查看材质效果，只能先在资源管理器窗口中选中材质，在属性检查器面板中查看。
希望在后面的版本中可以像 3D 模型预览一样，在编辑器各个材质文件展示的地方实现材质预览效果。
可视化多语言编辑器
随着越来越多的开发者出海，多语言版本游戏的需求与日俱增。 特别是从今年开始，麒麟子收到的关于 i18n 的反馈就明显增多。
直接使用 i18n 的问题在于，开发者需要自己设定多语言策略，策略一但有缺陷，就无法完全交由策划或者内容翻译团队来做。
对于一个团队来说，可能需要从头到尾做两个项目，才能积累出较为丰富的多语言版本经验。
没想到 Cocos Creator 3.6 竟然内置了一个可视化的多语言编辑器，按照引擎组的说法，它有以下几个优点：
- 全程无代码操作：只需点点点即可完成全部流程操作，以后翻译的活可以转交给策划、商务或者渠道等，减轻技术大大们的工作压力
- 所见即所得：可以随时预览，也可以各种语言之间来回切换
- 自动翻译：可以接入外部翻译软件，点一点即可自动翻译
- 高度自动化：例如，全自动一键扫描所需翻译内容、自动翻译、快速构建、智能匹配文件等等
可从 面板->本地化编辑器 菜单打开多语言面板，如下所示：
不要被看似复杂的界面吓到了，界面上大部分内容都是自动填充的。
只需要简单的三步，就能够完成一个项目的多语言配置：
- 收集内容：通过自动化扫描方式获取所需翻译的文本、ts代码、scene、prefab、video、audio、image文件
- 翻译内容：通过人工翻译或者外部软件自动化翻译工具将内容进行翻译
- 构建发布：通过构建发布功能将指定的语言进行打包
眼尖的朋友应该发现了，他还有一个自动翻译服务，想要了解更多操作，请参考官方论坛：3.6 | Localization Editor 公测帖
动画编辑器增强
请看上面动图的特效部分，它由一个刀光和一个爆炸特效组成。当角色的挥砍动作播到某一帧的时候，刀光特效开始播放。当挥砍动作播放到打击帧的时候，会出现一个爆炸特效。
想要高效的在编辑器中制作出这类动作与特效完美吻合的效果，我们至少需要动画编辑器的两个功能：
- 1、允许动作触发特效或者其他动画
- 2、实时预览，所见即所得，便于微调
Cocos Creator 3.6的动画编辑器，新增了动画触发轨道的功能，在触发轨道上可以播放一个或者多个其他现存动画的功能，并且能够控制其时长。
此功能可以使特效师在制作动画的时候，通过组合的方式实现更复杂的效果，并且能实时预览。这将大大提高了特效师的工作效率。
特效师们，赶紧行动起来！
3D模型导入器优化
几乎每一次的版本更新都会对模型导入器进行增强，在 Cocos Creator 3.5.1 的时候就已支持智能材质导入，如下图所示：
截止目前，支持的 DCC 材质如下表：
下图为 Maya 中的材质自动导入 Cocos 后的效果对比，可以看得出来，已非常接近：
在 3.6 版本中，导入器再次强化，主要更新如下：
- 1.新增 GLTF specualr-glossiness 支持
- 2.新增 Blender principled bsdf 材质的 specular 通道支持
- 3.新增 mixamo.com 模型材质导入支持
- 4.增强 fbx surface phong 默认材质导入效果
- 5.模型拆分由默认开启变为默认禁用
材质效果提升是基本操作，就不过多讨论，麒麟子主要想说一下第 3 点 mixamo 材质支持和第 5 点模型拆分默认禁用。
mixamo.com
mixamo 是 Adobe 的一个可以为人体模型智能绑定骨骼并使用动画的软件，它同时还提供了许多人物模型和常见动作库，可免费使用。如下图所示：
但 mixamo 导出的模型在导入 Cocos Creator 时，材质呈现差异较大，因此在 Cocos Creator 3.6 中做了修正。
很多朋友说不知道哪里找带动画的测试模型，mixamo 是一个不错的地方。
模型拆分默认禁用
由于 Uniform 的限制，当骨骼数量超过一定值后，无法一次性提交给显卡渲染，此时就需要做特殊处理。
常见的处理方法有两种：
- 拆分模型和骨骼，分批提交
- 使用纹理传输骨骼动画数据
在 Cocos Creator 3.6 版本之前，模型拆分功能默认是开启的。
默认开启的原因是，简单来说就是：当模型骨骼未超出 Uniform 限制时，直接使用 Uniform 传递骨骼动画数据的方式的性能会高于使用纹理传输骨骼动画数据。
引擎组大佬对这个情况的描述是：对于 CPU 版本的骨骼动画，使用的是 Uniform 进行骨骼数据传递，由于不同设备和图形驱动的 Uniform 上限不同，所以我们使用了最低限制的 iPhone6 WebGL 作为 Uniform 上限，确保没问题。如果模型的骨骼数量超出限制（大概是 26-30 个），就会进行模型拆分，拆分为不同的 sub model，相当于是不同 draw call，这样每个 draw call 的 Uniform 都不会超限。
许多朋友反馈说自己的一个人物模型会占用多个 DrawCall，主要原因就是这里被自动拆分了，但开发者并不知道。
那为什么3.6版本不需要拆分了呢？
3.6 版本中，对于非 GPU 版本，做了运行时动态的 Uniform 限制判断，只要满足条件就会使用 Uniform 传递，如果不满足就退化为 FloatTexture 或 RGBA Texture 来传递。
基本规则如下：
- 默认情况下不再拆分模型，不对导入的模型数据做修改
- 如果骨骼数量未超过限制，直接使用 Uniform 传递
- 如果骨骼数量超过限制，则使用纹理传递
使用纹理传递骨骼动画数据的方式需要在顶点着色器中访问纹理，这一特性最低支持为 OpenGL ES 3.0, WebGL 2.0。
但依靠 GL 扩展，在仅支持 OpenGL ES 2.0 和 WebGL 1.0 设备上，几乎已达到 100% 的覆盖率，所以无需担心兼容问题。
目前保留此选项应该只是为了保持旧项目的兼容性，在适当的时候会考虑移除。
场景编辑功能增强
对于某些 3D 游戏来说，场景的制作效率往往决定了项目进度。
在场景编辑工作中，模型的摆放和模型位置的调节往往占了90%的工作量。Cocos Creator 3.6 提供了以下三个提升场景编辑效率的功能：
表面吸附
表面吸附主要用来在一定范围内的物体表面移动，使物件可以精确的摆放在物体表面。
注：对于有碰撞体组件的物体，表面吸附会吸附在碰撞体表面，而对于没有碰撞体的物体，表面吸附会吸附在物体表面。如下所示：
操作流程如下：
- 选中需要挪动的目标物体
- 按下快捷键（Ctrl/Command + Shift），gizmo出现拖动ICON
- 移动鼠标时，可以切换锚点到待移动的顶点
- 鼠标左键点击拖动ICON，移动
- 移动时工具会自动检测里光标附近的带有碰撞体积的物体，如果没有，则吸附在表面
- 移动完成后松开鼠标左键确认位置
顶点吸附
顶点吸附的主要作用是更精准的通过一个物体上的顶点，与另一物体的某顶点对齐。
操作流程如下：
- 选中需要挪动的目标物体
- 按住v键，gizmo出现拖动ICON
- 移动鼠标时，可以切换锚点到待移动的顶点
- 左键点击锚点，移动鼠标
- 工具会根据根据光标位置，计算出当前待吸附的目标，并在目标各顶点间移动注意：只能吸附在有顶点的位置
- 移动完成后松开鼠标左键确认位置
多对象框选
多对象选择是场景编辑中频率很高的操作方式，但在没有多对象框选之前，如果我们要选择多个对象，需要精确知道对象节点，再通过复选节点的方式进行多选操作，很不直观。
有了多对象框选功能后，场景编辑更加灵活方便了，用户无需在层级管理器中寻找需要被多选的对象节点，全部覆盖在选择框中的对象会被选中，未全部覆盖的对象不会被选中。
操作流程如下所示：
小结一下
八年前，在经历了 4 款 3D 引擎和 5 个 3D 游戏项目的毒打后，麒麟子有感而发，写了一篇文章叫《游戏引擎不仅是代码，更多的是完善的工具》，当时想表达的心情就是：生产效率是衡量一个引擎是否优秀的主要指标，不管是易用性、稳定性还是兼容性，最终都会折算到生产效率上。
Cocos Creator 从立项之初，就以提升生产效率为主要目标，这也是麒麟子第一眼就爱上Cocos Creator，认为值得长期投入精力的原因。
一路走来，从 Cocos Creator 最近的更新表现来看，麒麟子很庆幸自己入坑得早。但入坑晚的朋友也不要纠结，过去已经是过去，目前你拥有的最早入坑时间就是现在，想要就赶紧行动吧。
期待许久的内置预览、渲染调试和3D模型预览增强等特性别提有多甜了，开发、调试效率直线上升。
可视化多语言编辑器和动画编辑器增强算是惊喜吧，在游戏出海和美术工具提升方面又迈出了一大步。
模型拆分功能默认禁用虽然只是一个很小的细节，但却能解决大多数项目问题，希望以后这样的小优化越多越好。
由于篇幅有限，麒麟子不能将所有编辑器相关的优化都一一展示，更多内容就得靠朋友们自行挖掘啦。
下一篇文章麒麟子将重点介绍 3.6 版本中关于渲染相关的内容，敬请期待！
Cocos Creator 3.6 新特性详解 2/3：渲染篇
Cocos Creator 3.6 新特性详解 3/3：性能篇