This post is going to present a simple solution for building a dynamic health indicator for your game. This is based on the health indicator we included in our Fillip’s Feast game, available in the Apple App Store.
The following are the features we wanted for our health meter.
- Follow the overall look of the game
- Provide level indicator based on size
- Provide visual color indication of health
Step one was to create a sprite in which to display the health level. For our game the health indicator shows as a bar within a wooden sign.
Next we need to create a sprite that can be scaled to represent the players health level and who’s color can be adjusted to give an additional visual indication of level. This is done by creating sprite node with a color and size. The initial color does not matter since we will be setting the color based on the players health level. The width is set to match the length of the level indicator in our banner. For our banner this is .875 of the full banner width.
// For the reserve indicator create a white sprite node the same size as the health banner
CGSize reserveSize = healthBanner.size;
reserveSize.width = reserveSize.width * 0.875;
self.reserveIndicator = [SKSpriteNode spriteNodeWithColor:[UIColor whiteColor] size:reserveSize];
// Set the anchor point for the indicator to be the left side for horizontal and center for vertical
self.reserveIndicator.anchorPoint = CGPointMake(0.0,0.5);
// Posistion the indicator so the left side lines up with the indicator area in the banner
self.reserveIndicator.position = CGPointMake(-reserveSize.width/2,0);
The final setup step requires the creation of a SKCropNode and mask so that health indicator fits within the appropriate portion of the banner window. For this we use another sprite image.
// We will use a crop node to mask out health indicator so it only shows up in the healt bar area of the banner
SKCropNode *reserveCropNode = [[SKCropNode alloc]init];
reserveCropNode.maskNode = [SKSpriteNode spriteNodeWithTexture:[health textureNamed:@”HealthBar_Mask”]];
// Add the health level indicator as a child of the crop node
[reserveCropNode addChild:self.reserveIndicator];
The final piece is to add a method that will be called to update the health meter whenever the players health level changes. When the player has full heath the meter will be green. When he is almost out of health it will be red and the length of the indicator will scale accordingly.
– (void)updateReserveDisplay:(NSInteger)reserve {
self.reserveIndicator.color = [SKColor colorWithRed:((100.0-reserve)/100.0) green:(reserve/100.0) blue:0.0 alpha:1.0];
[self.reserveIndicator setXScale:(reserve/100.0)];
}
Here is how the banner looks with about 70% health.
A copy of a sample app, health_level_indicator, that puts all of this together can be found on our github page.
You can find me on twitter @mellowcoder