11. 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 sustain multiple hits.

Defining the HealthBar

When we first created the skeleton for our game we created a HealthBar Entity, but never filled it in. Now we’ll fully define the health bar. GlueView will be very helpful in defining the health bar so we will reference it in this tutorial.

For simplicity the health bar will use solid-colored Sprites rather than referencing any images for textures. This means that we can fully define the Sprites in Glue and not use Scenes. Our HealthBar will use two Sprites, a yellow outline frame and a green bar to indicate how much health the player has.

Adding the Sprites

To add the Sprites to the HealthBar:

  1. Expand the HealthBar Entity in Glue
  2. Right-click on the Objects item
  3. Select “Add Object”
  4. Select “Sprite” as the type
  5. Enter the name “FrameSprite”
  6. Repeat the steps above to add a second Sprite called “BarSprite”

TwoSpritesInHealthBar.PNG

Coloring the Sprites

You may have noticed that when you select a Sprite in Glue you are presented with some default variables like X, Y, Z (as shown above). If you’ve worked with variables in Glue before, you are probably aware that Sprites provide many more variables than what are shown above- those are simply the most common variables. We can access additional variables by tunneling in to the Sprites – which is what we’ll do to access the color values.

To access the color values on the two Sprites:

  1. Right-click on the Variables item under the HealthBar.
  2. Select “Add Variable”
  3. Select the “Tunnel a variable in a contained object”
  4. Select “FrameSprite” as the Object
  5. Select “Red” as the variable
  6. Click OK
  7. Repeat the steps above to tunnel:
    1. FrameSprite, Green
    2. FrameSprite, Blue
    3. BarSprite, Red
    4. BarSprite, Green
    5. BarSprite, Blue

ColorVariables.PNG

Next set the following values. Notice that you can edit the values in the Properties grid all at once (as opposed to selecting each individual variable):

  • FrameSpriteRed = 1
  • FrameSpriteGreen = 1
  • FrameSpriteBlue = 0
  • BarSpriteRed = 0
  • BarSpriteGreen = 1
  • BarSpriteBlue = 0

In FlatRedBall color values are measured between 0 and 1. For more information on what these values mean see the IColorable page.

Initial Size and Position

Now that we have the colors set up, we’ll position and size the sprites. To do this:

  1. Select the FrameSprite under the Objects item
  2. Set the Width to 48
  3. Set the Height to 12
  4. Select the BarSprite
  5. Set the Width to 44
  6. Set the Height to 8
  7. Set the Z to 1 (so it draws in front of the FrameSprite)

It should appear like this in the Preview window:

HealthBarInGlueView.PNG

Empty and Full States

Next we’ll create two states for the HealthBar. Unlike the states we’ve made before, we will treat these two states a little differently – we will interpolate between them.

What does it mean to interpolate? Interpolation, which is also referred to as “tweening”, is the process of combining two values to get a third value. In our case, we will have full and empty states which we will combine to get values anywhere between full and empty.

First we’ll create our two states:

  1. Under the HealthBar Entity right-click on States
  2. Select “Add State”
  3. Enter the name “Full”
  4. Repeat the above steps to create the “Empty” state

These states will need to modify the Width of the BarSprite. We’ll tunnel to the Width of BarSprite then modify it in the States:

  1. Right-click on the Variables item under HealthBar
  2. Select Add Variable
  3. Select BarSprite as the Object
  4. Select Width as the Variable
  5. Select the Full State
  6. Set BarSpriteWidth to 44
  7. Select the Empty state
  8. Set BarSpriteWidth to 0

At this point you can interpolate between the two States in GlueView. For information on how to do this, see this page.

As you drag the slider back and forth for interpolation you may notice that the health bar shrinks from the center.

ShrinkingHealthBar.png

We can fix this by adjusting the X value of the bar Sprite:

  1. Right-click on the Variables item under HealthBar
  2. Select “Add Variable”
  3. Select “BarSprite” as the Object
  4. Select “X” as the Variable
  5. Select the “Full” State
  6. Set BarSpriteX to 0
  7. Select the “Empty” state
  8. Set BarSpriteX to -22

HealthBarFromTheLeft.png

Creating RatioFull variable

At this point our data is set up for supporting interpolation between full and empty – now we need to make a property to allow this. Technically we already have this – the InterpolateBetween function in HealthBar is public, so any instance of HealthBar can call that function and achieve the same functionality as in GlueView. However, we want to abstract that away a bit so that it can change and not impact implementations of HealthBar. To do this we’ll create a property in our HealthBar .cs class.

Open HealthBar and add the following code to the HealthBar class:

Adding HealthBars to the Hud

Now that we have a functional HealthBar we’ll want to add HealthBars to the Hud. Since our game is a multi-player game we will need multiple HealthBars – one per player. Therefore, we’ll start by adding a list to our Hud in Glue:

  1. Push the right mouse button on the HealthBar Entity
  2. Drag the mouse button to the Hud Entity
  3. Release the right mouse button
  4. Select “Add Entity List”

Next we’ll need to add HealthBar instances to this list according to the number of players playing. Not only does the Hud need access to the number of players to update the HealthBar, but it will continually need access to the player list so that the health value displayed in the HealthBars can be updated.

We’ll create a field/property in the Hud.cs class:

Next we’ll define the CreateHealthBarInstances function:

Notice that we needed to place the HealthBars at a certain Y value. I used a HealthBarY variable, which we’ll now define in Glue:

  1. Expand the Hud Entity in Glue
  2. Right-click on the Variables item
  3. Select “Add Variable”
  4. Select “Create a new variable”
  5. Enter the name “HealthBarY”
  6. Select the type “float”
  7. Set the value to 250

Assigning the MainShipList

Finally we can assign the MainShipList. To do this:

  1. Open GameScreen.cs
  2. Add the following code to CustomInitialize after calling AddAdditionalShips

HealthBarInGame.png

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 Players12. Health Part 2 ->