基于CocoStudio的cocos2d-x界面的加载优化笔记
2014-05-21 23:43
162 查看
近期在用cocos2d-x配合cocostudio做一款卡牌手游,在做编队时遇到了性能优化的需求。情况是这样的,玩家要进入关卡副本战斗,需要选择3个参战的英雄。而进入不同类型的副本需要的英雄组合是不同的,有时候需要水元素土元素的,有时候需要火元素的,有时候需要加血的等等。为了方便玩家,设置了5个队伍。玩家可以自由配置每个队伍的英雄,并通过左右滑动页面选择一个队伍为当前使用队伍。根据功能需求,在程序方面采用了UIPageView预先加载了5页作为队伍的容器,每页加载3个英雄卡牌,英雄卡牌是由策划在cocostudio拼的UILayout界面组件。功能完成后发现加载编队界面很卡,体验特别差。看来不得不停下手头工作,对这个界面进行优化一下了。
vc带有性能分析工具,运行此工具可以得到一份全面的性能分析报告,并能很容易的发现耗时的代码分支进行有针对的优化。当前这个问题基本可以缩小范围确定是由卡牌的加载导致的,因为这个界面进入后基本就是创建了一些卡牌。既然这样,动手开始优化吧。首先需要加上分析语句块执行时间的代码,运行几次得到性能基线,用于验证判断并对比优化效果。说时迟,那时快,终于体会到这话的意境了,添加时间分析代码只用了2秒钟,因为安装好VA后我已经添加了一个用于方便的得到指定语句块执行时间的VA Snippet,其用法就是选中要分析的选择菜单“VAssistX”->“Surround
With VA Snippet”->“Add statement run time log”,最后这个菜单项貌似很高端大气上档次,其实就是在选定语句块的前后加上了取当前时间的代码,然后取差值得到选定语句块的执行时间,并输出。 经过5次测试,队伍加载时间基本在400~500毫秒之间,然后测试了下每个卡牌的加载时间在45ms左右,真令人吃惊。由于每个卡牌都是通过加载本地文件创建的,代码是
,卡牌界面模型文件大概58k大小,虽说磁盘io挺耗时的,但凭经验加载这么小的文件连5ms都用不了。姑且认为加载文件和分析也比较耗时吧,cocostudio为Widget及其派生类提供了clone方法,可以通过已有的Widget或其派生类对象clone出新的对象。 开始动手改造卡牌的创建方法,首先从本地文件创建卡牌作为原型,然后创建卡牌元件时通过原型clone而来。很快改造完毕,带着狐疑,伴着期待,按下F5,走你。。。,游戏运行起来了。又是5次,分析了下执行时间,小小失望,队伍界面加载时间降到了320~360ms,单个卡牌clone时间为36~41ms,时间缩短了才百分之十几。clone时间这么长,问题出在哪儿呢?简单跟了下代码,发现clone时要把模型的各child都创建一次,而模型中的图片、标签等特别多。尤其是英雄图片、表示星级的7个星星图片、各属性说明的静态文本等等。英雄图片在创建模型时已经创建并加载了纹理,加载好后又重新替换了纹理,完全可以动态创建,少加载一次纹理;7个星星在模型里不需创建,创建卡牌时按需clone出指定数目的星星。静态文本根本不会变化,可以直接画到卡牌背景图片里。都说知易行难,扯,这次执行不难,照此思路修改了下卡牌UI的制作工艺,去掉了不需要提前加载的图片与标签,然后相应修改了代码。满怀信心的又测5次,哇,编队界面加载时间降到了190~230ms,降低了百分之三十几,单个卡牌模型的clone时间降到了20ms左右。
从450ms的加载时间降到200ms,明显感觉流畅了很多,但还是卡顿呀。怎么办?看来得拿出杀手锏了!子曰:不执行的代码才是最快的代码!在effective c++ 里有个名词叫lazy evaluation,也就是延迟计算,懒惰计算法。我们这里就汲取前辈的卓绝思想,就叫Lazy load,延迟加载吧。在界面进入时先加载当前队伍,然后启动一个定时器,在大约0.1m后加载其余看不到的队伍,很快,代码改好了,再测,队伍界面加载时间降到了60ms,为什么这么短呢,因为界面加载时只加载了3个当前队伍的英雄,当然如果当前队伍只有一个或没有,那就更快了。发布到ipad上体验下,界面切换流畅迅速,进场动画如丝般顺滑,基本达标。以后有时间再继续优化。
下边是几次优化的效果对比表:
附:时间=距离/速度;性能优化有时候并不是提高了速度,并不是让代码执行有多快。而是减少了距离,减少了往复与弯路,有时又甚至仅仅是营造了一种幻象。
后记:第一次在csdn上写博客,还不太会编辑格式。
vc带有性能分析工具,运行此工具可以得到一份全面的性能分析报告,并能很容易的发现耗时的代码分支进行有针对的优化。当前这个问题基本可以缩小范围确定是由卡牌的加载导致的,因为这个界面进入后基本就是创建了一些卡牌。既然这样,动手开始优化吧。首先需要加上分析语句块执行时间的代码,运行几次得到性能基线,用于验证判断并对比优化效果。说时迟,那时快,终于体会到这话的意境了,添加时间分析代码只用了2秒钟,因为安装好VA后我已经添加了一个用于方便的得到指定语句块执行时间的VA Snippet,其用法就是选中要分析的选择菜单“VAssistX”->“Surround
With VA Snippet”->“Add statement run time log”,最后这个菜单项貌似很高端大气上档次,其实就是在选定语句块的前后加上了取当前时间的代码,然后取差值得到选定语句块的执行时间,并输出。 经过5次测试,队伍加载时间基本在400~500毫秒之间,然后测试了下每个卡牌的加载时间在45ms左右,真令人吃惊。由于每个卡牌都是通过加载本地文件创建的,代码是
GUIReader::shareReader()->widgetFromJsonFile(strModelFileName.c_str());
,卡牌界面模型文件大概58k大小,虽说磁盘io挺耗时的,但凭经验加载这么小的文件连5ms都用不了。姑且认为加载文件和分析也比较耗时吧,cocostudio为Widget及其派生类提供了clone方法,可以通过已有的Widget或其派生类对象clone出新的对象。 开始动手改造卡牌的创建方法,首先从本地文件创建卡牌作为原型,然后创建卡牌元件时通过原型clone而来。很快改造完毕,带着狐疑,伴着期待,按下F5,走你。。。,游戏运行起来了。又是5次,分析了下执行时间,小小失望,队伍界面加载时间降到了320~360ms,单个卡牌clone时间为36~41ms,时间缩短了才百分之十几。clone时间这么长,问题出在哪儿呢?简单跟了下代码,发现clone时要把模型的各child都创建一次,而模型中的图片、标签等特别多。尤其是英雄图片、表示星级的7个星星图片、各属性说明的静态文本等等。英雄图片在创建模型时已经创建并加载了纹理,加载好后又重新替换了纹理,完全可以动态创建,少加载一次纹理;7个星星在模型里不需创建,创建卡牌时按需clone出指定数目的星星。静态文本根本不会变化,可以直接画到卡牌背景图片里。都说知易行难,扯,这次执行不难,照此思路修改了下卡牌UI的制作工艺,去掉了不需要提前加载的图片与标签,然后相应修改了代码。满怀信心的又测5次,哇,编队界面加载时间降到了190~230ms,降低了百分之三十几,单个卡牌模型的clone时间降到了20ms左右。
从450ms的加载时间降到200ms,明显感觉流畅了很多,但还是卡顿呀。怎么办?看来得拿出杀手锏了!子曰:不执行的代码才是最快的代码!在effective c++ 里有个名词叫lazy evaluation,也就是延迟计算,懒惰计算法。我们这里就汲取前辈的卓绝思想,就叫Lazy load,延迟加载吧。在界面进入时先加载当前队伍,然后启动一个定时器,在大约0.1m后加载其余看不到的队伍,很快,代码改好了,再测,队伍界面加载时间降到了60ms,为什么这么短呢,因为界面加载时只加载了3个当前队伍的英雄,当然如果当前队伍只有一个或没有,那就更快了。发布到ipad上体验下,界面切换流畅迅速,进场动画如丝般顺滑,基本达标。以后有时间再继续优化。
下边是几次优化的效果对比表:
阶段 | 界面加载时间 |
---|---|
最初状态 | 450ms |
模型clone | 340ms |
减少模型图片 | 200ms |
仅加载当前队伍 | 60ms |
后记:第一次在csdn上写博客,还不太会编辑格式。
相关文章推荐
- cocos2d-x lua开发笔记:ListView加载多个item优化处理
- [置顶] React Native基于最新版本实现JsBundle预加载,解决白屏等待,界面秒开优化
- cocos2d-x笔记(八)Lua开发飞机大战-2-游戏加载界面
- 基于最新版本React Native实现JsBundle预加载,界面秒开优化
- 学习笔记-----cocos2d-x加载cocostudio进度条
- React Native基于最新版本实现JsBundle预加载,解决白屏等待,界面秒开优化
- 基于cocos2d-x的2.1.3 android真机调试图片加载问题的深究
- 使用红孩儿工具箱完成基于Cocos2d-x的简单游戏动画界面
- cocos2d-x系列笔记(6)---加载一张地图
- cocos2d-x学习笔记-纹理优化
- opencv [c++版] 学习笔记(2) 在MFC基于对话框界面上播放视频
- cocos2d-x游戏开发(十五)游戏加载动画loading界面
- cocos2d-x 菜鸟学习笔记八(界面控件之CCControl控件)
- (界面笔记之三十七)列表控件加载图标的几种方法
- cocos2d-x Loading界面实现资源加载
- cocos2d-x Loading界面实现资源加载
- [置顶] 使用红孩儿工具箱完成基于Cocos2d-x的简单游戏动画界面
- C# 优化基于插件的开发框架实现Ribbon界面与功能的分离附DEMO
- 基于cocos2d-x的游戏客户端优化