Cocos2d-x 3.2 之进度条 progressTimer

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

@H_502_5@

好长时间没有更博了。。@H_502_5@

有点懒啊。。@H_502_5@

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

@H_502_5@

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

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

这个以后再更新，@H_502_5@

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

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

@H_502_5@

1.What？@H_502_5@

API解释：@H_502_5@

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

就是这样的情况：@H_502_5@

@H_502_5@

2. How？@H_502_5@

这个的实现就是通过progressTimer@H_502_5@

与之前版本不同，@H_502_5@

之前版本类型很多：@H_502_5@

@H_502_5@

kCCProgressTimerTypeRadialCCW,扇形逆时针形式
kCCProgressTimerTypeRadialCW,扇形顺时针形式
kCCProgressTimerTypeHorizontalBarLR,从左往右增张的形式
kCCProgressTimerTypeHorizontalBarRL,从右往左增张的形式
kCCProgressTimerTypeVerticalBarBT,从下往上增张的形式
kCCProgressTimerTypeVerticalBarTB,从上往下增张的形式

而现在Type只有两种：@H_502_5@

@H_502_5@

①条型的设置@H_502_5@

就是第三个图：@H_502_5@

@H_502_5@

<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定义函数@H_502_5@

@H_502_5@

<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来设置速度。@H_502_5@

@H_502_5@

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

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

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

setMidpoint 是定义从哪开始

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

setBarChangeRate 是定义方向@H_502_5@

1,0是自下而上@H_502_5@

0,1是自左向右@H_502_5@

@H_502_5@

②时针型的设置@H_502_5@

@H_502_5@

<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函数还是那样，@H_502_5@

默认是顺时针，@H_502_5@

setReverseProgress@H_502_5@

——false 顺时针@H_502_5@

——true 逆时针@H_502_5@

@H_502_5@

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

@H_502_5@

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

其实，So easy@H_502_5@

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

@H_502_5@

<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>

就是这样~@H_502_5@

进度条你学会了吗？@H_502_5@

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

@H_502_5@

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

Cocos2d-x 3.2 之 进度条 progressTimer

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

Cocos2d-x 3.2 之进度条 progressTimer