2. Displaying Health, Energy and Ammo

Choose your OS:

Visual: Health, Energy and Ammo

Here we will begin setting up the visual aspects of our HUD.

  1. Open your HUD Widget Blueprint to access the Widget Blueprint Editor.

    Step2_6.png

    Inside the Widget Blueprint Editor we can provide the visual layout and scripted functionality of our HUD.

    For more information on each of the different facets of the Widget Blueprint Editor, see Widget Blueprints .

  2. Inside the Palette window under Panel, drag a Horizontal Box onto the CanvasPanel in the Hierarchy window.

    Step2_7.png

    Panel Widgets are sort of like containers for other widgets and provide additional functionality for the widgets that are inside them.

  3. Also under Panel, drag two Vertical Boxes onto the Horizontal Box.

    Step2_8.png

  4. Under Common, drag two Text widgets onto the first Vertical Box and two Progress Bars onto the second Vertical Box.

    Step2_9.png

  5. Select the Horizontal Box, then in the graph resize the box and position it in the upper left corner of the window.

    Step2_10.png

    The progress bars will appear very small but don't worry, we will fix that next.

  6. Select both Progress Bars, then in the Details panel set both to Fill for the Size.

    Step2_11.png

  7. Select the Vertical Box containing the Progress Bars and set it to Fill as well.

    Step2_12.png

  8. Select the Horizontal Box again and resize it so the bars line up with the text.

    Step2_13.png

  9. Select the top-most Text widget in the Hierarchy window then in the Details panel under Content enter Health :.

    Step2_14.png

    Do the same for the other Text widget but label it as Energy so your graph looks like below.

    Step2_15.png

  10. Select the Progress Bar next to health and in the Details panel set the Fill Color and Opacity to a green color.

    UMGColorPicker1.jpg

    You may notice that Progress Bar does not change color when assigning a color. This is because the Percent value to fill the bar is set to 0.0 (you can change this to test out different colors, later we will link this to the health value of our character).

  11. Also set a Fill Color for the Energy bar (we selected an Orange color).

  12. For the display of Ammo, using the methods from above, add widgets to the Hierarchy so your setup is laid out like below.

    Step2_16.png

  13. With the Horizontal Box containing the ammo information selected, resize it and position it in upper right corner.

    Step2_17.png

  14. With the Horizontal Box still selected, in the Details panel click Anchors and select the upper-right Anchor.

    Step2_18.png

    This will move the Anchor Medallion to the upper-right corner of your screen.

    Step2_19.png

    By Anchoring a Widget, you are indicating to the Widget that it is to appear in its placed position relative to the position of the Anchor Medallion regardless of screen size. In other words, when the screen size changes, move the widget the same distance away from the Anchor Medallion's position (in this example the same distance away from the upper-right corner of the screen).

    You can test different screen sizes by clicking and changing the Preview Size option inside the graph.

Script: Health, Energy and Ammo

Now that we have our visual layout, we can add the hooks to provide the functionality behind our HUD elements.

  1. Click the Graph button in the upper-right corner of the Widget Blueprint Editor window.

    Step2_20.png

  2. In the Graph under the Event Construct node, Right-click and add a Get Player Character node.

  3. Drag off the Return Value pin and select Cast to FirstPersonCharacter

    Step2_21.png

    Here we are checking if the Character Blueprint being used by the Player Character is indeed the First Person Character Blueprint.

  4. Drag off the As First Person Character pin and select Promote to Variable (name it My Character) then connect as shown.

    Step2_22.png

    This will allow us to access the variables contained inside our FirstPersonCharacter Blueprint.

  5. Click Compile in the toolbar to compile the script.

  6. Return to the Designer tab and select the Progress Bar next to Health.

  7. In the Details panel under Progress, click the Bind option next to Percent and set it to use Health from MyCharacter.

    HealthProgress.jpg

    This binds the value of the Progress Bar to our Health variable inside our First Person Character Blueprint. Now whenever our Health value changes in our Character Blueprint it will automatically be updated in our HUD as well. You may also notice that the Progress Bar does not change after binding it. That is because we've stated this to occur upon Event Construct (or when the HUD is constructed, which occurs when the game is started).

  8. Select the Progress Bar next to Energy and repeat the process above, binding Percent to Energy from MyCharacter.

    EnergyProgress.jpg

  9. Select the 25 following the Ammo text, then in the Details panel for Text, click Bind and Create Binding.

    CreateBinding.jpg

    Now, like the way we previously used Sub-Object Properties to bind properties of the same type, we can also create our own custom bindings. Here we are going to bind our Text property to an Integer property from our First Person Character Blueprint giving us a display of our current Ammo.

  10. Inside the function that is created and automatically opened, hold Ctrl and drag the MyCharacter variable into the graph.

    Step2_27.png

  11. Drag off the pin MyCharacter and select get Ammo.

  12. Connect the Ammo pin to the Return Value of the Return Node.

    Step2_28.png

    A conversion node To Text will automatically be created for you when connecting.

  13. Repeat the process above for the other 25 text and creating a binding for the "Max Ammo" text.

    Step2_29.png

    You probably don't need to do this if your Max Ammo is going to remain the same, however this will allow you to change it.

  14. Click Compile and Save then click the Play button to play in the editor.

    Our Health, Energy and Ammo values are now displayed on our HUD and reflect our current values from our Character Blueprint. Pressing Space will have the character jump and deplete Energy, pressing the Left Mouse Button will fire the weapon reducing our Ammo, and pressing F will cause us to lose Health (which you could hook up to a damage system at a later date).

In the next section we will create a Main Menu which we can use to load into our game that we've setup.