大家好,我是晓衡!

上周我花了3天的时间,体验测试了一款 Creator 3.x 性能优化工具:98K动态分层合批

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

它能将 DrawCall 超过 1000+ 次的 2D 界面,实现运行时节点分层排序,利用引擎动态合图 + 批量渲染能力,从底层将 DrawCall 优化到个数位。

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

测试案例是一个 2D 背包界面,我在 ScrollView 中动态创建了 500 个 item 元素。你可以看到,开启合批优化后 DrawCall 从 1016 直接降到了 8,游戏帧率也从 5 帧直接拉满到 60 帧。

这里是H5测试体验链接,你也可以试一下:

98K动态分层合批 支持H5、小游戏、原生等多个平台,而我的测试目标是,观察对比在不同平台环境上,使用 98K 优化前后的性能表现差异。

01 合批优化测试对比

先给出我的测试结果,一共测试了 7 个环境:

  1. Mac M1 Chrome 桌面浏览器
    【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

  2. realme X50 Pro Android 原生
    【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

  3. realme X50 Pro Android 微信小游戏
    【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

  4. OPPO R11s Plus Android 原生
    【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

  5. OPPO R11s Plus Android 微信小游戏
    【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

  6. iPhone11 微信小游戏
    【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

  7. iPhone7 微信浏览器
    【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

以上测试环境数据,我整理了个表格,方便大家对比优化关后的效果:

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

如果你觉得看数据表还是很费劲的话,可以直接看晓衡这个结论:

桌面浏览器上的优化性能最佳,这是我万万没想到的,不论是 Mac 还是 Windows 系统,都是如此。未合批前仅仅只有 5 帧,在列表上滑动,非常卡顿,基本上无法使用。开启合批后,直接拉满到60帧,列表滑动流畅。

其次是在 iPhone 上,小游戏上的优化比浏览器要好,未合批前不到 30 帧,开启合批后满帧 60,列表滑动也更顺滑。

然后是在 Android 手机上,中高机型未合批前就能达到 50 ~ 60 帧,优化后提升不到 10 帧的样子,不看调试数值感觉不明显。低端机型的优化效果不错,有 20 ~ 30 帧的提升,硬件性能越低优化后的效果越好。

最后,我在多说一点,就是在 iPhone 和 Android 低配机型上,原生性能要低于H5和小游戏,优化效果会好。下面是我构建的 APK 安装包,感兴趣的伙伴可以来体验一下:

- 链接: https://pan.baidu.com/s/12aEvOL9fQrpyB4Xs--OALg?pwd=4znt 提取码: 4znt 

测试数据和结论有了,我们再深入一点,98K动态分层合批的核心是对 DrawCall 的优化,初学游戏开发的小伙伴,可能会有疑问:

而有过游戏开发经验,又爱思考的老铁多半会问:

下面我就来尝试一下,能否将上面几个问题说清楚,你可以更加清楚知道是否适合在自己的项目中使用98K合批优化。

02 理解Drawcall与合批

DrawCall 是什么?

  • 简单来讲 CPU 准备好渲染数据,提交给 GPU 进行绘制的这个过程就是一次 DrawCall

为什么减少 DrawCall 能提升游戏的性能?

  • GPU 渲染图像的速度非常非常快;
  • CPU 的内存\显存读写、数据处理和渲染状态切换,相比 GPU 非常非常慢;
  • 大量的 DrawCall 会让 CPU 忙到焦头烂额,而 GPU 大部分时间都在摸鱼

因此,尽可能一次性将更多的渲染数据提交给 GPU,减少 CPU 的工作时间,从而提升游戏性能。

什么是合批?

  • 简单来说,组织更多渲染数据提交给 GPU 的过程,称之为“批量渲染”简称“合批”
  • 但要实现合批的前提是:渲染数据必须一致

更多关于 DrawCall 优化的理解,可以阅读陈皮皮的这篇文章:Cocos Creator 性能优化:DrawCall

举个例子

比如像下面这样的节点树结构,就无法实现合批:

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

因为 item 节点下的 Sprite 与 Label 节点渲染类型不同,并相互间隔排列,引擎无法向 GPU 批量提交渲染数据。

因此渲染一个 item 需要 DrawCall 4次:Sprite → Label → Sprite → Label。

我们调整一下 item 下的节点顺序,像下面这样:

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

试试你能计算出上图中的 DrawCall 值吗?在 Creator 引擎中预览运行游戏,在画面左下角,你会看到 DrawCall 的值显示为 3。

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

细心的你这时可能会问:为什么 DrawCall 是 3 而不是 2 呢?

不用怀疑,你计算的 DrawCall 为 2 是正确的,因为引擎这里会占用一次 DrawCcall,具体为什么,我们后面来说原因,你也可以思考一下!

03 98K是如何避免 DrawCall 被打断?

要想避免 DrawCall 被打断,首先要理解什么是 DrawCall 打断!

通过上面的举例,不知道你没有点感觉了。我们再来看多个 item 节点树 DrawCall 情况又会是怎么样的呢?

在层级管理器中,我们再复制一颗 item 节点树出来,见下图所示:

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

从上图可以看出,两颗 item 节点树时又出现:item1(Sprite → Label) → item2(Sprite → Label) 交替的情况,合批就这样被打断了。

聪明的我立马会想到,将所有 item 下的节点合并不就好了,像下图这样:

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

效果是不是很好?6 个节点只有 2 次 DrawCall !就这样干?

有经验的你问题又来了,我们的逻辑代码通常是以单个 item 为单位建立的对象,如果将类型节点点合并到一起,上层逻辑代码岂不是要乱成一锅粥?

优化的方法是知道了,但代价太大,不知道如何下手!

这个问题一直困扰我多年,一直没找到可行的解决方案,直到遇到98K动态合批的开发者。

这里不得不说下 98K动态合批 的强悍,就在于它可以让你无视 item 子节点顺序和层级关系,只需要在上层容器节点上添加 BatchItems 组件,最大程度上保证合批不被中断,实现该节点树的渲染优化。

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

其代码实现原理是:

  1. 拦截引擎渲染开始事件,对节点树下的所有子节点按类型重新分层排序;
  2. 拦截引擎渲染结束事件,立即还原渲染前的节点树排序,从而实现无入侵式的合批优化
  3. BatchItem组件唯一的 Culling 属性是可选的,它会拿 Culling 属性所指定的矩形区,与容器中 item 矩形做相交测试,将不在 Culling 区的元素从渲染队列中剔除掉

如果你对性能优化代码和技术感兴趣,可以加入作者的微信群(见文末二维码)。

04 应用场景

需要注意的是98K合批优化,仅适用于 2D UI 界面的优化,特别是具有大量重复结构的 item 场景如:背包系统、滑动列表、技能栏、聊天界面等,以下应用场景供大家参考。

背包系统

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

频道列表

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

游戏排行榜

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

聊天界面

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP

04 注意事项

我在使用 98K编写前面那个背包测试工程时,踩到几个坑有几点需要注意:

  • item 下子节点名字不能重复需保持唯一性;

  • 多个同结构的 item 子节点名字需要保持一致

  • 节点的 Layer 属性需保持相同,建议统一为 UI_2D;

  • 充分使用引擎的动态合图,将尽量多的图片合并,需要增大项目设置中 BATCHER2D_MEM_INCREMENT 宏的参数值

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!-LMLPHP
  • 需要手动开启引擎的动态合图和关闭清除图片缓存开关

    dynamicAtlasManager.enabled = true;
    macro.CLEANUP_IMAGE_CACHE = false;
    

05 结语

最后,我再小结一下 98K动态分层合批 的整体感受!

它是非常适用于像背包系统、滑动列表、聊天消息这类 2D UI 场景。

如果因游戏中因节点太多导致图文分层原因,打断合批造成 DrawCall 剧增影响性能和增加发热问题,98K合批可以说是首选的优化工具。

当然,你也可以使用虚拟列表的技术并不用创建出所有的 item,但我的感受是98K更为简单粗暴、立杆见影,能结合使用效果更定会更佳。

而从多个环境平台的测试效果来看:

  1. 桌面浏览效果最佳,如果你是做 H5 页游,那再适合不过

  2. 再次是 iPhone 浏览器、小游戏优化效果显著

  3. 然后是中低端的 Android 也比较推荐

下面是 H5 | Android 测试链接,强烈建议你也来体验一下,欢迎留言说说在你的设备上体验感受。

H5测试链接:

- http://gameview.creator-star.cn/98K/batch-items/index.html

Android测试包下载

- 链接: https://pan.baidu.com/s/12aEvOL9fQrpyB4Xs--OALg?pwd=4znt 提取码: 4znt 

Cocos Store下载链接

- https://store.cocos.com/app/detail/4310

希望今天的分享能够对大家有所帮助和启发, 晓衡会继续挖掘 Cocos Store 上的优秀作品分享给大家,欢迎关注!

01-16 10:33