cocos2dx基础篇(23)——进度条CCProgressTimer

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了cocos2dx基础篇(23)——进度条CCProgressTimer，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文出自 “ 夏天的风 ” 博客，请务必保留此出处 http://www.jb51.cc/article/p-putpckbs-wx.html

【唠叨】

哎，周围的同学都在搞cocos2dx 3.X了，而我还在用2.2.3。没办法，网上3.X的教程毕竟很少，还是等我的同学学得差不多了，我再换成3.X跟着同学搞，哪里不会问哪里。

本节主要来讲讲进度条CCProgressTimer，相信大家也不会陌生的吧。如安装软件时显示的进度、游戏中人物的HP、MP显示的百分比横条。


【致谢】

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
//
@H_301_100@ RADIAL @H_502_104@//扇形进度计时器
@H_301_100@BAR @H_502_104@//条形进度计时器
@H_502_104@//

（3）其他变化不大。



【CCProgressTimer】


1、进度动作CCProgressTo、CCProgressFromTo

在讲解进度条CCProgressTimer之前，先讲讲和进度条有半毛线关系的两个动作类：

（1）CCProgressTo（2）CCProgressFromTo

为什么在之前的基本动作CCAction那章不介绍，而放在这里进行介绍呢？这是因为，这两个动作只是针对CCProgressTimer而言的，对其他的CCNode子类（如：CCSprite）没啥用处。

从这两个动作的字面上，也可以看出他们的用处了吧？就是进度条的进度从 a% 变化到 b% 。

使用方法如下：

4
5
6
7
@H_502_104@//几秒内从0%变化到指定进度
@H_301_100@CCProgressTo::create( '时间' , '变化到百分之几' );
//几秒内从a%进度变化到b%进度
@H_301_100@CCProgressFromTo::create( '从百分之几' );
@H_502_104@//


2、CCProgressTimer

CCProgressTimer就是拿一张CCSprite精灵图片来作为进度条，然后根据一个百分比属性，实现显示/隐藏图片的一部分区域，达到图形化显示进度的作用。

进度条有两种样式：扇形进度条、条形进度条。默认锚点（0.5,0.5）。

常用操作如下：

（1）创建方法

（2）设置精灵图片、设置进度值、设置样式

（3）设置开始的中心位置，设置用于做进度条的比例（这两个比较抽象，需要单独讲解）

其中，有两个函数比较抽象：setMidpoint、setBarChangeRate。由于语言组织能力太弱，所以后面我会用图片来说明一下。

7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@H_541_301@ 22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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
{
@H_502_104@/**
* 创建方法create
*/
//精灵图片作为进度条
@H_301_100@CCProgressTimer::create(CCSprite*sp);
@H_502_104@/**
* 属性设置
* setSprite,setPercentage,setType
*/
//设置进度条所使用的精灵图片
@H_301_100@ void setSprite(CCSprite*pSprite);
@H_301_100@CCSprite*getSprite();
//设置进度百分值[0,100]
@H_301_100@setPercentage( float fPercentage);
@H_301_100@ getPercentage();
//设置进度条样式
// kCCProgressTimerTypeRadial 扇形进度计时器
// kCCProgressTimerTypeBar 条形进度计时器
@H_301_100@setType(CCProgressTimerTypetype);
@H_301_100@CCProgressTimerTypegetType();
//反进度显示
//条形：从100到0。
//扇形：false顺时针，true逆时针
@H_301_100@setReverseProgress( bool reverse);
@H_502_104@/**
* 进度条设置
* setMidpoint,setBarChangeRate
*/
//设置进度条起始的中心位置，范围[0,1]（默认图片中点ccp(0.5,0.5)）
@H_301_100@setMidpoint(CCPoint);
@H_301_100@CCPointgetMidpoint();
//用于做进度条所占的图片比例
@H_301_100@setBarChangeRate(CCPoint);
@H_301_100@CCPointgetBarChangeRate();
@H_502_104@/**
* 父类继承
* setAnchorPoint,setColor,setOpacity
*/
//设置锚点
@H_301_100@setAnchorPoint(CCPointanchorPoint);
//设置颜色
virtual setColor( const ccColor3B&color);
@H_301_100@ccColor3B&getColor() ;
//设置透明度
@H_301_100@setOpacity(GLubyteopacity);
virtual GLubytegetOpacity() ;
};
3、setMidpoint

setMidpoint是用来设置进度条的起始中心位置的。

（1）对于扇形进度条：相当于“圆心”，从0到100，慢慢展开扇形。

（2）对于条形进度条：相当于从某点向两边扩散。

还是看图吧，语言表达有限：


3、setBarChangeRate

setBarChangeRate(ccp(a,b))


setBarChangeRate就是剩余的X轴方向还未显示的占 全部需要显示的 a/1，Y轴未显示的占b/1。

相当于初始化的时候X轴显示了 （1-a）/1， Y轴显示了（1-b）/1


setBarChangeRate是用于设置条形进度条所占的图片比例，对于扇形是无效的。

也就是说拿出图片多少的比例作为进度条。还是看图吧，语言表达有限。

下列三组图解中，黄颜色区域表示一开始就已经显示的图片区域。而ccp(x,y)：表示宽度还有 x 比例的图片还未显示，高度还有 y 比例的图片还未显示，用作显示进度条。

有下图可知，“进度百分值”是相对剩余ccp(x,y)用作显示进度条的那一部分，已经显示的百分率，而不是整张图片的百分率。

常用方式如下：

6
setBarChangeRate(ccp(1,0)): @H_502_104@//只有X轴变化。（起始X轴不显示）
@H_301_100@setBarChangeRate(ccp(0,1)): @H_502_104@//只有Y轴变化。（起始Y轴不显示）
//X，Y轴都变化。（起始X，y轴都不显示）
@H_301_100@setBarChangeRate(ccp(0.5,0.5)): @H_502_104@//X，Y轴都变化。（起始X，y轴都已显示一半）
@H_502_104@//

三组图片对比图：


4、常用的进度条方式

由上面的讲解可以得出，进度条的显示方式主要受三个设置的影响：

（1）setType ：扇形、条形进度条。

（2）setMidpoint ：中心位置。

（3）setBarChangeRate：用作条形进度条显示的图片所占比例。

其中（1）的设置决定了进度条的类型。而（2）（3）的配合使用可以有多种不同的显示方式。

常用的（2）（3）配合使用方式如下：

18
//当条形进度条样式为：setBarChangeRate(ccp(1,0))
@H_301_100@ccp(1,0): "从右到左显示"
@H_301_100@ccp(0.5,monospace!important; font-size:1em!important; min-height:inherit!important; color:blue!important">"从中间到两边显示"
@H_301_100@ccp(0,monospace!important; font-size:1em!important; min-height:inherit!important; color:blue!important">"从左到右显示"
//当条形进度条样式为：setBarChangeRate(ccp(0,1))
"从上到下显示。"
显示。
"从下到上显示。"
"X从左到右显示，Y从上到下显示"
"X从左到右显示，Y从中间到两边显示"
"X从右到左显示，Y从下到上显示"
"X从中间到两边显示，Y从下到上显示"
"X从左到右显示，Y从下到上显示"
"X从中间到两边显示，Y从中间到两边显示"
"X从右到左显示，Y从上到下显示"
@H_502_104@//



【代码实战】


1、资源图片


2、创建两类进度条：条形、扇形

并定义进度条显示方式。

25
//条形进度条pro1
@H_301_100@CCSprite*bg1=CCSprite::create( "Icon.png" );
@H_301_100@CCProgressTimer*pro1=CCProgressTimer::create(bg1);
@H_301_100@pro1->setPosition(ccp(130,100));
this ->addChild(pro1);
//条形，定义进度条方式：从右到左显示
@H_301_100@pro1->setType(kCCProgressTimerTypeBar);
@H_301_100@pro1->setBarChangeRate(ccp(1,0));
@H_301_100@pro1->setMidpoint(ccp(1,0));
//pro1->setReverseProgress(true);//反进度显示
//扇形进度条pro2
@H_301_100@CCSprite*bg2=CCSprite::create( );
@H_301_100@CCProgressTimer*pro2=CCProgressTimer::create(bg2);
@H_301_100@pro2->setPosition(ccp(350,100));
@H_301_100@->addChild(pro2);
//扇形，圆心ccp(0.3,0.7)
@H_301_100@pro2->setType(kCCProgressTimerTypeRadial);
@H_301_100@pro2->setMidpoint(ccp(0.3,0.7));
//pro2->setReverseProgress(true);//逆时针
3、创建进度动作CCProgressTo、CCProgressFromTo

并让pro1、pro2分别执行两个进度动作。

8
//进度动作
@H_301_100@CCProgressTo*ac1=CCProgressTo::create(2.0f,100);
@H_301_100@CCProgressFromTo*ac2=CCProgressFromTo::create(2.0f,30,100);
@H_301_100@pro1->runAction(CCRepeatForever::create(ac1)); @H_502_104@//2秒内，从0到100
@H_301_100@pro2->runAction(CCRepeatForever::create(ac2)); @H_502_104@//2秒内，从30到100
4、运行结果

若添加反进度显示setReverseProgress()

pro1->setReverseProgress( true ); @H_502_104@//反进度显示
@H_301_100@pro2->setReverseProgress( //逆时针
@H_502_104@//

结果如下：


5、分析与总结

更多进度条的显示方式，请自行参悟。

猜你在找的Cocos2d-x相关文章

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签