HUD and Gameover Widget

In this chapter, we will make three widgets; one for HUD, one for the gameover scenario, and one for winning the game. These widgets are implemented in our main level, FirstPersonMap. So start with opening the FirsPersonMap if you have not already done that! It is important to mention that in this section, and chapter, we will only make these widgets and in the next section that we set up the instructions for actually showing them once their respective conditions are met.

Follow the video below to create the HUD, Gameover and Winning widget blueprints!

In general, for creating a HUD, you need to create a widget blueprint and call this WBP_HUD. Put a canvas panel into the hierarchy, then look for a Progress Bar and drop it wherever you want the health bad to be. In the details panel, you can change the Percentage to see how it’d look like if the bar was filled. You can adjust the color and other properties of the progress bar in the details panel.

Note

The Percent property starts from 0.00 and goes up to 1.00. This means that 0.5 is equal to 50%.

To connect the progress bar to the PlayerHealth, you need to click on Bind in front of Percent and create a new binding. From there, you get the PlayerHealth by casting the Player Pawn to BP_FirstPersonCharacter and grabbing the PlayerHealth. Use the To Float node to convert the integer to a float, and then divide the value by 100. Hook up the result of the division to the return node of the binding and you are good to go!

As for the Gameover and **Winning **widgets, what you want to do is to create these widgets, use a background image of your choice, and place two buttons in the canvas panel. One for Restart and one for Main Menu. Use the OnClicked event and utilize Open Level to reopen the FirstPersonMap and L_MainMenu when the player clicks on Restart and Main Menu buttons respectively.