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:
Open Gum
Right-click on the Components folder and select Add Component
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:
Expand the Standard folder in Gum
Drag+drop a ColoredRectangle on the HealthBar component
Set the ColoredRectangle Name to Background
Click the Alignment tab
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:
Select Foreground
Change X Units to Pixels From Left
Change X Origin to Left
Change Width to 100
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:
Right-click on the Foreground Width property
Select Expose Variable
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:
Select the Player object in Glue
Click the Quick Actions tab
Click Add Object to Player
Click the Gum object type
Select the HealthBarRuntime option. Note that this is the same name as the HealthBar Component in Gum with the word "Runtime" at the end.
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.
Select the HealthBar component in Gum
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:
Open Player.cs in Visual Studio
Add the following lines to CustomInitialize:
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. <- 10. Multiple Players -- 12. Health Part 2 ->
Last updated