Question

I am trying to make a customized progress bar. What I want to do is to have “barMask.png” have it’s X scale depending on a percentage of the number. I’ve tried to do it like this:

barBack = CCSprite::create( "barBack.png" );
this -> addChild( barBack );

barMask = CCSprite::create( "barMask.png" );
barMask -> setPosition( barBack -> getPosition( ) );
this -> addChild( barMask );

Then on the update method

// Scale the width of barMask depending on the percentage of the progress.
barMask -> setScaleX( CURRENT_AMOUNT / TOTAL_AMOUNT );

However, the sprite is scaled like this:

Frame 1: [ |||||||||| ]
Frame 2: [  ||||||||  ]
Frame 3: [   ||||||   ]

It shrinks down into the middle. How can I do so that it shrinks down to the left/right? Like this:

Frame 1: [ |||||||||| ]
Frame 2: [ |||||||||  ]
Frame 3: [ ||||||||   ]
Frame 4: [ |||||||    ]

I know about CCProgressTimer but I want to use purely sprites for the progress bar.

Answer 1

Change spriet’s anchorPoint property to (0.f, 0.5f). All transformations are made relatieve to the node’s anchor point. By default anchor point of the sprite is (0.5f, 0.5f). Thats why your scaling is relatieve to the center of your sprite by default.