Creating a Health Bar « cocos2d for iPhone

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

Creating a Health Bar

(7 posts) (5 voices)

Started 1 year ago by code206
Latest reply from bchen421

Tags:

No tags yet.

code206
Member
Hi I'm creating a health bar for my hero sprite. It works by loading in a sprite and then scaling that sprite proportional to the hero's health. The problem Im having is it scales from the center and not the side so it graphically looks a little weird. Changing the anchor point doesn't seem to help.
```
CCSprite *healthBar = [CCSprite spriteWithFile:@"healthBar.png"];
		[menuItem addChild:healthBar z:1000];
		healthBar.position = ccp( 60, 30);
		healthBar.anchorPoint = ccp(3,0);
		healthBar.scaleX = 3.0f;
```
Posted 1 year ago #
Mark Sawicki
Member
Hey there,

That anchor point may be causing your strange results. Under 'standard' use, anchor point values go from 0 to 1. Try 1,0 for the anchor point for starters and go from there. As it looks, you may be wanting the anchor point to be on the bottom right corner of the health bar?

Here's what I'm doing for a super simple health bar for my little guys:
(self is a CCSprite subclass of my enemy type & whitePixel is exactly that.. a 1x1 white pixel that I stretch and color to show current health)
```
healthBar = [CCSprite spriteWithSpriteFrameName:@"whitePixel.png"];
	[healthBar setScaleX: [self boundingBox].size.width ];
	[healthBar setScaleY:2.0f];
	[healthBar setAnchorPoint:ccp(0.0f,0.0f)];
	[healthBar setColor:ccGREEN];

	// health bar will not rotate or scale if the enemy (parent) does ..
	healthBar.honorParentTransform &= ~(CC_HONOR_PARENT_TRANSFORM_SCALE | CC_HONOR_PARENT_TRANSFORM_ROTATE);

	[healthBar setPosition:ccp(0.0f,  -([self boundingBox].size.height / 2.0f) )];
	[self addChild:healthBar];
```
HTH,

-Mark
Posted 1 year ago #
Eko Mirhard
Member

Mark is correct regarding the anchor point.
Alternatively, in case you haven't know, you might want to try CCProgressTimer as well to create something like that :)

Posted 1 year ago #
code206
Member

Thanks everyone that worked perfectly.

Posted 1 year ago #

bchen421
Member

@"Mark Sawicki" - Thank you for sharing that code. The Bitwise operator is awesome to not flip and scale with the parent.

I had some issues getting the health bar to work with my implementation. Basically, it wouldn't show up if my healthbar init was part of my parent's init method. I moved the healthbar creation to when the sprite first takes damage. Just giving a quick copy and paste for those wanting to use this with CCSpriteFrameCache:

healthBar = [[CCSprite alloc] initWithSpriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache]spriteFrameByName:@"whitePixel.png"]];
            healthBar = [CCSprite spriteWithSpriteFrameName:@"whitePixel.png"];
            [healthBar setScaleX:(self.contentSize.width)];
            [healthBar setScaleY:6.0f];
            [healthBar setAnchorPoint:ccp(0,0)];
            [healthBar setColor:ccGREEN];

            // health bar will not rotate or scale if the enemy (parent) does ..
            healthBar.honorParentTransform &= ~(CC_HONOR_PARENT_TRANSFORM_SCALE | CC_HONOR_PARENT_TRANSFORM_ROTATE);

            [self addChild:healthBar];
            [healthBar setPosition:ccp(0, (self.contentSize.height + 10.0))];

The idea would then be to have if wanted, a single red pixel scaled to the content size width with a lower Z value. Then to scale the green pixel down as health percentage goes down.

Posted 9 months ago #

MaXaS
Member

if you're interested i've got my healthbar that i am using in my game and it is quite simple)

healthBar = [CCSprite spriteWithFile:@"healthbar.png"];
        healthBar.position = ccp(50, 315);
        [self addChild: healthBar z:3];

and a method to change healthbar using int health

- (void)healthAmountChanged:(int)health {
    [healthAmount setString:[NSString stringWithFormat:@"%d", health]];
    [(CCSprite *)healthBar setScaleX: health/healthBar.contentSize.width];

    [healthBar setPosition: ccp(health/2,healthBar.position.y)];

}

Posted 9 months ago #

bchen421
Member

Looks good. Have you considered changing sprites anchor point to (0,0)?

Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.