Romero Blueprints: Drawing a HUD with UMG

Now we will use the Unreal Motion Graphics (UMG) to create a HUD using the "Vehicle" template. A HUD (Heads Up Display) is like a transparent panel that displays information on the game screen.

In this article we will create the visual part of the HUD and in the next article we will create the Blueprints Actions to get the necessary information for display on the the HUD.

If you have not already created a project with the "Vehicle" template, create one now in the "File->New Project" menu. This template displays two information on the screen, which are the speed and the current gear:

A new HUD will be created to display this information and we will also add a fuel gauge in the car. The HUD will be as follows:

In this new HUD there are 3 types of screen elements:

Texts: Used in speed and in the label "Fuel";

Progress Bar: Used to display the amount of fuel;

Images: Used to visually represent the current gear of the car;

Seven images are used to represent the car's gears. The image below gathers all used images which are the Neutral, from 1st to 5th and Reverse. Each image has the size of 256x256 pixels. I suggest separating them to individually import each image as texture.

You must also import the font that will be used. The font name is "Digital Dream" and was created by Jakob Fischer (pizzadude.dk). The download can be done in the link: www.fontsquirrel.com/fonts/Digital-dream

After downloading, unzip the file and import the font named "DIGITALDREAM.ttf" on Unreal Engine by clicking the "Import" button on the Content Browser. If you prefer, you can use any other font.

Let's now create the Widget Blueprint to define the HUD. Click the "Add New" button from the "Content Browser", choose the submenu "User Interface" and then the "Widget Blueprint" option:

Put the name of "UMG_HUD" for the new Widget Blueprint and then double-click it to open the UMG UI Designer. The screen that we will build on Canvas will stay this way:

Click to enlarge

On the left side of the UMG UI Designer, in the "Palette" tab, are the elements that will be used as the "Text", "Image" and "ProgressBar". In addition to these elements, we will also used the "Horizontal Box" to organize the elements.

Let's add the speed meter. First drag a "Horizontal Box" and drop near the upper left corner of the Canvas, then drag two elements of type "Text" into the "Horizontal Box".

Select the first "Text" and on the "Details" tab, type "SPEED" on property "Text". Choose a red color and select the "DigitalDream" font, size 40, as below:

Make the same settings on the second element of "Text". For now we will write "50 KM/H" only to serve as a size reference. Later an adjustment will be made to get this value direct from a variable.

The speed meter looks like this:

The white symbol on the left is the anchor that serves as a reference for the position of the element. Thus, the X and Y position of the element is relative to the anchor position. To change the anchor position select the "Horizontal Box" and on the "Details" click the ComboBox of the "Anchors" property. The image below shows the available options:

For the fuel gauge, let's add another "Horizontal Box" at the top center of the Canvas. Set the anchor position at top center.

Drag an element of type "Text" into the "Horizontal Box", type "FUEL", change the color to green and change the font to "DigitalDream" with size 40. Then drag a "ProgressBar" into the same "Horizontal box ". The result should look something like this:

The image below shows the "Details" tab of the "ProgressBar". The property "Bar Fill Type" allows you to select various types of progress bar. The "Percent" property ranges from 0.0 to 1.0 and sets the current value of the progress bar. The value "0.7" was added only to display the progress bar. This value will be obtained from a variable later.

The last element that we will add is of the type "Image". Drag one to the upper right corner of the Canvas. In the "Details" tab put "GearImages" as the name of the element. Set the position of the anchor to the upper right corner. Put the value "-256" to the X position. Check the "Size to Content" option.

The image that will be used has the size of 256x256. For now, choose one of the images representing the gear of the car on the property "Brush-> Image". Later, we will create a function to retrieve the correct image according to the current gear. The "GearImages" will appear this way in the UMG UI Designer: