Cocos Creator 之ScrollView渲染性能优化

Cocos Creator 之ScrollView渲染性能优化

1.引言

游戏开发过程中，有节点很多的场景会用到ScrollView这个组件，在开发中常碰到列表类的数据处理，比如商城界面、排行榜界面、任务列表、背包系统等模块中会使用到它，可能数量非常庞大，可能有几个！DrawCall的数量比较高，渲染性能低、整个scrollview的节点数太多，导致隐藏或显示界面时的onEnable和Disable开销比较大。大量的Item导致手机内存不足而使得卡顿崩溃。

2.解决方法

1. 常规操作——对于Sprite的处理
   使用自动图集或使用图片处理软件(TexturePacker)对碎图进行打包处理,让多个Sprite渲染的纹理都是同一张图集图片，这样的话就可以合并这些sprite的渲染批次，减少DrawCall以及CPU的运算开销.
   关于AUto-atlas Assets 可以参考Cocos Creator官方文档。

2. 常规操作——对于Label的处理
   选择Label使用bmfont字体，而不是使用系统字体。一个Label就是一次绘制，使用多了就会引起渲染性能上的问题。

3. 略骚操作——对于item的处理
   在可视范围外的节点，我们就不需要它再进行绘制，避免增加Drawcall。我们可以将这些可视范围外节点的opacity属性设置为0，从而避免绘制，可以大大的降低DrawCall。在滚动视图的事件回调函数中添加如下方法：

onSlide(view,list) {
		//view:ScrollView节点，或是显示区域节点,list：列表中的item节点
        let viewPos = view.parent.convertToWorldSpaceAR(view.getPosition());
        let viewBox = cc.rect(viewPos.x-view.width/2,viewPos.y-view.height/2,view.width,view.height);
        for (let i = 0; i < list.length; i++) {
            if (viewBox.intersects(list[i].getBoundingBoxToWorld())) {
                list[i].opacity = 255;
            } else {
                list[i].opacity = 0;
            }
        }
    },
};

4. 略骚操作——对于mask的处理
   减少mask的使用

5. 略骚操作——待补充，欢迎评论留言，提出更好的其他方法

来源：CSDN

作者：So_TM_What?

链接：https://blog.csdn.net/sotmwhat/article/details/103586152