Unreal HUDs - jgoffeney/Cesium4Unreal GitHub Wiki

Back

Description

This page describes setting up a HUD and updating text boxes with variable values. This is the result of getting the base functionality to work and there are probably more correct ways to do this.

Creating HUD

A HUD is generated as a user interface blueprint by adding a new component as UserInterface->WidgetBlueprint. Double clicking on the created component will open the editor with Designer and Graph tabs.

For my use case I want to display the current longitude, latitude and altitude for the camera so I opened the editor and Designer tab. I created 6 Text elements of which half are used for the labels and the other half are used to display the values. For each element I set the Anchor to be in the bottom right. When the application resolution changes it maintains the positions relative to that corner.

Enabling HUD

The HUD object has to be enabled before it is displayed. Open the level blueprint from Blueprints menu above the editor viewport and select the Graph. Drag from the existing Event BeginPlay node's Exec pin and add a Create Widget node. For the node's Class set the HUD blueprint you created above.

From the Create Widget node's output Exec pin and add an Add To Viewport node and then connect the Return pin to the Target pin. This is shown below. Now when you run the project the widgets will show up.

Setting Element / Variable Bindings

Source Variable

My source variable containing the values I want to display is an FVector with the geospatial coordinates updated via the Tick method.

UPROPERTY(EditAnywhere, BlueprintReadOnly, Category = Cesium)
FVector currentGeoLocation;

Binding and Create Graph

When a variable is bound to a widget then any changes to it are automatically propagated to the HUD.

Open the HUB object Blueprint editor and select the Text element to display the longitude value. For its Details under Content->Text select the the Bind button and select + Create Binding which opens the Graph editor with automatically create start and end nodes.

The image below is the graph created for displaying longitude with the nodes described below. It contains two paths with the top path connecting the Exec pins and validating the source actor. The bottom path reads and transforms the value to be displayed as longitude. The graphs for latitude and altitude are identical with the change being in which output is selected from the Break Vector node.

GetAllActorsOfClass

Gets all the instances of the Actor class set under the Actor Class parameter as an array. The class should be the one that contains the variable of interest. Since my application has a single instance then it returns an array with a single element. It provides warning that is a slow operation so a different method may be better.

GET

The GET node is used to get a single element from an input array with the index specified by the parameter.

CurrentGeoLocation

This node is generated by dragging from the output of the previous node (which is the instance of the Actor class), searching for the name of the variable containing the longitude value and selecting the get version. For my code it returns an FVector of longitude, latitude and altitude.

BreakVector

This node splits an FVector into its three components. For longitude I use the X output.

ToText(float)

This node converts the float value to a string and provides options for formatting the output. I set the Maximum Fractional Digits to 6.

? Is Valid

This node checks if the Actor object is valid and then has two output exec pins to switch the graph traversal depending on the results.

Print Text

This node just prints a text message and the options determine where it is displayed (log and/or screen). I am using it to provide feedback if the actor containing the variable is not valid.

HUD Update Jan 1/31/2022

Rather than use GetActorsOfClass or GetActorOfClass to get an instance of MainActor_BP a variable can be created in the HUD_BP Design view.

Create MainActor Variable

• Create a new variable in the HUD_BP Design view as MainActor.
• Set the Variable Type as Main Actor BP.
• Set the MainActor variable to public.

Initialize MainActor Variable

• In the HUD_BP graph design:
  • From Event Pre Construct create a GetActorOfClass node and set ActorClass to Main Actor BP.
  • Drag in the Main Actor variable as Set and connect its input to the return type of GetActorOfClass and the exec pins.

Update the Binding Functions

In the binding functions for longitude, latitude and altitude replace the GetActorsOfClass and related nodes with Main Actor Get node.