CocosCreator ScrollView性能优化

CocosCreator ScrollView性能优化

本文基于CocosCreator2.1.2版本

CocosCreator的ScrollView组件是游戏开发中的常用组件，我们经常在一些商城界面、排行榜界面、任务列表、背包系统等模块中会使用到它，同时它也是开销非常大的地方。当我们的需要显示的条目比较多时，单纯简单的去使用的话，性能很不好。CocosCreator只是实现了最基本的ScrollView，但相应的优化还需要我们根据项目的情况来进行针对性的优化。

当数据量比较大时，我们很容易碰到两个问题：

• DrawCall的数量比较高，渲染性能比较低
• 整个scrollview的节点数太多，导致隐藏或显示界面时的onEnable和Disable开销比较大

比如下面的这个界面（demo中的ScrollView1场景）

ScrollView当中有20个Cell，总共的DrawCall达到了790，单个Cell大概有50个节点，总共就有差不多1000个节点，这时我们的开销会变得非常的大。

接下来我们进行一些常规的优化：

• 首先我们要做的就是合并渲染批次，降低DrawCall，提升渲染性能，有两个方法我们可以去使用：

  • 使用自动图集或使用TexturePacker对碎图进行打包处理

    这样的话可以让多个Sprite渲染的纹理都是同一张图集图片，这样的话就可以合并这些sprite的渲染批次，减少DrawCall以及CPU的运算开销。
    这里我使用了AutoAtlas来实现，关于AutoAtlas的使用可以参考文档：Auto-atlas Asset
    让我们来看下效果：
    
    同样是20个cell，DrawCall降低到了556，相比较之前有了比较明显的降低。

    不过这还不够，如果你是在Google的Chrome浏览器上进行调试的话，推荐你可以使用spector.js这个插件，通过这个插件你可以看到每个DrawCall对于纹理的处理情况。
    对于原生开发的话，我们可以使用XCode中的GPU analysis功能

  • 开启dynamicAtlas功能，开启这个功能你可以在main.js中的window.boot()方法内加入下面的两行代码即可：