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()方法内加入下面的两行代码即可:
      在这里插入图片描述

  • 4
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值