in-game progress bar

Cocos2dx provides the ProgressTimer progress bar class, we can implement a. waiting for the game to enter b. the health bar in the game.

<ProgressTimer property:>

(1). Type: BAR(Bar) , RADIAL(Round)

(2). midpoint: The starting position of the progress bar change. 

 (3). barChangeRate: The change direction of the progress bar (X, Y axis; which axis changes to, the corresponding value is not 0)

       (1, 0) ---> Indicates a change in the direction of the X axis;

       (0, 1) ---> Indicates a change in the direction of the Y axis;

       Which direction the progress bar changes from is determined by midpoint and barChangeRate.

       midpoint: determines the starting position of the progress bar change; barChangeRate: determines the direction of the progress bar change.

 (4). percentage: The percentage displayed by the progress bar. (The change of the progress bar is to set this value)

 <Progress bar instance>

	auto sprite = Sprite::create("pro.png");
	//Create progress bar using sprite
	ProgressTimer* gress = ProgressTimer::create(sprite);
	//Set the type of progress bar
	gress->setType(ProgressTimer::Type::BAR);
	//Set the starting position of the progress bar
	gress->setMidpoint(Vec2(0,1));
	//Set the change direction of the progress bar
	gress->setBarChangeRate(Vec2(0,1));
	//Set the display scale of the progress bar
	grass-> setPercentage (0);
	gress->setAnchorPoint(Vec2(0, 0));
	gress->setPosition(Vec2(200,200));
	gress->setTag(1);
	this->addChild(gress);
	//Update the update() function
	this->scheduleUpdate();

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

We'd better make the progress bar and its own background image into a class (inherited from the sprite), which is convenient to use.

<Common changes to progress bars:>

midpoint(0,0), barChangeRate(1,0)------------> change from left to right

midpoint(1,0), barChangeRate(1,0)------------> change from right to left

midpoint(0,1), barChangeRate(0,1)------------> change from top to bottom

midpoint(1,1), barChangeRate(0,1)------------> change from top to bottom

Note: No matter how the progress bar changes, it is within the bounds of this rectangle.