Backplates display various types of information, such as a player’s avatar picture, gamer tag, health, shields, and more, on the HUD.
Backplates perform a number of functions, from helping identify teammates in multi-player cooperative games to identifying low health and shield stats.
In Unreal Editor for Fortnite (UEFN), backplates are made using
However, textures can be memory-intensive. This can add a strain on your memory budget and reduce the performance of your island. Textures and Texture Sample nodes in your material take up a large amount of memory.
Materials are best used to create flat designs, and can add animated effects to the backplate. Materials are less memory-intensive as they rely on the GPU to execute simple algebra math. This allows you to do a range of things, from creating simple shapes to animating complex interactions in a material.
 |  |
Flat UI Design with Materials | UI Design with Textures |
When opting to use textures, be sure to use them sparingly — it is recommended that you avoid anything above 256 x 256 px for UI textures.
Materials are less memory-intensive because they use the GPU to render.
The method you use for your avatar backplates will depend on a number of factors:
Personal preference for the UI design.
UI style and design that complement the type of island experience you create
How much memory you want to save
The avatar backplate design in this tutorial uses three Material Instances for the basic design. The following backplate designs were created using the M_UI_Shape_Rectangle material to include:
A translucent pink background
A pink container that surrounds the name text and the translucent background
An aqua circle that will contain the player’s avatar
Create your own UI with materials! See Creating Custom UI with Material Instances.
Set Up a Custom Widget
Use the UI Pop-Ups document’s User Widget workflow to:
Create a User Widget.
Rename the thumbnail to Player_Info.
Double click the thumbnail to open the UMG Widget Editor.
The Widget Editor is where you’ll lay out the appearance and screen placement for your backplate design. Afterward, you’ll add a Viewmodel to create binding functionality to capture existing player information and bind it to the backplate design.
In the Event Graph:
Select the Fill Screen setting in the top-right corner and set it to Desired instead.
Through this setting, you can change your widgets to a specified size so that your UI can appear seamless during gameplay.
To layout the UI design for your custom HUD, you’ll begin by adding panels to the Event Graph.
In the Palette panel, navigate to the Panel section and drag a Canvas panel into either the Event or directly into the Hierarchy panel. Then, rename the panel HUD_Canvas.
The Canvas Panel provides a way to anchor different UI elements to specific places on the screen. Make sure to have a UI design plan before adding more panels to the canvas to ensure your design layout is mirrored in the Canvas Panel.
Only use the Canvas panel when you need to use specific UI elements as part of your design. For example, use this panel if you’re building a HUD and need to lay out different child widgets to specific places on the screen.
Instead of changing the Fill Screen setting to Desired, you can resize the Canvas Panel to either 1920 X 1080 or 2560 X 1440, which are the most common screen aspect ratios (16:9).
From the Palette panel's Panel section, nest a Stack Box under HUD_Canvas in the Hierarchy panel and rename it Backplate_StackBox. This is the container for the backplate UI, which will nest the widgets that make up your UI variables.
As you add variables to the Stack Box, they’ll automatically stack left to right in the panel.
You can also use the Stack Box to stack your UI elements from top to bottom.
From the Palette panel's Common section, nest an Image under Backplate_StackBox, and the Hierarchy. Then rename the Image to Avatar_Image, which will contain the avatar's border.
From the Palette panel's Panel section, nest an Overlay under Backplate_StackBox and rename it to Nameplate_Overlay. The Overlay provides a way for you to layer widgets on top of one another.
From the Palette panel, drag and nest two Images under Nameplate_Overlay.
Rename the images after the materials, Background and Border.
Drag and nest a Size Box panel under Nameplate_Overlay.
Use the Size Box to set the properties of its nested children. This stops anything inside the Size Box from bleeding out and possibly covering other UI elements or gameplay.
Drag and nest an Overlay under the Size Box and rename it Text_Overlay.
Without an Overlay, you can only child one widget under the Size Box.
From the Palette panel's Common section, drag and nest two Text Blocks under Text_Overlay. Rename the Text Blocks to Active and Inactive.
The UI layout is complete. Next, you will set the widget's properties to make the size of the backplate UI elements relative to the screen size.
Set Widget Properties
A container panel automatically adjusts its size to the largest widget inside it. The parent panel must contain all of its children before you begin editing its properties. Otherwise, the proportions of the parent element could shift as child UI elements are added in the Hierarchy tab.
Start setting the properties for the Backplate_StackBox panel to decide the screen placement and the boundaries of the backplate.
The following properties were edited for this backplate's design:
Click image to enlarge.
| Setting | Value |
|---|---|
Anchors | Bottom-Left Corner |
Alignment | Should be set to a pair of coordinates that provide padding for your widget from the edges of the screen. |
Size to Content | True |
Orientation | Horizontal (All the child widgets will display left to right.) |
Shear X | -20.0 (Skews the Stack Box negatively to the right.) |
Hold Shift + Control and click the bottom-left corner to automatically update the position and alignment of your widget.
The basic backplate layout pieces are in place. Now you’re ready to add the materials you created and edit the nameplate Text Blocks.
Add and Edit Backplate Assets
The Widget Editor has settings for selected widgets to add materials and text as well as modify the asset properties used in the Brush setting.
It is important to note the material's arrangement order in the Hierarchy panel. When adding your assets, make sure they display properly. Background assets should be layered at the bottom with the additional assets layered on top.
Edit Material Instances
Select your widgets in the Hierarchy panel to begin adding your materials and text.
Select Avatar Image under the Stack Box to highlight the widget and open its properties in the Details panel.
In the Details panel, add the Avatar Border Material to the Brush setting. Adjust the Image Size settings to fit the Image widget with the material.
Click image to enlarge.
Materials are like paint. When added to the Brush setting, the material fills the space of the image widget.
If you have specific avatars for your experience, do the following:
* Create an overlay to layer an avatar image under a border material.
* Add your imported avatar images to an Image background layer.
* Use the border material on the top layer.
Select the Background Image in the Hierarchy panel to open the Overlay options in the Details panel.
In the Details panel, set the Horizontal and Vertical Alignment settings to Center Alignment and add the Background Material to the Brush setting. Adjust the Image Size settings to fit the Image widget with the background material color.
Click image to enlarge.
Select the Border Image under Nameplate_Overlay to highlight the widget and open its properties in the Details panel.
In the Details panel, set the Horizontal and Vertical Alignment to Center Alignment and add the Border Material to the Brush setting. Adjust the Image Size settings to make the border go around the background color.
Click image to enlarge.
The backplate takes on a basic look and now you’re ready to edit the Text Blocks.
Edit the Nameplate
The nameplate displays the player's gamer tags. The backplate designed above contains both Size Box and Text Blocks.
By editing the Size Box properties you can prevent the text from extending outside of its boundary into other UI elements or obstructing the player's view.
Select the Size Box in the Hierarchy to open its properties in the Details panel.
In the Details panel, set Horizontal and Vertical Alignment settings to Center Alignment. This automatically centers the Text Blocks in the Nameplate images. Set the Size Box's Width and Height Override options to True and set the Nameplate_Overlay's desired size.
The Green box displays the border of the Size Box.
Click image to enlarge.
In the Hierarchy panel, right-click on Size Box and select Wrap With… > Size Box for the Text Blocks to wrap the player text according to the Size Box's properties.
The basic setup of the nameplate UI is complete. All the child elements take on the properties of their parent so the amount of editing you have to do to those widgets is minimal.
From the Details panel, you’ll edit the Active and Inactive Text Blocks by setting the alignment and font size, color, stroke, and much more.
Make sure the Active text is a separate color from the Inactive text. In this example, the Active Text Block font is a size of 145 in white with a Stroke of 6, and the Inactive font is a size of 145 in SlateGrey with a Stroke of 6.
Set the Inactive text box’s Visibility setting to Hidden. This prevents the text from displaying until the binding to the widget is triggered in-game.
This pulls all the pieces together, the nameplate and the avatar backplate.
Add View Bindings
Now that the UI design is built, it’s time to add bindings to the Text Boxes and Avatar_Image based on data they need to receive during a live session.
The HUD Controller Player Info Viewmodel provides a way to replace parts of your HUD with a custom widget. To take advantage of this setting, you need to create a Viewmodel of your backplate.
Player Name Text
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 HUDPlayerInfoViewModelBase list of view bindings:
1. Open the Viewmodels window by selecting Window > Viewmodels.
1. Go to +Viewmodel and select HUD Controller Team/Squad Player Info Viewmodel Base.
The HUD Controller Team/Squad Player Info List provides a way to show the Controlling Player’s information without their squad or team.
1. Click Select.
Select the Text Block from the Hierarchy list or by clicking the Player Name area of the UI Preview screen.
From the View Bindings tab, click + Add Widget Active_Name.
Select the Active "PlayerName" field and select Text > Select.
In the empty field to the right, select HUDPlayerInfoViewModel > Controlling Player Info > Player Name > Select from the dropdown.
The final binding should look like this:
Repeat steps 2 to 3 for the Inactive_Name element.
To modify visibility settings on the inactive name, add a new widget to Inactive_Name. Select in the first field and select Visibility > Select from the dropdown.
Click the empty field to the right, and select Conversion Functions > To Visibility (Boolean) > Select.
Selecting this option causes three new fields to pop up. Click the Link icon next to Is Visible. From the menu, select HUDPlayerInfoViewModel > Controlling Player Info > Is Eliminated > Select.
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 Active_Name, but when the player is alive, it will remain collapsed.
The final Inactive_Name binding should look like this:
Click image to enlarge.
Click Compile to submit the changes, and you’re done with the player names!
Player Avatar Icon
Choose Avatar_Image from the Hierarchy, or click the player icon area on the UI preview screen.
Click + Add Widget Profile_Image.
Go to Avatar_Image > Brush and press Select. This binding is essentially looking at the selected Brush setting from the Avatar_Image Details panel.
Click inside the empty field to the right, and select Conversion Functions > Make Image Brush from Material > Select.
Set the empty Image Size fields to the size of your icon border material in the widget. In this example the border material is X=50 and Y=45.
The finalized binding should look like this:
Click image to enlarge.
Click Compile to save your widget.
Next, you’ll drag a HUD Controller device into your project and add your UMG widget to the device in the Player Info Widget Override field.
Playtest the look of the custom avatar nameplate. It should look something like the following image.
Click image to enlarge.
