Adding a progress bar programmatically to cocos2d game

1
votes

I am making a game with cocos2d and would like to implement a progress bar to represent my player's health. I have referenced how to create a progressbar programmatically but a CCLayer does not have a .view attribute. Can someone please point me in the right direction or help me out?

Thank you, Joey

4
iphoneobjective-ccocos2d-iphone
UIProgressView is really ugly for a game. Ever considered making your own bar? It is rather easy in cocos – Voldemort
I am not against the idea, I just want something like the progress bar and didn't want to reinvent the wheel if it was already created fro me. How would you recommend going about creating my own? – Joey
There are lots of ways. One simple way to make a solid color one is, have a CCSprite with a graphic that is 2 pixels wide and something like 15 high (solid green color perhaps). Set the anchor point to ccp(0.0,0.5), and then go ahead and change the .scaleX value. You will see that the sprite will begin acting like an horizontal bar, which will grow the higher the scaleX value. – Voldemort
ah not a bad idea. however, how would you achieve the 70% of 100% health look if you know what I mean. (a semi filled health bar) – Joey
Uh, if the health bar is 100 pixels long, 50% would be 50 pixels, so all you have to do is change the .scaleX property to 50. – Voldemort

4 Answers

2
votes

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.

1
votes

There is a class "CCProgressTimer" in cocos2d to do that. Hope it will help. 

CCProgressTimer *lifeBar=[CCProgressTimer progressWithFile:@"lifeBar.png"];
lifeBar.type=kCCProgressTimerTypeHorizontalBarLR;
lifeBar.position=ccp(384,900);
lifeBar.percentage=100;
[self lifeBar z:20];
[lifeBar runAction:[CCProgressFromTo actionWithDuration:5.0 from:100.0 to:0.0]];
0
votes

In cocos2d you can use [[CCDirector sharedDirector]openGLView] instead of the .view

you can add your progressView to it. Also the coordinate system for this openGLView is such that its origin is at top left.

0
votes

I ended up making my own progress bar sprite like Omega recommended. I created one sprite for a rectangular "health bar" outline, and another sprite that represents a tiny health segment in which I add and remove them as needed to represent the correct health.

CGPoint position = ccp(150, 450);
CCTexture2D *texture = [[CCTexture2D alloc] initWithImage:[UIImage imageNamed:@"healthSegment.png"]];

// Begin at 4 because health segments have tags 4-13
for(int i = 4; i < health + 4; i++)
{
    CCSprite *healthBar = [CCSprite spriteWithTexture:texture];
    [healthBar setPosition:position];
    [self addChild:healthBar z:5 tag:i];

    position.x += 10;
}