egret_渲染优化-降低dc

分类于

按照 egret_渲染源码阅读.md , 对项目进行实际操作优化, 降低 drawcall. 主要是使用图集
这里的ui是使用 fairygui. 一个包就一个图集

验证合批机制

确认过无误之后, 就往这个方向优化.
工具使用 通过egret的Chrome插件 inspector 控制显示隐藏.

  1. 打开绘制数据显示 (index.html中 data-show-fps="true" )

  2. 禁止 失去焦点时的中端ticker, 注释掉代码(看你自己写在那)

    1
    2
    3
    4
    5
    6
    // egret.lifecycle.onPause = () => {
    //     egret.ticker.pause();
    // }
    // egret.lifecycle.onResume = () => {
    //     egret.ticker.resume();
    // }

  1. 添加框框内的九个节点, 控制显示隐藏, 查看dc

    dc差值是 9, 可以判断除 每一个icon, 文字节点 都是一个批次. 9 = 6 + 3

  2. 调整一下节点顺序, 让icon相连, 看是否能合批

    ​ dc差值是 7, 每一个 文字 节点都是一个批次, 但icon节点合到了一个批次. 7 = 6 + 1

  3. 把系统字换成美术字, 并打到一个图集中

    在同一个图集里直接就一个批次绘制完成

  4. 结论: 合批机制正如源码一样. 所以项目使用中, 一些简单的, 变化比较小的 (如单位 人, 辆, 个 …) 可以考虑打成美术字, 并 整理到一个图集中. 可能不同图集会冗余一些相同的icon或美术字, 这就看怎么权衡 dc 跟 内存 了. 如果图集有很多空余空间 (毕竟 2的n次幂图集 应该会有很多空余的地方), 就 直接把 icon 或 美术字 冗余进去.

spine 动画

如果某些需求是 连续飘多个spine, 但是颜色不一样(只是举例), 空余考虑打到一个图集中, 通过不同动作触发 不同的uv映射下的贴图.

例如我这的项目有个飘小鸟的需求, 是spine做的, 但是有多个不同的颜色, 且在场景中的节点 排序是乱序的. 这样最坏情况下 n 个小鸟就n个批次. 优化: 打到一个图集. 一个批次绘制完成

优化前

优化后

cocos 和 egret 降低dc

这两种绘制机制都差不多, 降低 dc 重要指标就是 使用图集, 然渲染是 get 到的是同一个 Texture 对象, 才能让引擎做 合批 操作.

所以 有一套自己的资源加载方案, 让同一贴图路径返回同一个texture对象 (其实就是存在一个 key-value 集合中, new Map<string, Texture>() ), 然后做引用计数. cocos 中经做了 TextureCache 和 引用计数, 但egret 两个都木有做.

cacheAsBitmap

官方还有一个操作就是 将某个节点 生成一个位图, 就一个小图集, dc 可以瞬间降到1, 但是这个是以 内存 为代价的, 看自己怎么权衡了

详细的优化过程由于商业原因, 不能详细把截图都贴出来 (都是放在 excel 中)