前不久，深圳小爱灵动基于 Cocos Creator 推出元宇宙项目「灵动元境」刷爆了很多人的朋友圈，该项目发力品牌元宇宙生态基础设施建设。

孙晨阳

在深圳沙龙上，小爱灵动游戏内容业务负责人孙晨阳分享了如何使用 Cocos Creator 快速搭建一个多人游戏并进行调优，从材质优化、角色优化、场景优化、性能优化、插件配合等方面聊了聊自己的经验与心得。以下为分享内容。

---

Demo 演示效果

体验地址：

https://cdn.aigamify.cn/AI-GAME/CocosClub/

材质优化

Demo 中所有材质都使用了定制化，分别基于 Cocos Creator 的 Unlit、PBR 和 Toon 材质做了精简和优化。

以 Unlit 材质为例，在 FS 部分去除了 MainColor，假如需要用到 Color，后续可以通过宏开关控制。

同时在 VS 里，把 TilingOffset 去除了 Offset 部分，只使用 Tiling 就可以了（大部分情况下 offset 用不到），同时也增加了宏开关。

PBR 材质是一个通用材质，需要针对各个建模软件做适配的一些参数，所以做了很多兼容性处理，比如 albedoScale、emissiveScale 等精度参数都可以通过宏开关或者注释的方法去掉。

如果不需要使用 occlusion 或者 specularIntensity，还可以对 PBR 材质做进一步的优化。同时 PBR 中的 Lightmap 部分也有很大的优化空间，这块的优化可以根据项目去决定。

角色优化

角色渲染

角色整体的的定位与渲染偏卡通风格，这里采用了 Cocos Creator 默认的 Toon 材质进行优化与精简，减少了卡通渲染的色阶。去除二阶着色的同时，也减少了一阶着色的参数。

Cocos 默认的 Toon 材质是三阶着色，分别是 BaseColor 基础着色 + Shade1 + Shade2，这里去除了 Shade2，把 Shade1 称为一阶着色，BaseColor 称为基础着色。

此外，对一阶着色设置了宏开关进行控制。

我们可以在材质里通过拖动条（slider）更方便地拖动一阶着色。

高光部分则增加了宏开关，只有眼镜、头发等部分使用了高光，进一步减少渲染的开销。

皮肤、头发和衣服使用了边缘光，考虑到角色的颜色可能会改变，对边缘光的颜色也做了简化，改变肤色的时候边缘光可以随之改变。

为了减少材质数量和网格开销，角色的丝袜使用了细节贴图实现。这里同样做了宏开关的配置。

动画优化

由于实时骨骼系统下 uniform vec 有数量限制，因此目前在资源导入期会根据骨骼数量做拆分，而这会对其他系统也产生影响，常会出现多个材质存在，影响了后续的合批处理。

如果确定不会使用实时计算模式（对应 SkeletalAnimation 组件的 useBakedAnimation 选项未勾选时），可以勾选此项以提升性能。但注意改变此选项会影响生成的 prefab 内容，需要对应更新场景中的引用。后续重构会移除此流程。

这里删除手指的数量，同时还可以优化动画的体积大小。

性能优化

角色的贴图增加了 Multi_Texture 和对应的宏开关，方便进行 instancing 合批。

同理，角色的细节贴图也可以设置，Multi_Detail_Texture，并增加对应的宏开关，通过宏减少设置的属性。

考虑到角色皮肤、五官和头发颜色都需要改变，为了不打断烘焙动画的合批，在更换颜色时候也使用了。

随机颜色 DrawCall 并没有被打断

其他设置

角色的身体和脸部都设置的 Blendshapes，方便支持 Morph，Morph 可以同时支持实时动画和烘焙动画。

因为脸部的物件比较多，所以为了减少骨骼和蒙皮压力，把面部以 socket 物件的形式绑定在了骨骼的头部节点。

自己控制的角色实用了实时动画，这样可以使用动态骨骼和 Crossfade 动画过渡，近距离观看更加细腻。

场景内其他角色使用了烘焙动画，方便 GPU INSTANCING，这样性能更好，但缺点是导出的动画体积会增加。

通过以上设置，人物单节点 DrawCall 可以控制在7-8，多人人物不同颜色不同头发和衣服的 DrawCall 也可以通过 instancing 合批控制在10次 DrawCall 以内。

场景优化

将场景素材包导入到 Cocos Creator 后，将整个场景的子节点导出 Json，重复的物件都可以使用一个预制体来复用，再使用单一预制体+Json 配置还原原始场景。

如果使用导出的整个场景，同样的物件会是不同的 Mesh, 这样体积不仅会变大，也不能进行 Instancing 合批。

预制体生成

光照优化

整个场景使用了1个平行光和20个 Sphere Light。环境材质使用了 Cocos 自带的 PBR，进行了光照烘焙，并对光照烘焙进行了精简。

目前 Sphere Light 烘焙出的效果较弱，我们通过脚本，把整体的亮度和范围都提高了80%。

材质 Tiling

使用大量材质 Tiling，把零散的砖块合并成一个面片，并在材质中设置 Tilling，减少加载时间（前文提到过，这里没有使用 offset）。

材质 Instancing

大量相同的物件使用同一个预制体，同一个 Mesh，做 instancing 合批。

场景特效

使用 UV 动画+帧动画增加场景细节，优化动线。部分材质使用了 Emissive Map 的 UV 动画+细节贴图的叠加。

遮挡剔除

为了保证视野完整，增加了摄像机的遮挡剔除，使用射线检测或者碰撞体的 Trigger 检测，检测到固定范围内的碰撞体，通过设置 setInstancedAttribute 改变材质透明度，保证不会打断合批。

碰撞优化

只有复杂的物件使用了 Mesh Collider，其他物件都是用1-2个 Box Collider 或者 Cylinder Collider 节点，减少刚体运算量。比如斜坡可以使用 Box 改变欧拉角度，几个地毯可以使用一个 Box Collider 做碰撞合并等。

场景加载

场景粗略地分成了碰撞层、地表层、物件层和细节层，按照这个顺序去做分帧加载，减少加载与实例化时候的卡顿。除了碰撞层外，每个层级有自己的 Json 配置文件，预制体根据配置生成层级。

性能优化

机型检测

可以从引擎的 piplelineSceneData 中获取 GPU 型号，通过 GPU 型号和开源的 BenchMark 信息做对比，获取手机档次。

如果没有获取到 GPU 型号，或者查询到改 GPU 的配置，可以通过手机的分辨率做备选方案，获取手机的机型配置。

骨骼优化

模型做了骨骼优化，删减了手指和脚趾，这部分会占接近50%的骨骼数量，增加体积的同时，也会增加性能开销。

状态同步

状态同步框架使用了 TSRPC 进行了状态同步和房间匹配，通过使用 tween 对人物的位置和四元素做插值处理。

插件配合

Akeytsu，一款动画制作软件，目前可以免费下载社区或者教育版。支持一键射出多余骨骼和空骨骼节点，并一键蒙皮多个手指，方便做骨骼删减和进行 Mixamo 的动作绑定。

地址：https://www.nukeygara.com/

3D 动态骨骼插件，开箱即用，可以很方便快速地绑定动态骨骼，并可以实现动态骨骼碰撞。

地址：https://store.cocos.com/app/detail/3782

KylinsPostEffects，麒麟子写的一套不依赖 prefab、不污染场景节点树、简单调用几个参数就能使用的后期效果解决方案。支持多种后效，配置简单。

地址：https://store.cocos.com/app/detail/3333

BenchMark，支持高中低手机性能检测与手机性能适配，可以为高中低档机型提供兼顾质量与流畅的运行方案。

地址：https://store.cocos.com/app/detail/3662

相机截图，支持 3D/2D 或混合截图，操作简单。

地址：https://store.cocos.com/app/detail/3812

TSRPC，一个专为 TypeScript 设计的开源 RPC 框架，功能和使用可以点击查看文章《多人实时对战如何实现神同步？》《如何实现十万人在线的房间和匹配系统》。

地址：https://store.cocos.com/app/detail/3766

Cinestation，一个可视化智能相机系统。方便简单，支持虚拟相机和相机运镜。

地址：https://store.cocos.com/app/detail/3422

---

本次分享就到这里，有对品牌元宇宙合作、游戏化营销感兴趣的小伙伴，欢迎联系我们！

往期精彩