游戏中的进度条

Cocos2dx提供了ProgressTimer进度条类,我们可以实现a. 游戏进入的等待  b. 游戏中的血条。

<ProgressTimer属性:>

(1).  类型:  BAR(条状) , RADIAL(圆形)

(2).  midpoint: 进度条变化的起始位置. 

 (3). barChangeRate: 进度条的变化方向(X,Y轴; 向哪个轴变化,对应的值不为0)

       (1，0) --->表示向X轴方向变化;

       (0，1) --->表示向Y轴方向变化;

       进度条从哪个方向变化,由midpoint和barChangeRate共同决定。

       midpoint：决定进度条变化的起始位置;  barChangeRate: 决定进度条变化的方向。

 (4). percentage: 进度条显示的比例。 (进度条的变化,就是设置这个值)

扫描二维码关注公众号，回复： 100577 查看本文章

 <进度条实例>

	auto sprite = Sprite::create("pro.png");
	//使用精灵创建进度条
	ProgressTimer* gress = ProgressTimer::create(sprite);
	//设置进度条的类型
	gress->setType(ProgressTimer::Type::BAR);
	//设置进度条的起始位置
	gress->setMidpoint(Vec2(0,1));
	//设置进度条的变化方向
	gress->setBarChangeRate(Vec2(0,1));
	//设置进度条的显示比例
	gress->setPercentage(0);
	gress->setAnchorPoint(Vec2(0, 0));
	gress->setPosition(Vec2(200,200));
	gress->setTag(1);
	this->addChild(gress);
	//更新update()函数
	this->scheduleUpdate();

void Test::update(float t)
{
	static int x = 0;
	x += 10;
	auto gress = (ProgressTimer*)this->getChildByTag(1);
	gress->setPercentage(x);
}

我们最好将进度条和他自己的背景图片做成一个类(继承于精灵),使用的时候方便。

<进度条常见的变化:>

midpoint(0,0) ，barChangeRate(1,0)------------> 从左往右变化

midpoint(1,0) ，barChangeRate(1,0)------------> 从右往左变化

midpoint(0,1) ，barChangeRate(0,1)------------> 从上往下变化

midpoint(1,1) ，barChangeRate(0,1)------------> 从上往下变化

注意: 无论进度条怎么变化,都在这个矩形的范围内部。