In this section, you will learn how to create fully customized UI overlays for your games by following the steps to recreate the TMNT Arcade Template player UI.
The basic breakdown of the steps is:
Download the UI Material Lab texture pack for free and experiment with your own UI configurations!
Click image to expand.
Let’s dive right in!
Set Up Custom Widgets
In your Content Browser, go to All > [Your Project NAME] > UI > Widgets and open the UW_HUD_PlayerInfoBlock widget Blueprint.
On the left side, you will see the Hierarchy tab, which works just like the Outliner from the main editor window and displays the various components of the finished widget.
Backplate
The top section is made up of three backplate images that define the layered look of the UI. These include:
Backplate1_Image - the gray-tinted background layer
Backplate2_Image - the orange outline layer
Backplate3_Image - the white outline layer
Together, these images create the framed style of the player information panel.
When importing images to use for your UI, make sure to choose Texture Group to UI and Compression Settings to UserInterface2D(RGBA8).
Player Name
This component is made up of two elements, an Active Player name, and an Inactive Player name, which will show up when the player is alive, eliminated or disconnected in game.
Pick two distinct colors that will inform the players who on their team is currently active and who is eliminated.
For the Active player name, set the Visibility to Visible, and for Inactive, set it to Hidden. This will be shown only under certain conditions.
Set the Width Override to 220.0 so that longer player names do not overlap with the player avatar icon.
Player Avatar Icon
This component shows the player’s character portrait based on their chosen skin in game.
The component is bound to a material instance called MI_UI_PlayerCard, found under the UI > Material Instances folder.
You can customize this material instance to your liking by changing the settings in the Details panel. Try importing your own image and adding some outline colors!
In this example, the chosen image is an empty transparent image that will be connected later to the character skin.
Health
This component contains the regions that will display the player’s health and shield levels.
On the parent level, you can see the size box that determines how large the overall region is allowed to be.
Next is the health backplate image, called MI_UI_Health_Backplate. This UI material is also provided under Fortnite > UI > Materials. It is very customizable and can provide lots of options for showing the player’s health bar right out of the box.
On top of the backplate is a stack box made up of two components: a health bar and a shadow called Health_Image and Health_Shadow, respectively.
The Health_Image is a customizable progress bar UI material. If you open up the material instance, you can zoom in by changing the Preview Size.
Try changing some of the settings in the Details panel to see how they affect the existing material.
Since scalar parameter values (the progress bar fill state) range from 0 to 1, and Fortnite’s health and shield values typically range from 0 to 100, it is important to set the Multiplier to 0.01 so that health and shield values are correctly displayed to players.
The Health_Shadow bar is a simple shaded overlay added for aesthetic purposes.
Shield
The shield component is made up of a Shields_Container background that shows the empty shield area in dark gray, and a Shields_Image that contains the progress bar UI material.
The Shield_Image uses a basic progress bar material instance, which is a simplified version of the Health_Image material.
Add View Bindings
Now that you’ve built up the core components of the UI for your game, let’s practice adding view bindings that will allow each of the components to update based on data they receive from a live session.
Player Name
To get a player name to appear in the correct field, follow these steps:
Open the View Bindings tab by clicking Window > View Bindings or by selecting View Bindings on the bottom of the screen and docking it.
To see the HUDPlayerInfoViewModel list of view bindings:
1. Open the Viewmodels window by selecting Window > Viewmodels.
1. Go to +Viewmodel and select HUD - Player Info Viewmodel Base.
1. Click on Device - HUD Controller Player Info Viewmodel and click Select.
Select NameActive_Text from the Hierarchy list or by clicking the Playername area of the UI Preview screen.
Click + Add Widget NameActive_Text and select Text from the dropdown menu.
In the empty field to the right, select HUDPlayerInfoViewmodel and Player Name from the ensuing dropdown.
The final binding should look like this:
Repeat steps 1 to 3 for the NameInactive_Text element.
To modify visibility settings on the inactive name, add a new widget to NameInactive_Text and select Visibility from the dropdown.
Click the empty field to the right, and select Conversion Functions > To Visibility (Boolean).
Selecting this option causes three new fields to pop up. Click the Link icon next to Is Visible. From the menu, select HUDPlayerInfoViewModel and Is Eliminated.
Set True Visibility to Not Hit-Testable (Self Only) below. Leave False Visibility on Collapsed. When the player gets eliminated or disconnects, the name will replace the NameActive_Text, but when the player is alive, it will remain collapsed.
The final NameInactive_Text binding should look like this:
Press Compile to submit the changes, and you’re done with the player names!
Player Avatar Icon
Choose Profile_Image from the Hierarchy, or click the player icon area on the UI preview screen.
Click + Add Widget Profile_Image.
Go to Profile_Image > Brush and press Select. This binding is essentially looking at the selected Brush setting from the Profile_Image details panel.
Click inside the empty field to the right, and select Conversion Functions > Set Texture Parameter.
Type Texture in the Parameter Name field. To find the name of this field, open the player avatar material instance.
For Set Vector/Scalar/Texture Parameter functions, make sure the material instance parameter names are an exact match to the Parameter Name field.
Click on the Link icon next to the Value field and select HUDPlayerInfoViewModel > Player Avatar Icon.
The finalized binding should look like this:
Health and Shield
Choose Health_Image from the Hierarchy, or click the health bar area on the UI preview screen.
Click + Add Widget Health_Image.
Go to Profile_Image > Brush and press Select.
Click inside the empty field to the right, and select Conversion Functions > Set Scalar Parameter.
Type Progress in the Parameter Name field. To find the name of this field, open the player avatar material instance.
Click the Link icon next to Value and select HUDPlayerInfoViewModel > Health.
The progress gives a percentage of the player’s remaining health, and since the Multiplier has been set to 0.1, every percentage point will move the progress bar by 1/100th. You can test this by arbitrarily changing the percentage value in the Material Instance to see the progress bar moving.
Health Percentage Click image to expand.
The finalized binding should look like this:
For the shield bar, Repeat steps 1 to 6, but choose Shield instead of Health.
The finalized binding for Shield should look like this:
Press Compile to submit the changes.
Full Widget
This binding ensures that the entire widget displays only after a player is connected to the game.
Choose PlayerInfoBlock_Overlay from the Hierarchy.
Select + Add Widget PlayerInfoBlock_Overlay, then choose Visibility from the dropdown menu.
Click the empty field to the right, and select Conversion Functions > To Visibility (Boolean). Selecting this option causes three new fields to pop up.
Click the Link icon next to Is Visible. From the menu, select HUDPlayerInfoViewModel and Is Disconnected.
Set True Visibility to Collapsed and False Visibility to Not Hit-Testable (Self Only).
The final binding should look like this. Press Compile to save your changes.
That’s it, you now have a fully set up UI widget that will display in-game information!
Create a Player Stack
This section will show you how to create a user widget that displays additional squad players along with the controlling player.
To start off, create a new Widget Blueprint by right-clicking in the Content Browser and selecting User Interface > Widget Blueprint.
Select User Widget from the dialog box, and rename it to HUDInfoStack.
Double-click the User Widget to open a new Editor window.
From the Palette panel, drag an Overlay element into the Hierarchy panel to get started.
Drag a Stack Box to the level below the Overlay, and rename it to PlayerInfoStack.
From the Viewmodels panel, press +Viewmodel and select a Device - HUD Controller Team/Squad Player Info List.
Go to the Details panel, and press +Add Viewmodel Extension. This allows the PlayerInfoStack to accept an Entry Widget Class.
If you do not see these options, try compiling the widget one more time.
For the Entry Widget Class, select the PlayerInfoBlock previously created. Below, select HUDPlayerInfoViewmodel as the Entry Viewmodel.
Under the Slot Template section, you can adjust the spacing between each widget and alignment, and preview what a certain number of widgets would look like in game.
Spacing between widgetsClick gif to expand.
In the View Bindings panel, click +Add Widget, then choose HUDInfoStack. Choose PlayerInfoStack_Viewmodel_Extension and expand it to see Set Items, then select it. If PlayerInfoStack_Viewmodel_Extension doesn't appear in your list, press Compile and it should appear.
In the empty field to the right, select HUDPlayerInfoListViewModel > Team/Squad Players Info Array. This passes the array of player info viewmodels into the newly set up extension with a function called Set Items.
Press Compile to save your changes. You are now ready to add these to your game using the HUD Controller device.
If you would like to make a widget for the controlling player that is separate from the rest of the squad:
Create a new widget for your controlling player and set up the view bindings just like you had previously using the Device - HUD Controller Player Info Viewmodel.
Bring this widget under the parent widget holding the Stack Box.
Create a binding for that widget. In the left field, select Device - HUD Controller Player Info Viewmodel. In the right field, select Device - HUD Controller Team/Squad Player Info List > Controlling Player Info.
Set Up the HUD Controller Device
Search for the HUD Controller device in the Content Browser, and drag it into your scene.
In the User Options, choose what you want the player to see, and ensure that Show HUD is set to Yes and Show Team Info is set to No.
Scroll down to Player Info Widget Override and drag the HUDInfoStack widget into the empty field. Make sure this is the newly-created stack widget, not the original widget you created.
Click Save.
That’s it! Your fresh UI should now appear when you playtest your game!
Up Next
Next, you will learn about setting up the cameras and controls devices for your side scroller game!
