cocos-creator-drawcall

Cocos Creator 降 DrawCall

何时用

• 游戏在中低端机上帧率不稳，用 DrawCall 面板发现每帧 DrawCall 超过 100+ 时。
• 增加了若干 UI 节点后帧率明显下降，怀疑合批被打断时。
• UI 图片散布在多个独立贴图文件，没有合并图集时。
• 场景里有频繁移动/变色的动态节点和大量静态 UI 混排，导致静态内容也每帧重绘时。
• 动态文本（计分、倒计时）用了系统字体，导致每个 Label 都是独立 DrawCall 时。

核心规则

1. 合批条件：同材质 + 同贴图 + 连续层级，缺一不可

规则： Cocos Creator 3.x 的自动合批（Auto Batching）要求相邻渲染节点使用完全相同的材质实例和贴图，且在渲染树中是连续的兄弟节点；只要中间插入一个使用不同贴图的节点，从该节点开始就会打断合批，之前和之后的节点各自成为独立批次。

为什么： AI 生成 UI 布局时完全不考虑渲染顺序，喜欢按逻辑语义组织节点层级：把背景、图标、文字、特效各自放一层，每层里再嵌套子节点。这种结构在视觉上没问题，但渲染时背景（图集A）→ 图标（图集B）→ 文字（Label 单独纹理）→ 特效（序列帧图集C）来回切换贴图，每切换一次就是一次新的 DrawCall，最终一个看起来简单的卡片 UI 产生了 8 个 DrawCall。新手以为"用了同一个图集就能合批"，却不知道中间穿插了一个不同材质的节点就已经把批次切断了，从 DrawCall 面板看到的批次数远超预期。

怎么做：

• 用 Creator 编辑器的 Render Batches 面板（菜单 Scene → Show Batches），直观看到哪些节点形成了一批，哪里发生了断批。
• 把使用同一图集的节点在层级面板中排列为连续兄弟节点，使用不同材质的节点（特效、粒子）移到最顶层或最底层，集中放置减少切换次数。
• 避免在同材质节点序列中间插入 Mask 组件节点——Mask 会强制开启模板测试，打断合批。
• 合批验证：在 Profile 模式下运行，对比增减节点前后的 DrawCall 数，用数字而非感觉确认合批效果。

---

2. 图集：同屏 UI 精灵打入同一图集，权衡尺寸与内存

规则： 同一个界面（大厅、战斗 HUD、商店）内频繁出现的精灵必须合并到同一张图集；图集尺寸控制在 1024×1024（中端机）或 2048×2048（高端机），超出则拆分多张；不同界面的独占图集在切换界面时及时释放。

为什么： 没有图集是 DrawCall 爆炸最直接的原因：100 个 UI 图片分别存为独立 PNG，渲染时每个图片一次 DrawCall，哪怕它们相邻、同材质，贴图句柄不同就无法合批。AI 生成美术资源管理代码时几乎从不提图集，直接 resources.load("sprites/icon_1") 逐个加载散图。另一个常见错误是图集做得过大：一张 4096×4096 的图集在中端安卓机上加载耗时 200~400ms，且常驻 64MB GPU 内存，换来的收益是减少了几个 DrawCall——完全不划算。图集尺寸要根据目标机型 GPU 内存上限精心规划。

怎么做：

• 在 Creator 编辑器中，选中存放精灵的文件夹 → 右键 → 「创建图集（Auto Atlas）」，配置最大尺寸和间距，构建时自动合图。
• 按界面分组：hall_atlas（大厅界面全部图标）、battle_hud_atlas（战斗 HUD）、common_atlas（全局通用小图标），不同界面图标不混打。
• 检查图集使用率（Creator Build 日志会输出各图集填充率），填充率低于 60% 的两张图集考虑合并，避免浪费内存。
• 大图（全屏背景、loading 图）单独存放，不入图集——它们本身就是独立 DrawCall，入图集反而浪费图集空间。

---

3. 动静分离：频繁变动节点与静态节点分层，防止静态内容被迫重绘

规则： 在 Cocos Creator 3.x 中，将完全静态的 UI 节点（不会移动、不会变色、不会显隐）与动态节点（血条、计分、移动角色）放在不同的渲染层；静态层节点上开启 Static Batching（或确保其 transform 从不改变），让引擎对静态批次做缓存而不是每帧重建。

为什么： Creator 3.x 的渲染器在每帧构建渲染批次时，只要某个节点的 transform 或颜色发生变化，该批次内的所有节点都需要重新提交顶点数据。如果把每秒更新 10 次的血量进度条和永远不动的背景装饰放在同一个合批组里，背景装饰每秒也被强制重新提交 10 次——本来可以被完全跳过的工作变成了持续的 CPU/GPU 负担。AI 不了解这一批次失效机制，倾向于按视觉层次（背景在下、前景在上）组织节点，把静态装饰和动态元素紧密交叉放置。