腾讯光子 《最强魔斗士》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 团队在保密条件下,也看着这款游戏逐步完善细节到今天的水平。

比如在打击感和操控空间上,不同怪物面对不同武器时的击退计算、不同的受击硬直时间、近战怪物的攻击前摇时间,都非常精妙;在音效上,不同的怪物配置了不同的击中音效,这就可以在怪物超出屏幕范围的时候给予玩家听觉反馈;在关卡设计上,充满了各种让人会心一笑的卡地形、夹角、障碍物缝隙,等着玩家发现和利用。

在装备-技能搭配的策略空间上,玩家可以自己搭配出不同的打法流派。不同的套装对应不同的打法,可苟可浪。

即使在同样装备的情况下,有时欧皇眷顾,局内所有技能不断正向叠加,而有时则非酋附体,始终抽不到对应技能,这两者完全就是全场压制和满地找牙的区别。

所以在《最强魔斗士》里,装备强度 + 运气水平 + 操控水准,构成游戏过关三个核心要素之间的数值平衡,其实非常微妙。

顺便提示一下:关卡里随机给予的局内技能,其实并不是完全随机的,所以并不是表面上看起来的那么简单哦。

专访实录

由于本次技术专访内容太过专访硬核,为保证阅读体验,我们将按照技术和策划分为 2 期来推荐哦,本期为技术向干货分享,下期策划向专访内容也在整理中,敬请期待哦。

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

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

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

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

Q:角色换装是如何制作的呢?

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

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

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

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

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

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

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

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

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

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

很大部分矩阵运算可以简化为坐标求和;

实现轻量的 active 功能以优化大量频繁的节点增删;

用定制的仅支持 Simple 模式的 sprite 渲染减少动态合批的运算量;

用静态合批优化不动的精灵渲染;

用懒渲染模式减少序列帧动画的消耗等。

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

Q: 游戏整体非常流畅,可以为我们分享些小技巧吗?

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

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

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

Q:对 Cocos Creator 3D 的表现是否满意呢?

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

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

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

Q:最终为什么选择 Cocos Creator 3D 来制作呢?

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

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

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

Q:是否有计划发布到原生平台呢?

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

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

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

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

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

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

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

Q: 如何评价 Cocos Creator 3D 的整体使用体验呢?

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

以上就是我们今天想跟大家分享的内容啦,非常感谢腾讯光子团队为我们带来的技术干货,下期策划向专访内容也在整理中,敬请期待哦。

本期分享较为概括,大家可以前往微信公众号阅读原文通过投票告诉我们,你想了解哪方面的具体技术细节,后续我们将继续邀请光子团队为我们做相关技术展开分享哦。

我们也希望越来越多的开发者,能够通过 Cocos Creator 3D 创作出更多的精品游戏,也祝愿《最强魔斗士》能取得好成绩。

我们王哲大大已经沉迷这个游戏无法自拔了,五一快到了,大家可以趁着假期体验一下哦~

11赞

“资源定制的主要思路是把大量零散的小 json 合并成大 json”

可以大概分享一下这个怎么做的么?

1赞

太牛了,这个水准的产品,确实望而却步。
希望进一步分享把prefab打包成zip下载,然后本地解压的具体实现思路。后续引擎官方能支持就更好了。

:joy:感觉这是在难为策划(如何淡化弓箭传说copy向)

2赞

官方本来就有API。。自己搜下论坛就有相关帖子

画面 性能 确实做的挺好的。

青出于蓝而胜于蓝。美术厉害了。

做个优化小总结:




能请问一下相关的关键字嘛
我没找到相关的内容

参与项目制作的团队大概是多大规模呀

资源深度定制和我们实现方案一样,zip+合并json 。

另外不知是否研究过webp的方案

其实吧,感觉这类又不是光子自己原创的,所以没啥好夸得,都是做别人剩下的在。。。。。。缺少的还是创新

玩了两关…手机能煎鸡蛋了,电量从95到40- -

这么夸张吗

没有用到物理碰撞,碰撞这么流畅,臣妾做不到啊

能不能分享一下,山寨“弓箭传说”的经验,也就是腾讯的独家秘诀:如何成功山寨一款爆款游戏。
其实吧,大家都不缺技术,但是如何做到山寨但又不会被原作者告,又能被玩家当成是原创。

场景是用Plane或Quad做的2d场景吗,还要血条也是用这两个组件做的吗?

可以试试这个:
https://docs.cocos.com/creator3d/manual/zh/ui-system/components/editor/ui-coordinate-tracker.html