Tutorial 15 : Adding Health Bars – Extended

Up until now, we use the enemies colour to represent his health, and while this works quite nicely for our little black blob, it doesn’t work so well with more complex sprites.
In this tutorial we are going to add little health bars that will float above our enemies heads. A lot of the code in this tutorial has been inspired from George Clingerman’s amazing tutorial on health bars. So if you are struggling with this tutorial, I would recommend reading his first as he explains it in more depth than I will.
The first thing that we’re going to do is stop the enemies colour from changing when the enemy loses health. If you still want this to happen just skip over this next bit.
To do that we need to go to Enemy.cs and find the Draw method. Then you need to replace these lines :

float healthPercentage = (float)currentHealth / (float)startHealth;

Color color = new Color(new Vector3(1 - healthPercentage,
   1 - healthPercentage, 1 - healthPercentage));

base.Draw(spriteBatch, color);

With this :

base.Draw(spriteBatch, Color.Black);

Now instead of tinting our sprite a different colour based on it’s health percentage, we just draw it black.

While we are still in Enemy.cs we are going to add a new property to keep track of how much health an enemy has left :

/// <summary>
/// The % of health that an enemy has left
/// </summary>
public float HealthPercentage
{
get { return currentHealth / startHealth; }
}

With that done, we can move onto drawing the health bars! The first thing we need to do is add a new texture to the content project :

Note : This texture should be called "health bar.png" however it's name get messed up when I uploaded it!

This is the texture we are going to use for the health bar. The reason that it is just white at the moment is so that we can easily tint it different colours when we draw it.

We are going to draw our health bars in the Wave class, so go to Wave.cs and at the top of the class, add the following field :

private Texture2D healthTexture; // A texture for the health bar.

We will use this field to store the texture we just added.

Next we are going to change a couple of constructors so we can pass our texture to this class. Seeing as we are already looking at the wave class, we will start by changing the Wave constructor. Find the Wave constructor and change it so it looks like this :

public Wave(int waveNumber, int numOfEnemies, Player player,
   Level level, Texture2D enemyTexture, Texture2D healthTexture)
{
   this.waveNumber = waveNumber;
   this.numOfEnemies = numOfEnemies;

   this.player = player;
   this.level = level;

   this.enemyTexture = enemyTexture;
   // Initialze our new texture field
   this.healthTexture = healthTexture;
}

We have added in an extra parameter so that we can pass in a texture to use for the health bars. Next go to WaveManager.cs and find the WaveManager constructor and change it to look like this :

public WaveManager(Player player, Level level, int numberOfWaves,
    Texture2D enemyTexture, Texture2D healthTexture)
{
    this.numberOfWaves = numberOfWaves;
    this.enemyTexture = enemyTexture;

    this.level = level;

    for (int i = 0; i < numberOfWaves; i++)
    {
        int initialNumerOfEnemies = 6;
        int numberModifier = (i / 6) + 1;

        // Pass the wave class our health texture.
        Wave wave = new Wave(i, initialNumerOfEnemies * numberModifier,
            player, level, enemyTexture, healthTexture);

        waves.Enqueue(wave);
    }

    StartNextWave();
}

Again we have added a new parameter to the constructor, and then passed this parameter straight to the Wave class.

The last thing we need to do is go to Game1.cs and load our texture and pass it to our WaveManager. So in Game1.cs find the LoadContent method and more specifically this line :

waveManager = new WaveManager(player, level, 24, enemyTexture);

And replace it with this :

Texture2D healthTexture = Content.Load<Texture2D>("health bar");

waveManager = new WaveManager(player, level, 24, enemyTexture,
                                                healthTexture);

The only difference is that we load in our healthbar texture and pass it to the WaveManager. Now that we have finished the tedious process of changing constructors and passing textures, we can move onto actually drawing our health bars!

The health bars will be drawn as two layers, we will first draw a gray ‘base’ layer that will indicate how much health the enemy started with. On top of that we will draw a gold layer that will indicate how much health the enemy has left.

So go to Wave.cs and find the Draw method, it should look something like this at the moment :

foreach (Enemy enemy in enemies)
{
   enemy.Draw(spriteBatch);
}

Add the following code just underneath where we draw the enemy, but before the last curly bracket :

// Draw the health bar normally.
Rectangle healthRectangle = new Rectangle((int)enemy.Position.X,
                                         (int)enemy.Position.Y,
                                         healthTexture.Width,
                                         healthTexture.Height);

spriteBatch.Draw(healthTexture, healthRectangle, Color.Gray);

The first thing this code does is initialize a Rectangle that has the same dimensions as our health bar texture, and is located directly above our enemies head. Then we actually draw our health bar texture in this rectangle and tint it gray – this code basically draws our ‘base’ layer.

Underneath the last bit of code but before the curly bracket, add the following :

float healthPercentage = enemy.HealthPercentage;
float visibleWidth = (float)healthTexture.Width * healthPercentage;

healthRectangle = new Rectangle((int)enemy.Position.X,
                               (int)enemy.Position.Y,
                               (int)(visibleWidth),
                               healthTexture.Height);

spriteBatch.Draw(healthTexture, healthRectangle, Color.Gold);

The first two lines determine how wide our gold layer should be based off of how much health the enemy has left. We then modify our health rectangle to use this new width and draw our gold texture in the new rectangle!

And that’s all there is to it! If you hit F5 and run you game now you should see something like this :

I know that the health bars don’t look very pretty at the moment, but it’s your job to make the game look nice, I'm just here to help with the nuts and bolts of it

I hope that this is useful to some of you!

Extra Reading :

One of the commenters on this tutorial was kind enough to provide some code to make the healthbars look a bit more pretty.

The code tints the colour of the health bar based on how much health is left, so when the enemy has full health his health bar will be tinted green and when the enemy has very little health the healthbar will be tinted red.

To do this find this line in Wave.cs in the Draw() method :

spriteBatch.Draw(healthTexture, healthRectangle, Color.Gold);

And replace it with this :

float red = (healthPercentage < 0.5 ? 1 : 1 - (2 * healthPercentage - 1));
float green = (healthPercentage > 0.5 ? 1 : (2 * healthPercentage));

Color healthColor = new Color(red, green, 0);

spriteBatch.Draw(healthTexture, healthRectangle, healthColor);

For more information see the below comment by BlueRaja
Here is the source code for this tutorial.