关于TTF文字界面和Alpha变换导致的性能问题

还是这个地址 https://forum.cocos.com/t/2-0-5/69107/32
其中提到

带有很多ttf文字的界面发生颜色变换或者alpha变换时,会导致严重的渲染性能下降。是因为Label类的_updateColor函数中会被调用_updateRenderData,。从代码上看,根源是因为描边导致的。这个有没有办法优化?
目前我是让项目中所有的描边都是黑色,这样再把_updateColor中的_updateRenderData优化掉,就可以提升很多。代价就是只能用黑色描边。

目前发现有方法实现任意描边,并且提升性能。
几种改动:

  1. CCNode.js的opacity的set中,把以下代码中的RenderFlow.FLAG_COLOR去掉:

     opacity: {
         get () {
             return this._opacity;
         },
         set (value) {
             if (this._opacity !== value) {
                 this._opacity = value;
                 this._renderFlag |= RenderFlow.FLAG_OPACITY | RenderFlow.FLAG_COLOR;                }
         },
         range: [0, 255]
     },
    
  2. render-flow.js中的以下代码中的COLOR改为OPACITY:

    let worldTransformFlag = _walker.worldMatDirty ? WORLD_TRANSFORM : 0;
    let worldOpacityFlag = _walker.parentOpacityDirty ? COLOR : 0;

  3. engine/cocos2d/core/renderer/util/label/ttf.js中
    以下代码要删除:

    _outlineColor.a = _outlineColor.a * comp.node.color.a / 255.0;
    

    以下的代码

    _context.fillStyle = `rgba(${_color.r}, ${_color.g}, ${_color.b}, ${_color.a / 255})`;
    

    改为 _context.fillStyle = rgb(${_color.r}, ${_color.g}, ${_color.b});
    以下的代码

    _context.strokeStyle = `rgba(${_color.r}, ${_color.g}, ${_color.b}, ${_color.a / 255})`;
    

    改为_context.strokeStyle = rgb(${_color.r}, ${_color.g}, ${_color.b});

综上所述,纹理重建非常花时间。当大量的文字界面做淡入淡出的时候,就会卡得不行。上面所有的改动,就是要优化掉因alpha变换导致的label组件的_updateColor调用的没有必要的纹理重建。这里改了渲染底层的dirtyFlag逻辑, 不知道会不会影响其它的地方。

引擎组一定要看看这个改动有没有副作用。

我现在也用的TTF字体,感觉后期还是得把所有TTF改为BMF

TTF性能确实不如BMFont

我也非常关注这个问题,所以我来帮你顶上去

期待2.0.6修复这个问题

估计没有2.0.6了,直接升2.1.0吧。

看引擎组的人说这个月会有2.0.6