650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="artType01.jpg" src="http://blog.51cto.com/image/skin/artType01.jpg">
cocos2dx基础篇(23)――进度条CCProgresstimer
2014-08-30 02:54:31
标签：cocos2dx CCProgressTimer
原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://www.jb51.cc/article/p-putpckbs-wx.html
【唠叨】
哎，周围的同学都在搞cocos2dx 3.X了，而我还在用2.2.3。没办法，网上3.X的教程毕竟很少，还是等我的同学学得差不多了，我再换成3.X跟着同学搞，哪里不会问哪里。
650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="i_f07.gif" src="http://img.baidu.com/hi/face/i_f07.gif">
本节主要来讲讲进度条CCProgresstimer，相信大家也不会陌生的吧。如安装软件时显示的进度、游戏中人物的HP、MP显示的百分比横条。
650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="1.jpg" alt="wKiom1QAaMigHvIAAAA8Bk7ou30380.jpg" src="http://s3.51cto.com/wyfs02/M00/47/D6/wKiom1QAaMigHvIAAAA8Bk7ou30380.jpg">
【致谢】
http://gl.paea.cn/contents/2260d48c5e2bc83d.html
【Demo下载】
https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E8%BF%9B%E5%BA%A6%E6%9D%A1CCProgressTimer
【3.x】
（1）去掉“CC”
（2）CCProgresstimerType改为强枚举Progresstimer::Type::
| 1 2 3 4 | // RADIAL //扇形进度计时器 bar //条形进度计时器 // |
（3）其他变化不大。
【CCProgresstimer】
1、进度动作CCProgressto、CCProgressFromTo
在讲解进度条CCProgresstimer之前，先讲讲和进度条有半毛线关系的两个动作类：
（1）CCProgressto（2）CCProgressFromTo
为什么在之前的基本动作CCAction那章不介绍，而放在这里进行介绍呢？这是因为，这两个动作只是针对CCProgresstimer而言的，对其他的CCNode子类（如：CCSprite）没啥用处。
从这两个动作的字面上，也可以看出他们的用处了吧？就是进度条的进度从 a% 变化到 b% 。
使用方法如下：
| 1 2 3 4 5 6 7 | // //几秒内从0%变化到指定进度 CCProgressto::create( '时间' , '变化到百分之几' ); //几秒内从a%进度变化到b%进度 CCProgressFromTo::create( '时间' , '从百分之几' , '变化到百分之几' ); // |
2、CCProgresstimer
CCProgresstimer就是拿一张CCSprite精灵图片来作为进度条，然后根据一个百分比属性，实现显示/隐藏图片的一部分区域，达到图形化显示进度的作用。
进度条有两种样式：扇形进度条、条形进度条。默认锚点（0.5,0.5）。
常用 *** 作如下：
（1）创建方法
（2）设置精灵图片、设置进度值、设置样式
（3）设置开始的中心位置，设置用于做进度条的比例（这两个比较抽象，需要单独讲解）
其中，有两个函数比较抽象：setMIDpoint、setbarChangeRate。由于语言组织能力太弱，所以后面我会用图片来说明一下。
650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="j_0008.gif" src="http://img.baIDu.com/hi/jx2/j_0008.gif">
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 @H_27_404@ 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | // class CCProgresstimer: public CCNodeRGBA { /** * 创建方法create */ //精灵图片作为进度条 CCProgresstimer::create(CCSprite*sp); /** * 属性设置 * setSprite,setPercentage,setType */ //设置进度条所使用的精灵图片 voID setSprite(CCSprite*pSprite); CCSprite*getSprite(); //设置进度百分值[0,100] voID setPercentage( float fPercentage); float getPercentage(); //设置进度条样式 // kCCProgresstimerTypeRadial 扇形进度计时器 // kCCProgresstimerTypebar 条形进度计时器 voID setType(CCProgresstimerTypetype); CCProgresstimerTypegetType(); //反进度显示 //条形：从100到0。 //扇形：false顺时针，true逆时针 voID setReverseProgress( bool reverse); /** * 进度条设置 * setMIDpoint,setbarChangeRate */ @H_27_404@ //设置进度条起始的中心位置，范围[0,1]（默认图片中点ccp(0.5,0.5)） voID setMIDpoint(CCPoint); CCPointgetMIDpoint(); //用于做进度条所占的图片比例 voID setbarChangeRate(CCPoint); CCPointgetbarChangeRate(); /** * 父类继承 * setAnchorPoint,setcolor,setopacity */ //设置锚点 voID setAnchorPoint(CCPointanchorPoint); //设置颜色 virtual voID setcolor( const cccolor3B&color); virtual const cccolor3B&getcolor() const ; //设置透明度 virtual voID setopacity(glubyteopacity); virtual glubytegetopacity() const ; }; // |
3、setMIDpoint
setMIDpoint是用来设置进度条的起始中心位置的。
（1）对于扇形进度条：相当于“圆心”，从0到100，慢慢展开扇形。
（2）对于条形进度条：相当于从某点向两边扩散。
还是看图吧，语言表达有限：
650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="i_f34.gif" src="http://img.baIDu.com/hi/face/i_f34.gif">
650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="QQ图片20140829222622.jpg" alt="wKiom1QAj2XwyZM8AADTdPtSR14736.jpg" src="http://s3.51cto.com/wyfs02/M01/47/D7/wKiom1QAj2XwyZM8AADTdPtSR14736.jpg">
650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="QQ图片20140829223436.jpg" alt="wKiol1QAkeCjtSrDAADixBgLJx0617.jpg" src="http://s3.51cto.com/wyfs02/M01/47/D9/wKiol1QAkeCjtSrDAADixBgLJx0617.jpg">
3、setbarChangeRate
setbarChangeRate是用于设置条形进度条所占的图片比例，对于扇形是无效的。
也就是说拿出图片多少的比例作为进度条。还是看图吧，语言表达有限。
650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="i_f34.gif" src="http://img.baIDu.com/hi/face/i_f34.gif">
下列三组图解中，黄颜色区域表示一开始就已经显示的图片区域。而ccp(x,y)：表示宽度还有 x 比例的图片还未显示，高度还有 y 比例的图片还未显示，用作显示进度条。
有下图可知，“进度百分值”是相对剩余ccp(x,y)用作显示进度条的那一部分，已经显示的百分率，而不是整张图片的百分率。
常用方式如下：
| 1 2 3 4 5 6 | // setbarChangeRate(ccp(1,0)): //只有X轴变化。（起始X轴不显示） setbarChangeRate(ccp(0,1)): //只有Y轴变化。（起始Y轴不显示） setbarChangeRate(ccp(1,1)): //X，Y轴都变化。（起始X，y轴都不显示） setbarChangeRate(ccp(0.5,0.5)): //X，Y轴都变化。（起始X，y轴都已显示一半） // |
三组图片对比图：
650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="1.jpg" alt="wKiom1QAu42QcOMWAADgH_Vk2wQ083.jpg" src="http://s3.51cto.com/wyfs02/M01/47/D8/wKiom1QAu42QcOMWAADgH_Vk2wQ083.jpg">
650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="2.jpg" alt="wKiom1QAu42x3TgUAADrCmZIRIo553.jpg" src="http://s3.51cto.com/wyfs02/M01/47/D8/wKiom1QAu42x3TgUAADrCmZIRIo553.jpg">
650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="3.jpg" alt="wKiol1QAvKXS0UhOAADd5L9f4UY770.jpg" src="http://s3.51cto.com/wyfs02/M00/47/DA/wKiol1QAvKXS0UhOAADd5L9f4UY770.jpg">
4、常用的进度条方式
由上面的讲解可以得出，进度条的显示方式主要受三个设置的影响：
（1）setType ：扇形、条形进度条。
（2）setMIDpoint ：中心位置。
（3）setbarChangeRate：用作条形进度条显示的图片所占比例。
其中（1）的设置决定了进度条的类型。而（2）（3）的配合使用可以有多种不同的显示方式。
常用的（2）（3）配合使用方式如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // //当条形进度条样式为：setbarChangeRate(ccp(1,0)) ccp(1,0): "从右到左显示" ccp(0.5,0): "从中间到两边显示" ccp(0,0): "从左到右显示" //当条形进度条样式为：setbarChangeRate(ccp(0,1)) ccp(0,1): "从上到下显示。" ccp(0,0.5):"从中间到两边显示。 ccp(0,0): "从下到上显示。" //当条形进度条样式为：setbarChangeRate(ccp(1,1)) ccp(0,1): "X从左到右显示，Y从上到下显示" ccp(0,0.5): "X从左到右显示，Y从中间到两边显示" ccp(1,0): "X从右到左显示，Y从下到上显示" ccp(0.5,0): "X从中间到两边显示，Y从下到上显示" ccp(0,0): "X从左到右显示，Y从下到上显示" ccp(0.5,0.5): "X从中间到两边显示，Y从中间到两边显示" ccp(1,1): "X从右到左显示，Y从上到下显示" // |
以上是内存溢出为你收集整理的cocos prigressBar全部内容，希望文章能够帮你解决cocos prigressBar所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）