I implemented player health and mana variables, displayed them on a HUD and set up debug keys to add/remove health and increase max health.

Preview

How I Did It

Setting Up the Stats

In order to track the stats, I created a new blueprint of the Actor Component type and named it BP_PlayerStats. Within this class, I created several variables to track the player stats I was looking to add:

• Current Health: Float. Default value: 70
• Max Health: Float. Default value: 70
• Current Mana: Float. Default value: 100
• Max Mana: Float. Default value: 100
• isPlayerDead: Boolean

Modifying the Stats

To modify the stats, I created several functions for the various actions I wanted to take on these stats:

• Increase Current Health
• Decrease Current Health
• Increase Max Health
• Increase Current Mana
• Decrease Current Mana
• Increase Max Mana

Setting up the logic for Health

With the names set up, I started working on the logic for the blueprints.

The Increase Current Health looked like this:

This function takes an input of the amount you want to increase the health by, adds it to the current health then runs a check on if it exceeds the max health. If it doesn’t exceed, it’ll set the current health to that new value. If it does, it’ll set it to the max health.

Decrease Current Health looks similar, with an additional check to see if the player is dead that it returns:

Increase Max Health is very straightforward, in that it just adds whatever value you pass in to the max value.

Setting up the logic for Mana

Adjusting the mana values is extremely similar to health, and in some cases is near identical.

Increase Current Mana in particular is a mirror of health’s version.

Likewise, Decrease Current Mana is also a near mirror of the Health version.

And finally the Increase Max Mana

With the functions all set up, I could work on the HUD.

Setting Up the HUD

To set up the HUD, I needed to create a Widget Blueprint, which can be accessed from the right click menu in content drawer, UI -> Widget Blueprint.

Once there, I did the following:

1. Create the HUD space. Drag a Canvas Panel from the Palette to the Viewport.
2. Create the Health Bar. Dragged a progress bar from the palette to the Canvas Panel on the left, making sure it was a child of the canvas panel, then renamed it to HealthBar.
3. Set the Health Bar Location. With the Health bar selected, I went to the Details panel and set the Anchor to the bottom middle. The element won’t move by default, instead it’ll update the X and Y values to its current location. Update X to 0, y to -70 to get it in the bottom middle. Set the progress bar size X to 200, Y to 10.
4. Set the Health Bar Color. Set the Appearance to Red, and set the progress percent to 0.7.
5. Set the Health Bar Text. Drag a Text component to the Canvas Panel and rename it HealthBar Text. Make sure to check the is Variable next to the name in details. Place it on top of the health bar.
6. Create the Mana Bar. Copy the HealthBar and update the values accordingly: Position X = 0, Position Y = -50.
7. Set Mana Bar Color. Set the appearance to blue.
8. Update the ManaBar name. Rename the bar to ManaBar.
9. Set the Mana Bar Text. Copy the HealthBarText, rename to ManaBarText and reposition as needed.

Set up the HUD to Display

Now that I have a basic HUD set up, I need to display it in game. To do this, I did the following:

1. Went to the BP_ThirdPersonCharacter blueprint and selected the Event Graph tab.
2. Went to the Add Mapping Context node and dragged out a new Create Widget and set the class to the name of the Hud widget created, in this case HUD Widget.
3. Connected the Player Controller to the Widget.
4. Promoted the HUD Widget return value to a variable and renamed it to HudWidget, so I can use it later in my functions.
5. Connected this all to a Add to Viewport node.

This is what that looks like:

Connecting the HUD to the Player Stats

Before I can modify the HUD with updates to the player stats, I first need to connect the HUD to BP_PlayerStats. To do this, I went to the Event Graph of the blueprint and created a variable of the Player that can be used elsewhere. Note: Make sure to use the Get Owner under Component and NOT the one under Actor. If you use the wrong one there will be an error when you compile.

Connecting the HUD to the variable changes was done in the Set Health In Hud function, which looks like this:

This function has the progress bars I’m using for health and fills it according to the current percentage. Then it generates a “x / x” format to show current and total values, then sets the text on the health text field.

Mana is done the exact same way.

With that all set up, I can now update my functions to include Set Health in Hud or Set Mana in Hud functions to show the updates as the stats change.

Increase Current Health

Decrease Current Health

Increase Max Health

Following the same patterns, I also updated the Mana functions with its Set Mana in HUD equivalent.

Adding Stats to the Player

In order to see this in game and test it, BP_PlayerStats needs to be added to the player blueprint. So, since I was using the 3rd Person template, I went to BP_ThirdPersonCharacter class. To connect BP_PlayerStats, under the components section I clicked Add and searched for my stats file. Once it’s added, you can then access anything from BP_PlayerStats from the BP_ThirdPersonCharacter blueprint.

Triggering Health Changes on Keypress

Now, to test this I need to be able to control the increase and decrease of health in game. So, I set up some debug keys in the BP_ThirdPersonCharacter blueprint to control this.

Now, running the game and inputting the keys shows the health increase and decrease successfully! Go through and add commands for the other functions to test them all and validate that it all works.