1.1 - HUD Example

This example demonstrates a simple in-game HUD, and also includes clickable buttons in the form of a basic pause menu. A health bar material is drawn on the HUD and uses a Blueprint Interface function to get the health value from the Character, while an objective marker is drawn over an objective along with the objective's name and distance from the player. The HUD Blueprint can be found by searching for BP_HUD_Example in the Content Browser.

GameMode

The GameMode sets the default Pawn class, HUD class, and PlayerController class, in addition to containing any game-specific gameplay behavior or settings. In this example, the GameInfo_HUD Blueprint is the GameMode Blueprint which sets the BP_HUD_Example Blueprint as the HUD class, and it must be set as the GameMode Override in the World Settings tab.

gamemode_hud.png

HUD

The ReceiveDrawHUD event that is used to draw each element of the HUD provides X and Y values representing the screen size. These values can be then be incorporated throughout the Blueprint to allow various HUD elements to scale and reposition themselves according to the size of the game screen, ensuring, for example, that a button remains in the center of the screen at any resolution.

Health Bars

BP_HUD_healthbar.png

The health bar is a dynamic Material Instance created in the HUD Blueprint's Construction Script. The Material contains nodes that change the length of the health bar according to Current Health and Maximum Health scalar parameters, and the HUD Blueprint updates the Current Health parameter based on the Character's current health.

Pickups

BP_HUD_pickup.png

The objective pickup in this level is the BP_Pickup_Child_Health also used in the Advanced Blueprints - Child Blueprints content example. It is set as the Objective variable in the Level Blueprint.

In the HUD Blueprint, if the Current Objective is not null:

  • The objective marker uses a Project function to convert a 3D location vector (representing the objective's location) into 2D screen coordinates, so that the objective label and icon drawn at those coordinates will always be hovering over the objective Actor when it is on the screen.

  • The text is centered over the objective by using the Get Text Size node. This node measures the height and width a string will be when drawn on the HUD, taking into account the font used and the scale of the text. Because text is aligned left by default, and its coordinates will be at the top left, this node is useful for adding an offset to those coordinates to center the text.

Pause Menu

BP_HUD_menu.png

The pause menu is opened when the player presses M. The PlayerController Blueprint then executes an interface message for the Toggle Menu function. This function is defined in the BPI_HUD_Interface_Events Blueprint Interface, along with the functions for setting the objective pickup and getting the player character's health.

Key features shown in the pause menu include:

  • Custom functions: A custom function named Draw Button is used as a convenient way to draw all the necessary components of a button (button texture, button text, and a hit box) with a single function node that can be re-used as many times as needed. This is particularly useful in the case of the HUD, because a lot of math nodes are necessary to determine screen coordinate values, offsets, and so on, and the function allows these to be contained and reused easily.

  • Hit boxes: The Add Hit Box function in the DrawButton function is used as a simple way to detect when the mouse is clicked or released on a specified region of the screen. The position and size of the hit box can be specified, as well as a name. A generic ReceiveHitBoxClick event in the main EventGraph fires when a hit box is clicked and outputs the name of the hit box. A Switch on Name node can then direct the execution flow according to this name output.

Player Controller

BP_HUD_pressM.png

The BP_PlayerController_HUD Blueprint is the default PlayerController class for this example, and is also set in the GameInfo_HUD GameMode Blueprint. Although the Press "M" for Menu string is set up by the BP_HUD_Example Blueprint, the PlayerController Blueprint actually sets the initial response to pressing the M key.

Pressing M executes the Toggle Menu interface message with the HUD Blueprint as the target. The PlayerController then:

  • Sets Show Mouse Cursor to true.

  • Sets Enable Click Events to true.

  • Enables the PlayerController to give input to the HUD.

  • Pauses the game.