腾讯光子 《最强魔斗士》3D 开发优化经验分享

《最强魔斗士》是由腾讯光子游戏工作室采用 Cocos Creator 3D 开发的一款画风精湛、玩法有趣的 3D 小游戏，近日腾讯光子开发团队接受了 Cocos 的专访，从策划、运营和技术多个角度，大方分享了游戏的开发经验，包括关卡设计、动画效果、角色换装、碰撞检测、资源管理和加载、性能优化等，相信能给大家带来新的思考和启发。
 

游戏亮点

游戏设计

《最强魔斗士》沿用了当前非常火的弓箭类操作设计，移动虚拟摇杆即可控制角色移动躲避，停下来的时候会自动对敌人进行攻击。角色会发射子弹自动攻击怪物，省去了选择攻击目标、选择技能、进行攻击的步骤。这种允许玩家单手操作的方式，更适合广泛的休闲用户，同时又赋予了玩家一种 「Play to Win」的乐趣。

在玩家成就反馈上，用相对慢速但可永久保存积累的装备+秘籍系统，搭配每局战斗中临时获得的局内等级+技能，让玩家在局内大概 2 秒杀一怪、30 秒清一关、60 秒升一级、10～15 分钟通一关，能在游戏过程中体验到飞速成长的即时满足感。

游戏采用了 2D 场景 + 2D 弹幕 + 3D 怪物和角色的做法：

2D 场景的设计大幅降低了同屏的顶点数，一方面降低运行在 iOS 小游戏平台的性能压力，另一方面也留出足够的性能空间来丰富场景美术。所以我们可以看到和其他弓箭类游戏不同的是，《最强魔斗士》场景细节极其丰富，各种建筑、农田、树木都做得非常细腻。

2D 弹幕则是弓箭类的标准做法，这可以大幅降低碰撞逻辑运算的压力，使得游戏可以承载像「3 连发连弩 + 正向箭 + 斜向箭 + 左右箭 + 子弹折返 + 弹射」这样同屏存在七八十个子弹的轨迹和碰撞计算。  

3D 角色和怪物，则方便做各种技能和换装，特别是换装及其背后的经济系统，这个毋庸多说。

美术品质

毕竟是腾讯光子的大厂作品，《最强魔斗士》里无懈可击的高品质美术令人由衷赞叹。甚至有多个游戏团队看到这种美术品质后，惊叹之余，转身就把自己公司里处于立项早期的弓箭类项目直接砍掉了 —— 不是技术上做不出来，而是真心没法做到这种美术水平。
 

细节是魔鬼

《最强魔斗士》除了美术细节之外，在其他方面的细节上同样打磨了很久。
作为 Cocos Creator 3D beta 的第一批内测参与者，腾讯光子在 2019 年 7 月份就已经立该项目，微信小游戏里注册这款游戏名字的时间是 2019 年 8 月 15 日，也就是到现在已经打磨了足足 8 个月。Cocos 团队在保密条件下，也看着这款游戏逐步完善细节到今天的水平。
比如在打击感和操控空间上，不同怪物面对不同武器时的击退计算、不同的受击硬直时间、近战怪物的攻击前摇时间，都非常精妙；在音效上，不同的怪物配置了不同的击中音效，这就可以在怪物超出屏幕范围的时候给予玩家听觉反馈；在关卡设计上，充满了各种让人会心一笑的卡地形、夹角、障碍物缝隙，等着玩家发现和利用。
 

在装备-技能搭配的策略空间上，玩家可以自己搭配出不同的打法流派。不同的套装对应不同的打法，可苟可浪。
即使在同样装备的情况下，有时欧皇眷顾，局内所有技能不断正向叠加，而有时则非酋附体，始终抽不到对应技能，这两者完全就是全场压制和满地找牙的区别。
所以在《最强魔斗士》里，装备强度 + 运气水平 + 操控水准，构成游戏过关三个核心要素之间的数值平衡，其实非常微妙。
顺便提示一下：关卡里随机给予的局内技能，其实并不是完全随机的，所以并不是表面上看起来的那么简单哦。
 

专访实录

游戏中丰富的关卡设计是如何提高制作效率的呢？

我们有专门的小组开发关卡编辑器，除了实现传统的刷子等地表编辑功能外，还有一个更上层的抽象-岛屿，通过表格配置以及一定的随机规则，可在工具层自动拼接岛屿生成完整的关卡，这是支撑目前数百上千个关卡制作的重要能力。

游戏中丰富的动画和效果是如何制作的呢？

这部分得益于 Cocos Creator 3D 本身强大的动画系统，我们所有动画都是美术在 Creator 里制作的，粒子系统和时间轴动画系统能满足所有需求，应用到程序里也非常方便。

角色换装是如何制作的呢？

目前产品里的角色是由武器决定外观的，所以换装系统并不复杂，武器决定了主角使用的整个模型和贴图，不过同动作的人物形象是复用骨骼和动画的，这能节省不少资源量。

能否分享下我们在碰撞检测上做了哪些优化策略呢？

复杂情况下有七八十个子弹和 10 个左右同屏的怪物，这个量其实不算很大，不过因为渲染已经消耗了一半的时间，再加上 iOS 下 JavaScript 解释执行的效率有限，所以还是遇到了一定挑战。

碰撞检测我们没有用物理引擎，为了简化运算，整个游戏里仅支持圆形和矩形碰撞体。障碍物首先对相邻的矩形进行合并减少碰撞体数量，然后用四叉树做空间规划，对每个子弹来说，每次参与运算的障碍物只有 0-2 个，所以这个消耗控制得很低。

更主要的消耗在于子弹和怪物的碰撞，这方面除了碰撞算法本身要简化到极致外，更重要的是从上层根据实际业务需求来复用子弹的运行路径和碰撞测试结果，从而达到大量减少运算的效果。

如何缓解同屏子弹和怪物数量较多时的渲染性能压力？

怪物是 3D 模型，引擎的渲染性能已经很不错了，另外我们扩展支持了 GPU Instancing，某些情况下能有一定性能提升，目前在低端 iOS 上怪物渲染占了不到一半的帧时间，算是比较可接受的范围内。

子弹大多数为 2D 精灵，同屏精灵数量最复杂的情况下有数百个之多，在合理安排层级控制 drawcall 在 40 以下之后，引擎本身的渲染效率已经不错。
 

不过针对如此大量同屏精灵数的情况，我们还是做了比较多的针对性优化才避免了运算峰值带来的卡顿。

主要的优化方案大致有这些：
 

• 很大部分矩阵运算可以简化为坐标求和；
• 实现轻量的 active 功能以优化大量频繁的节点增删；
• 用定制的仅支持 Simple 模式的 sprite 渲染减少动态合批的运算量；
• 用静态合批优化不动的精灵渲染；
• 用懒渲染模式减少序列帧动画的消耗等。

Cocos 团队：v1.1 已经自带 GPU Instancing 支持，不仅支持静态模型，还支持蒙皮模型的 Instancing 合批。

游戏整体非常流畅，可以为我们分享些小技巧吗？

资源管理和加载方面我们做了深度的定制，在不改动引擎原生实现的情况下，我们进入新手关卡需要下载超过 300 个文件，总体积在 9M 以上。而定制了文件组织形式和下载流程之后，进入新手关卡只需要下载约 15 个文件，总体积不到 2M。

资源定制的主要思路是把大量零散的小 json 合并成大 json，然后根据 prefab 的依赖关系把多个文件压缩成一个 zip 包，运行时下载这些 zip 包解压使用。

另外在关卡内战斗的时候，我们会利用空闲时间去下载下一关的 zip 包，从而达到更快的切换速度。

对 Cocos Creator 3D 的表现是否满意呢？

目前来看对 Cocos Creator 3D 的性能表现是比较满意的，beta 版本缺乏的一些对性能特别重要的组件也已经陆续支持了，据了解 1.1 版本还会支持 GPU 粒子系统，把性能上留下的一块短板补上，这个是我们特别期待的。

至于性能优化方面，对于大型的复杂游戏来说，即使引擎的通用功能性能再好，都避免不了要定制化部分实现，从这个角度来说，希望 Cocos 引擎后续在用户定制与扩展方面提供更好的支持，这样能降低用户直接修改引擎源码的需求和维护成本，变得更加友好。

Cocos 团队：v1.1 的粒子系统开始支持利用 GPU 运算能力进行模拟，大幅度提升运行性能，特别是在不支持 JIT 的 iOS 设备上，可以愉快地增加特效的使用啦。

最终为什么选择 Cocos Creator 3D 来制作呢？

由于微信小游戏平台上的复杂 3D 游戏案例并不多，所以技术选型是我们特别慎重的事情。

项目在选型阶段花了接近一个月时间，预研了多个现今市场上支持 3D 渲染的H5引擎，并且分别用 Cocos Creator 2.5D 版本，Cocos Creator 3D beta 以及 LayaBox 2.0 引擎实现了原始 Demo，做了详细性能测试。

对比了开发流程、技术支持和运行性能的各方面因素，发现 Cocos Creator 3D 在前两者有明显优势，性能上也基本持平，所以成为了我们的首选。

是否有计划发布到原生平台呢？

目前我们也构建了安卓 App 版本，运行性能高非常多，不过暂时没有发布计划，从能力上来看 Cocos Creator 3D 是能满足跨平台需要的。

Cocos 团队：原生性能一直是我们非常重视的关键指标，开发者们可以尝试把自己的游戏发布到原生平台，可能会有惊喜哦。

对于各个岗位上手 Cocos Creator 3D 是否有什么建议呢？

在 Cocos Creator 3D beta 版本阶段，引擎和工具在稳定性以及易用性上面有较多不足，不过随着版本迭代，我们能感受到引擎的进化非常快，对 bug 的响应及修复都非常敏捷。

目前到了正式版阶段，我们开发团队认为问题不多了，引擎运行层面比较稳定，主要是编辑器方面的稳定性希望进一步加强。

Cocos Creator 3D 和 2D 在工作流体验上是否有差异呢？ 

非常接近，涉及 3D 的部分需要看一下文档，其它方面可以无缝切换。

如何评价 Cocos Creator 3D 的整体使用体验呢？

功能丰富性能强大、使用上很简单符合过往经验，IDE 集成度高，对团队协作支持得很好，代码开源对性能分析和优化很友好。建议方面还是集中在编辑器，希望有更高的稳定性和扩展能力，进一步提升开发效率。
 

为什么选择用 3D 的形式来呈现这个游戏呢？

按照之前的一些经验，我们希望《最强魔斗士》这个项目在动作层面上拥有更好的表现力，同时也有更好的移动手感、更加流畅的移动体验、以及在整个美术制作流程和表现力上有更高的上限，所以最后我们决定试用 3D 的呈现方式。

选择斜 45° 的视角是出于什么考量呢？

45° 的视角从对抗模式来看，相较于弹幕体验，会更接近传统 RPG 的视角表现方式。在这样的视角上，可以突破纯弹幕的玩法设计禁锢，扩展更多的设计空间。
比如后续我们会设计更丰富的武器体验，甚至近战等等，同时 45° 的视角也会更适合表现有压迫力的大型怪物，例如游戏中的 Boss 战斗，玩家体验就会更丰富一些。
 

如何提高游戏中关卡的制作效率呢？

在 Cocos Creator 3D 引擎下，项目组内部针对游戏的关卡和怪物都搭建了比较高效的编辑器，大幅度提高了关卡制作的效率。游戏前三章的体验量级，就有 600-700 个不同的关卡小岛，没有高效的编辑器是完全无法跟上内容消耗速度的。

美术方面的制作管线有涉及到哪些工具和岗位呢？

美术涉及到的工具和岗位都算是行业中比较常规的标配，二维绘图软件及 3ds max，岗位有交互、视觉、原画、3D 动效设计师这些。相对比较有挑战的是引擎的选择。产品在小程序上发布，角色需要 360° 自由旋转、射击，用 2D 图素就不那么好表现，图量也会很多，权衡之后用 3D，选用 Cocos Creator 3D，兼固了开发及美术 3D 需求。由于工具比较新，人力有限，美术的一些效果功能都是对应岗位的同学提给 Cocos 那边帮忙实现，相当于联合的技美。

游戏中丰富的动画和效果是如何制作的呢？

特效方面：采用 Cocos Creator 3D 编辑器开发制作，粒子系统、模型、序列图都结合使用，较多采用小型特效贴图，在编辑器里以 2D 模式，组合搭建出不同的动画特效。

比如游戏里的子弹及受击，部分结合了粒子、模型、系列图等，单图居多，特效师做好每个子弹样式，由程序去实现弹道逻辑，比如飞行、抛射、折返、追踪、多弹道等不同效果，这种方法能保障在全屏群攻的时候，还能流畅地操作。 

UI 界面动效方面，分解界面素材，针对每个 UI 节点做动画。有些也需要程序协助触发的动效，比如技能选取，特效设计师先做好选取技能前后所要表达的特效文件，然后配合程序做好逻辑接入。

游戏中有丰富的装备系统，角色换装是如何制作的呢？

角色的换装是在三维软件里制作好模型动画，导出 fbx 格式，合入到 Cocos Creator 3D 里面，皮肤跟武器是分开的，可以自由搭配，并能实时旋转预览，这也是 3D 的优势。

激励广告是如何融入到游戏流程中的呢？

我们把广告加入到了对局内复活的功能上，对于类似类型的 PVE 游戏来说，这样的广告形式不影响玩家体验，比较自然。

我们是如何考量游戏的策略性的呢？

这里介绍两个魔斗士里面的技能组合：

弹道增强+追踪箭/折返子弹+背刺暴击，类似的思路，一方面这样的技能组合能够带来足够的视觉冲击力提升；另一方面，通过核心技能的搭配，可以达成 1+1 远远大于 2 的强度体验，包括能够突破一些特殊地形阻挡的限制，后续也会设计更多类似的技能组合，敬请期待哈~

可以简单分享下装备系统的设计思路吗？

我们希望能够通过外围的策略系统提供给玩家更多的长线追求和策略技能选择，主要是下述几个方面：

• 不同的套装提供不同的玩法倾向；
• 高品质套装的特殊魔法属性，可以让玩家打造属于自己的专属极品装备；
• 上个版本更新的特殊套件装备，可以让玩家选择放弃一部分能力，来获得更多的关卡资源收益。

我们在用户黏性上有做哪些措施呢？

一方面是尽快提高我们更新关卡的速度，能够跟得上玩家消耗内容的速度；另一方面也是前面提到的挑战玩法，给平台期玩家提供了更多持续游戏的动力，后续也会继续在这个方向发力，给平台期的玩家提供更多有趣有深度的新玩法模式。

方便透露下后续会做哪些调整吗？

目前上线阶段还只是很少量级的数据测试，从测试数据结果来看，基本符合我们的预期吧，玩家的在线时长数据比较可观，这也为我们后续继续迭代内容提供了更多信心。
 

另一方面我们也希望可以稍微降低前期的关卡难度，以及优化最基础的体验（摇杆手感、镜头逻辑、稳定帧率等等），希望有更多的玩家可以体验到这个玩法的深度乐趣~

以上就是我们今天想跟大家分享的内容啦，非常感谢腾讯光子团队为我们带来的技术干货，希望越来越多的开发者，能够通过 Cocos Creator 3D 创作出更多的精品游戏，也祝愿《最强魔斗士》能取得好成绩。