Health

Introduction

Currently our game is playable, but lacks a lot of polish and fun factor needed for a final game. As you may have noticed, if the player ship collides with a rock then the ship is destroyed and the game is over. We'll make the game a little more forgiving by providing a health bar so that the player can survive multiple hits.

Defining the HealthBar Component in Gum

Previously we added a score Text object in Gum. This Text object existed in screen space - it was positioned relative to the top-left corner of our screen. Health bars will be different - they will be positioned relative to the Player instance. To create a HealthBar Component in Gum:

1. Open Gum

2. Right-click on the Components folder and select Add Component

   
3. Enter the name HealthBar and click OK

Creating HealthBar Visuals

First we'll adjust main component values to be sized properly and to be positioned according to its center. Set the following values:

• XOrigin = Center

• YOrigin = Center

• Width = 48

• Height = 12

Next we'll add a background ColoredRectangle:

1. Expand the Standard folder in Gum

2. Drag+drop a ColoredRectangle on the HealthBar component

3. Set the ColoredRectangle Name to Background

4. Click the Alignment tab

5. Click the Center Dock button to have the colored rectangle fill the component

This ColoredRectangle will be the background of our HealthBar which will display if the player takes damage, so we will change its color to red.

Repeat the steps above, except this time:

• Set the name to Foreground

• Set the color to a light green color

Creating a Percent Variable

Our HealthBar is almost ready to be used except it doesn't have an easy way to display health percentage. First, we'll modify the Foreground object to use a percentage width:

1. Select Foreground

2. Change X Units to Pixels From Left

3. Change X Origin to Left

4. Change Width to 100

5. Change its Width Unit to Percentage of Container

Now the Foreground can have its width changed, and the green bar will show the appropriate percent.

We want to expose this variable so that it can be accessed on the HealthBar itself:

1. Right-click on the Foreground Width property

2. Select Expose Variable

3. Enter the name PercentFull

Adding HealthBars to the Player

Entities can contain instances of Gum objects. We will add a HealthBar to our Player, just like we added a Sprite earlier:

1. Select the Player object in Glue

2. Click the Quick Actions tab

3. Click Add Object to Player

4. Click the Gum object type

5. Select the HealthBarRuntime option. Note that this is the same name as the HealthBar Component in Gum with the word "Runtime" at the end.

6. Click OK

If we run the game now, we'll see the HealthBar on top of the Player.

First we'll adjust the Y value of the HealthBar so that it doesn't overlap the ship.

1. Select the HealthBar component in Gum

2. Change Y to -28. By default, negative Y moves an object up in Gum.

Next we'll adjust the HealthBar so it doesn't rotate with the ship. At the time of this writing, this cannot be done through Gum, so it must be done in code. To do this:

1. Open Player.cs in Visual Studio

2. Add the following lines to CustomInitialize:

var hudParent = gumAttachmentWrappers[0];
hudParent.ParentRotationChangesRotation = false;

Now the HealthBar appears above the player and does not rotate with the player.

Conclusion

Now we have our HealthBars in game and ready to be used. The next tutorial will hook up the logic to display the player's health and will modify the collision code so the player takes damage when hitting rocks.