pyehouse

Would you like to create a cool health meter complete with a grilled effect and a background gradient? Something that looks a little like this:

I’m going to show you how to set this up in your own game. I’m assuming you are using cocos2d as your graphics framework. First, design your grill. This is going to be an image with the same background color as where you intend to put your health meter, but with transparent chunks removed to create the grill effect. Mine looks like this:

Note that it is 200 pixels wide by 40 pixels tall. More importantly because it uses transparency, I have to use an image format that explicitly supports transparency. In my case I used the PNG format, though GIF would also have worked. JPG, since it does not support transparency, would not work in this case.

Next, add the following member to the layer or scene to which you are adding your health meter:

    CCLayerColor* healthHiderLayer;

You’re going to need that later. Next, in your setup code for the same class (typically in your init() method), add the following:

        float healthWidth = 200;
        float healthHeight = 39;
        CCLayerGradient* baseHealthLayer = [CCLayerGradient layerWithColor:ccc4(255, 0, 0, 255)
               fadingTo:ccc4(0, 255, 0, 255) alongVector:ccp(1.0f,0.0f)];
        baseHealthLayer.contentSize = CGSizeMake(healthWidth, healthHeight);
        [self addChild baseHealthLayer];
        healthHiderLayer = [CCLayerColor layerWithColor:ccc4(0, 0, 0, 255) width:healthWidth
               height:healthHeight];
        healthHiderLayer.position = CGPointZero;//ccp(shieldWidth,shieldHeight);
        healthHiderLayer.anchorPoint = ccp(1.0f,0.0f);
        [baseHealthLayer addChild:healthHiderLayer z:3];
        CCSprite* healthGrill = [CCSprite spriteWithFileName:@"healthGrill.png"];
        healthGrill.position = CGPointZero;
        healthGrill.anchorPoint = CGPointZero;
        [baseHealthLayer addChild:healthGrill z:4];

Let’s break that down. I create two local variables, healthWidth and healthHeight, which are set to the width and one less than the height of the health grill image. I then create a gradient layer with those dimensions. I then add baseHealthLayer to whatever CCNode that I’m placing the health meter into. The rest of the health meter components are children of baseHealthLayer.

I then create a solid black layer on the fly which will be used to conceal the gradient layer we just created. It’s a little bigger than the gradient layer in order to cover it without artifacts. Note that we anchor the healthHiderLayer on it’s right end. That will be important later.

Then, we grab our grill and put it into place. Note also that we set up our z-order here with the grill on top, the concealing layer below it and the gradient on bottom.

The next bit of code should be a method defined in the object we put the health meter into:

-(void) setHealthPercent:(float)pct
{
    healthHiderLayer.scaleX = 1.0f - pct;
}

This gives you the ability to set your health to a specific percentage. This in turn alters the scaleX property of the healthHiderLayer. Because we anchor it on its right end, that means it adjusts its length as extended from the right end of the health bar in general. As the health percent decreases, the scaling effect increases, and the hider hides more and more of the gradient. The grill is just there as additional eye candy but can be made to look however you want the individual health bars to look.