Cocos Creator DrawCall优化

最新推荐文章于 2025-07-11 09:39:21 发布

superlin10

最新推荐文章于 2025-07-11 09:39:21 发布

阅读量6.6k

点赞数 11

CC 4.0 BY-SA版权

文章标签： Cocos Creator 优化

本文链接：https://blog.youkuaiyun.com/qq_36433883/article/details/95398378

本文围绕Cocos Creator中DrawCall的优化展开。介绍了DrawCall概念，即CPU调用图形编程接口命令GPU渲染的操作，提交命令性能消耗大。阐述了减少DrawCall的方法，如合批处理，还说明了查看方式。同时给出合批流程及不打断、打断合批的操作和其他注意事项。

概念说明

drawCall 是什么

Draw Call 就是CPU调用图形编程接口，比如 DirectX 或 OpenGL ，来命令 GPU 进行渲染的操作。在每次调用 Draw Call 之前，CPU 需要向 GPU 发送很多内容，包括数据，状态，命令等。这里对性能消耗巨大的是提交这个命令，而对 Draw Call 的实际渲染却很快。 (在CPU不改变渲染数据的情况下，完成一次渲染)## 新的改变

如何减少DrawCall

由于 GPU 渲染快速而，提交这个命令消耗巨大, 所以自然而然的优化想法就是把很多小的 Draw Call 合并成一个大的Draw Call, 这就是批处理的意思。在 Cocos Creator 中默认进行了合批的处理，我们需要做的就是按照 Cocos Creator 的合批方法来规划项目内容。

在哪里查看 DrawCall

在网页模拟器的左下角可以查看，如没有可以尝试在代码中加入并执行下面的方法。

cc.director.setDisplayStats(true);

合批的流程

假设绘制顺序是 A => B => C

如果 A、B、C 不使用一张贴图，那么就无法进行合批于是 DrawCall 是 3.
如果 A、B 使用图一个贴图，C 使用另一个贴图，则 AB 进行合批，于是 DrawCall 是 2.
如果 ABC 使用同一贴图，进行合批后 DrawCall 为 1.

下图使用共 5 张图片，但是图片在一张贴图中所有 DrawCall 占用 1，另一个 DrawCall 是背景所占用的。

合图实例1

注意事项

不打断合批的操作

使用不同图片,但没有对图片所在文件夹进行自动图集的设置，不会影响到合批操作.
不同图片放在不同级节点上，但仍在一次绘制流内. 如下图，虽然图片 SpriteB 与 SpriteA 不在同一层级内，但并没有打断合图.
修改节点的位置、旋转、缩放、锚点、尺寸、Skew 等熟悉.

打断合批的操作

在图片渲染中添加文字. 下图展示了再图片中添加 Label，导致合批被打断。前3个图片算一个DrawCall, 文字算 1 个，再次进行图片的渲染还算一个.
改变图片颜色，原因同文字.
改变图片透明度，原因同文字.
修改图片渲染模式(Type): 九宫格（SLICED）、平铺（TILED）.
修改 Blend 模式，导致图片与其他图片的blend模式不一致.
节点上添加一个Mask组件会打断合批, 一个Mask组件占用 2 个draw，尽量减少使用.
多个使用Label组件的节点是不会进行合批的，如下图所示.
使用RichText组件时，使用多少个标签<tag></tag>占用多少个DrawCall

<color=#00ff00>Rich</c>
<color=#0fffff>Text</color>
<color=#00ff00>Rich</c>
<color=#0fffff>Text</color>

在这里插入图片描述
9. 在使用了自动图集的情况下，在不同图集中的图片会打断合批，所以在合图的过程中要避免使用多个自动图集的图片.

其他

要渲染的节点过多，这样 cpu 需要在每次渲染的时候进行数据处理.
使用自动图集减少 DrawCall要在构建后才能观察到.
尽量使用多个连续的节点使用相同的贴图，可以一次性批量绘制.
使用cocos creator版本为2.0.9,不同版本可能有不同的处理方式,还需自行检验.