This article is the continuation of the article "Drawing a HUD with UMG".
Let's add Actions in the Widget Blueprint "UMG HUD" which was created in the previous article and also in the Blueprint "Sedan", which represents the car controlled by the player in the template "Vehicle".
Open the Widget Blueprint "UMG_HUD" and switch to the "Graph" mode. In this article we will create 3 functions to get the values of speed, gear and fuel. Let's create a variable to reference the car player and an array of "Brushes" to keep the images that represent each of the car's gears. At the end of this article, the "MyBlueprint" tab of the "UMG_HUD" looks like this:
Start by creating the "PlayerSedan" variable. It is of the type "Sedan", which is a Blueprint created for the template "Vehicle". Let's initialize this variable at the "Construct" event of the "UMG_HUD" this way:
 |
| Click to enlarge |
In the "Designer" mode, click the text element that contains the value of speed. On the "Details" tab, click the "Bind" button next to the "Text" property, and select "Create Binding" to the editor create a new function.
This was done to link the value of the "Text" to the return value of a function. Rename the function created to "GetSedanSpeed" and place the following actions:
In the Blueprint "Sedan" there is a variable named "Speed Display String" that contains the value of speed and the letters "KM/H".
The block without a name in the figure above is a converter of the type "String" to the type "Text". These converters are created automatically by the editor when a connection is made between the two types.
That's all that needs to be done to properly display the speed. Now let's make the necessary adjustments to display the gear.
Create a variable called "GearBrushes" of the type "Slate Brush" and click the icon next to the type of the variable to turn it into an Array. The type "Slate Brush" was created specifically for the UMG.
On the "Details" tab of the variable, in the "Default Value" section, add 7 elements to the array. For each element select an image that represents one of the gears. These images must have been imported as Textures in the previous article. Use the following order:
- 0: Neutral Gear;
- 1 a 5: Use the equivalent gear;
- 6: Reverse Gear;
In the "Designer" mode, click the "Image" element that represents the Gear. In the "Details" tab, category "Appearance", property "Brush", click the "Bind" button and then in "Create Binding". Rename the function created to "GetSedanGear".
Let's use a function that is part of the "Sedan" Blueprint called "GetCurrentGear". This function returns an integer value representing the current gear. If the value is zero then is the neutral gear. If the value is negative, it means that the vehicle is in reverse gear.
The "getSedanGear" function has the following actions:
 |
| Click to enlarge |
An integer variable was created with the name "BrushIndex" to keep the position in the array of the Brush that will be returned. If the value of the gear is negative then the value of the array index is 6, which is the position of the image of reverse gear. It is used an action "Get" to return the correct image of the Array "GearBrushes" according to the index value "BrushIndex".
Let's do some more adjustments to be able to run the sample. Then we will make the necessary changes to include the use of fuel in the game.
Open the Blueprint "Sedan", look for the "BeginPlay" event in "EventGraph". At the beginning of the event add two actions that will create the instance of "UMG_HUD" and add to the viewport.
 |
| Click to enlarge |
In the level editor, click the "Settings" button which is on the top bar and select the "World Settings" option. In the category "GameMode" change the HUD Class property to the class "HUD" instead of "VehicleHUD". Thus will not appear the old version of HUD created by the template. With these changes the sample can be run to see the new HUD working with the speed and gear.
I left the fuel property for later because we will make some changes to Blueprint "Sedan". It will be a great opportunity to practice various concepts of Blueprints we've seen so far.
Open the Blueprint "Sedan" and create a new variable named "Fuel" of type "Float". Check the "Editable" option and select "Display" for the category of the variable. Thus it stays together with the other variables that are used in the HUD. At the bottom of the "Details" tab of the "Fuel" variable, enter "1.0" as the default value that represents a full tank. The image below shows the variable "Fuel".
With this new variable created in Blueprint "Sedan", we can finalize the necessary changes in the Widget Blueprint "UMG_HUD". In the "Designer" mode of "UMG_HUD", click the "ProgressBar" element that represents the fuel gauge. In "Details" tab, "Appearance" category, "Percent" property, click the "Bind" button and then in "Create Binding". Rename the function created to "GetSedanFuel".
This is the content of the function "GetSedanFuel":
Back to the Blueprint "Sedan". Let's create a function called "UpdateFuel". This function will receive as an input parameter the value of the "AxisValue" representing the forward and back movement in control or keyboard.
The function has an output parameter called "ThrottleValue" that represents the acceleration of the vehicle. This function is responsible for decreasing the amount of fuel. If there is no more fuel the value of "ThrottleValue" will be zero preventing the car to keep moving.
Create a new function named "UpdateFuel" in the Blueprint "Sedan":
In the "Details" tab of the "Update Fuel" function, create the input parameter "AxisValue" of type "Float" and the output parameter "ThrottleValue" of type "Float".
Open the "UpdateFuel" function in the editor. Note that in the "My Blueprint" tab appears a new category called "Local Variables". A local variable exists only within the function in which it was created. Let's create a local variable called "Throttle" of type "Float" to help in the logic of the "UpdateFuel" function.
The "UpdateFuel" function has the following actions:
 |
| Click to enlarge |
If the value of the "AxisValue" parameter is zero, it means that the player did not press the control or keyboard to move the car forward or backward. The function checks if the value of "AxisValue" is different from zero and the variable "Fuel" is greater than zero. If true, there is a normal acceleration and the fuel decreases. Otherwise, the acceleration is zero.
This function will be called every Tick. Let's put the call to this function in the event "InputAxis MoveForward" of the Blueprint "Sedan" that is below.
This function will be called every Tick. Let's put the call to this function in the event "InputAxis MoveForward" of the Blueprint "Sedan" that is below.
 |
| Click to enlarge |
The event "InputAxis MoveForward" with the "UpdateFuel" function became:
 |
| Click to enlarge |
This was the last adjustment required to complete the new HUD.
