Tutorial: Make Your Own Goal/Achievement Meter

Goal: make your own achievement bar/goal meter , something like this:

(taken from DinerDash 2, you have to fill the meter up to finish a level)
C++ , V3.2

What we’re gonna do is a goal meter, where you have to do something, a ‘trigger’, so your goal meter will increase, until you reach 100% - your goal.

In HelloWorld.h:

ProgressTimer* customBar;
ProgressFromTo* to3;
void increaseBar(Ref* pSender);
int _plusPoints;
int _startPoint;

in HelloWorld.cpp // your main game scene
//make a button, use ur own button lol
cocos2d::MenuItem* pCloseItem = cocos2d::MenuItemImage::create(
“99cents.png”,
“99cents.png”,
this,
menu_selector(HelloWorld::increaseBar ));

cocos2d::Menu* pMenu = cocos2d::Menu::create(pCloseItem, NULL);

this->addChild(pMenu, 100);

_plusPoints = 0; // <-- increase the meter by 5 each time button is pressed
_startPoint = 0; //starting point of goal meter, 0;

//controllable progress bar
customBar = ProgressTimer::create(Sprite::create("loadingbar.png"));
customBar->setScaleX(.9711);
customBar->setScaleY(.8333);
customBar->setType(ProgressTimer::Type::BAR);
//    Setup for a bar starting from the left since the midpoint is 0 for the x
customBar->setMidpoint(Vec2(0,0));
//    Setup for a horizontal bar since the bar change rate is 0 for y meaning no vertical change
customBar->setBarChangeRate(Vec2(1, 0));
customBar->setPosition(Vec2(visibleSize.width/ 2, visibleSize.height  - customBar->boundingBox().size.height ));addChild(customBar,100);

//customBar loading bar background…place zIndex behind your ‘customBar’
auto barbg3 = Sprite::create(“barbg.png”);
barbg3->setPosition(Vec2(visibleSize.width/ 2, visibleSize.height - customBar->boundingBox().size.height ));
this-> addChild(barbg3);

//function that will be triggered each button press
void HelloWorld::increaseBar(Ref* pSender){

_plusPoints = _plusPoints + 5;
  CCLOG("plusPoints  is %d", _plusPoints);
 to3 = ProgressFromTo::create(1, _startPoint, _plusPoints);
 customBar->runAction( to3);
_startPoint = _plusPoints;

}

here, the trigger that calls ‘increaseBar’ function is pressing the button. But you can always change it to something like when the player delivers food to customer, kills enemy,etc. code is not perfect but well , it’s a start :smile:

1 Like