# How to make and correctly use progress bar in cocos2d-iphone?

I have a game that uses a progress bar to inform player of level of certain stats of the player. For example hunger, when it starts at zero and slowly adds up to maximum bar. When he eats the hunger reduces.

I tried implementing as progressBar, but it works wrong, as the bar expands both ways, and I need it to grow one side only. Also I had hard time setting the bar, since it uses actions.

Is there an easy way to do it?

• It might be useful if you provide some of the code you're using. When I implement the progress bar, I usually make sure that the anchor point for the bar that you're scaling is at ccp(0, 0.5f) so you're anchoring on the left side. This way when you scale the bar is scaled to the right and not both ways. – Jamornh Aug 10 '12 at 20:13
• @Jamornh Well code that I use is class Pet and it has inner variable Hunger that I want to be shown on screen as bar. That's it. – Dvole Aug 11 '12 at 6:16

Found the following answer over here.

Grab the following image: http://i.stack.imgur.com/O5DRf.png. It is 2x30. I want to make a bar that is 15 pixels high. Normally, the dimensions would be 1x15, but since I assume you're working with retina display, we have to double such dimensions to 2x30.

Create a CCSprite with it, and set the anchor point to ccp(0.0,0.5):

CCSprite *bar = [CCSprite spriteWithFile:@"MyBar.png"];   // Create it
bar.position = ccp(240,160);                                // Position it
bar.anchorPoint = ccp(0.0,0.5);                           // Anchor point


Now the question is, how long (max) is the health bar? Let us say it is 200 pixels long. Therefore, 100% = 200 pixels long. Let us set it to 200 pixels long then:

bar.scaleX = 200;    // The bar is 200 pixels long now


So, how about 50% of health? Then, clearly, the property .scaleX should be 100.

bar.scaleX = 100;    // The bar is 100 pixels long now (50% health)


That is pretty much all you might need to create a simple bar quickly.