Cocos2d-x 3.2 之 进度条 progressTimer

***************************************转载请注明出处：http://blog.csdn.net/lttree********************************************

好长时间没有更博了。。

有点懒啊。。

亲身经历提示广大猿们：换季了，防感冒！

言归正传，最近在做 三消的手游，

关卡设计是没指望了，只能做个限时的，所以，就研究了研究schedule,

这个以后再更新，

度娘搜索的时候，看到了进度条的progressTimer，

这个很好玩的样子，于是就做了下，感觉不错。

1.What？

API解释：

ProgressTimer是Node的子类。 该类根据百分比来渲染显示内部的Sprite对象。 变化方向包括径向，水平或者垂直方向。

就是这样的情况：

2. How？

这个的实现就是通过progressTimer

与之前版本不同，

之前版本类型很多：

1. kCCProgressTimerTypeRadialCCW,         扇形逆时针形式
2. kCCProgressTimerTypeRadialCW,          扇形顺时针形式
3. kCCProgressTimerTypeHorizontalBarLR,   从左往右增张的形式
4. kCCProgressTimerTypeHorizontalBarRL,   从右往左增张的形式
5. kCCProgressTimerTypeVerticalBarBT,     从下往上增张的形式
6. kCCProgressTimerTypeVerticalBarTB,     从上往下增张的形式

而现在Type只有两种：

①条型的设置

就是第三个图：

<span style="font-family:Comic Sans MS;font-size:14px;">// 添加图片
auto sprite = Sprite::create("h7.png");
// 新建progressTimer对象，将图片载入进去
ProgressTimer *ct= ProgressTimer::create(sprite);
ct->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
// 设置Tag，为后面更新准备
ct->setTag(10);
ct->setScale(0.2);

this -> addChild(ct);
// 设置初始的百分比，0~100 可以是0或者100
ct->setPercentage(0);
// 选择类型，是条型还是时针型
ct->setType(kCCProgressTimerTypeBar);
//ct->setReverseProgress(true);

// 下面两个条形的进阶
ct->setMidpoint(Point(0,0));
ct->setBarChangeRate(Point(0,1));
scheduleUpdate();</span>

然后，在.h 声明函数 void update( float t )

在.cpp定义函数

<span style="font-family:Comic Sans MS;font-size:14px;">void HelloWorld::update( float t )
{
	// 通过上面Tag设置，获取对象
	CCProgressTimer *ct=(CCProgressTimer*)getChildByTag(10);
	// 获取当前进度
	int num = ct->getPercentage();
	// 设置进度速度（此处为每帧+1）
	ct->setPercentage( ++num );
	// 设置了循环播放
	if( num >= 100 )
		ct -> setPercentage(0);
}</span>

此处，我是通过帧数来控制的速度，

当然也可以通过  自己调用的update来设置速度。

条形的可以从上到下，从下向上，或者从中间向两边

这个的控制，就是通过上面代码中，进阶的部分：

<span style="font-family:Comic Sans MS;font-size:14px;">ct->setMidpoint(Point(0,0));
ct->setBarChangeRate(Point(0,1));</span>

setMidpoint 是定义从哪开始

这个和锚点的设置一样，0,0左下角，1,1是右上角

setBarChangeRate 是 定义 方向

1,0是自下而上

0,1是自左向右

②时针型的设置

<span style="font-family:Comic Sans MS;font-size:14px;">	// 添加图片
	auto sprite = Sprite::create("h7.png");
	// 新建progressTimer对象，将图片载入进去
	ProgressTimer *ct= ProgressTimer::create(sprite);
	ct->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
	// 设置Tag，为后面更新准备
	ct->setTag(10);
	ct->setScale(0.2);

	this -> addChild(ct);
	// 设置初始的百分比，0~100 可以是0或者100
	ct->setPercentage(0);
	// 选择类型，是条型还是时针型
	ct->setType(kCCProgressTimerTypeRadial);
	ct->setReverseProgress(false);

	// 下面两个条形的进阶
//	ct->setMidpoint(Point(0,0));
//	ct->setBarChangeRate(Point(0,1));
	scheduleUpdate();</span>

update函数还是那样，

默认是顺时针，

setReverseProgress

——false
顺时针

——true 逆时针

这样第二个的图片就实现了。

③ 第一个图片那种如何实现呢？

其实，So easy

只需要弄一张暗一点的图片，在底下衬着：

<span style="font-family:Comic Sans MS;font-size:14px;">auto sprite2 = Sprite::create("h7_02.png");
sprite2->setScale(0.2);
sprite2->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this -> addChild(sprite2);</span>

就是这样~

进度条你学会了吗？

同为新手，如有错误，敬请指出，共同进步 O(∩_∩)O~

***************************************转载请注明出处：http://blog.csdn.net/lttree********************************************