Create custom Health and Shield bars in Unreal Motion Graphics (UMG) using UI materials, UI textures, and various widgets in the palette to replace the default Fortnite user interface (UI). Health and Shield bars can be added to a nameplate or placed separately in the HUD.
The design and placement of Health and Shield bars are unique to each game and take into consideration the game type (fighting game, multiplayer cooperative, role playing, and so on).
Set Up Material Instances Without Modifying Materials
In this example, you’ll use a variety of materials that were created in UEFN. They include a progress bar in the shape of a rectangle (box) and circle. The rectangle progress bar also has an option to turn the progress bar into sections.
Materials were set up using a combination of Material Functions from the UI Material Lab, parameters that are exposed to the Material Instance, and some math to get it all working.
It's best practice to use materials for widgets. Materials update dynamically based on gameplay data, which helps in optimizing UI and provides a way to add special effects. Textures are only used for a more complicated design that can’t easily be achieved with math functions.
For more information on using materials as part of your UI design and implementation, see UI Useful Materials. The tutorial has more information on using Signed Distance Fields (SDFs) for creating dynamic progress bar Materials in UEFN and UE.
A Material Instance creates instances of a material with parameters that can easily tweak the appearance of that material without recompiling it. To create an instance of a material, right-click on a Material and select Create Material Instance.
More info about Material Instances, refer to Creating and using Material Instances in Unreal engine documentation.
There are a few parameters exposed in UEFN. In the example material, the Progress parameter changes how much the bar is filled up. The range is normalized to 0-100 using the ConstantBiasScale node in the M_CircleProgressBar so it fits into the Fortnite HP range.
You can change the Background Color (BGColor) and the Liquid Color which are gradients. Afterward, preview your changes in the preview viewport on the left.
You can make as many Material Instances you need for various purposes. In this example, two materials are used, one for HP and another for Shield.
Widget Layout Best Practices
In UMG only, use the Canvas panel if you need an absolute position on the screen or need to finely manipulate where various widgets are placed.
For smaller widgets use:
Overlay
Stack Boxes
Size Boxes (if you need to constrain your widget to a specific size)
Grid Panel (if you want to maintain sizing of your container but want to manipulate position of child widgets)
Once the materials are ready, create a Widget Blueprint in the Content Browser, then double-click the widget thumbnail to open the UMG Editor.
Using a Canvas Panel
In this example, the Canvas panel is used to place the Health and Shield bars in an absolute position on the HUD by anchoring the widgets to certain parts of the screen.
For individual HUD elements, it’s best practice to use a combination of the following widgets:
Overlay - If you need to overlay a widget on top of one another
Stack Boxes - If you need to lay your widgets out horizontally or vertically
Size Boxes - If you need to constrain your widget to a specific size
Grid Panel - if you want to maintain sizing of your container but want to manipulate position of child widgets inside it
With this in mind, start laying out the Health and Shield widgets.
Create a container for the entire HUD UI to live in, for this use a Canvas Panel as the container to house all the individual HUD elements.
For this example, the Health and Shields will be anchored to the bottom center of the screen.
Nest a Stack Box under the Canvas to create the container for Health and Shields. For this design these elements will be stacked left to right.
If you want to layout your widgets in a Stack Box vertically, change the Orientation setting in the Details Panel under Behavior > Orientation.
Rename your widgets by selecting them and pressing F2 as you add them to your Hierarchy for better organization.
Select the Stack Box in the Hierarchy, and in the Details panel you should see an Anchors option. Open the option by pressing Shift + Control. Anchor the Stack Box to the bottom center of the HUD by selecting the option in Row 3, Column 2.
The Stack Box should be anchored to the bottom now. The flower icon shows where the widget is anchored in the Canvas Panel.
Shift the Stack Box upward so it’s not stuck to the bottom edge of the screen. Do this by editing the Position Y option.
Positive values shift the widget down, while negative values shift it up.
Check the Size To Content checkbox to ensure the container always resizes to the content inside it.
Setting up the HP Bar and Text
Now that the Health and Shields container is ready, set up the Health and Shields widget.
Nest an Overlay under the Stack Box and rename it HPOverlay. This causes the HP Text to overlay the round HP bar.
Nest an Image under HPOverlay and rename it HPBar. This provides a way to add the Material Instance you made above to your widget.
Select HPBar in the Hierarchy, in Details under Brush> Image select your custom Health bar Material Instance.
To change the size of the Material Instance, you can customize the Image Size property below.
Nest a Text Block under HPOverlay and rename it HPText. This provides a way to add text on top of the circle Health bar.
Select the Text Block and in Details set the Horizontal and Vertical alignment to Centre. This ensures the text is always center-aligned to HPBar.
Click to enlarge image.
Change the font size under Appearance > Font > Size so it fits into the HP Bar.
Click to enlarge image.
Click Compile. Now you have a HP Bar and HP Text ready!
Setting Up the Shield Bar and Text
To set up your Shield Bar and Text, repeat the same steps above. This time add a space between the HP Bar and Shield Bar. Since HPShieldsContainer is a Stack Box, it automatically lays out child widgets horizontally.
Use an Image widget inside the Stack Box to add a space between your Health and Shield bars. Set up the blank Image widget by doing the following:
Nest an Image under the Stack Box.
Set the Image’s Brush properties to Draw As to None.
This means that nothing will show up in your widget but the Image widget still takes up space in your layout! This allows you to easily manage spacing between elements in a Stack Box without needing to rely on padding.
Set up the Shield Widget using the same process as the Health bar.
To create the Shield bar quicker, duplicate the HPOverlay by right-clicking on HPOverlay in the Hierarchy and selecting Duplicate.
Nest the ShieldOverlay under the Spacer Image so it appears at the end of the Stack Box.
The two types of bars appear side-by-side in your widget!
Rename your variables to ShieldOverlay, ShieldBar, and ShieldText as seen in the widget Hierarchy image below.
Now you’re ready to create the bindings that add functionality to the Health and Shield progress bars.
View Bindings
Adding a Viewmodel
A viewmodel provides a way for you to add device functionality to a Widget Blueprint. The viewmodel uses View Bindings to identify widgets in the blueprint and graph device functionality to that widget.
The HUD Controller Player Info Viewmodel provides a way to replace parts of your HUD with a custom widget.
Select Window > Viewmodels to open and add a Viewmodel to your widget.
In the Viewmodel window, select +Viewmodel. This opens a popup showing all the Viewmodels currently available for use.
There are two types of HUD Controller Viewmodels available:
Select Device - HUD Controller Team/Squad Player Info List Viewmodel from the HUDPlayerInfoListViewModel options. Based on the information above, you only want to display the information for the Controlling Player and not their Team/Squad.
Select Device - HUD Controller Player Info Viewmodel if you want to create separate widgets for the Controlling Player and their Squad/Team, use properties in Device - HUD Controller Player Info Viewmodel for each of these widgets. You will then need to create a Squad stack widget that binds the Team/Squad Player Info List viewmodels to their viewmodels.
The Team/Squad Player Info List Viewmodel has the same information as the HUD Controller Player Info Viewmodel, but is used differently based on the scenario.
Select Team/Squad Player Info List Viewmodel from the HUDPlayerInfoListViewModel options. Based on the information above, you only want to display the information for the Controlling Player and not their Team/Squad.
Now it’s time to set up the bindings that bind data from the viewmodel to your widget!
Set Up ToText View Bindings
Select Window > View Bindings to open the View Bindings window.
Select HPText in your Hierarchy and select Add Widget in View Bindings to bind HPText to show your current Health number. An empty binding appears.
The left box is the Widget Property and the right box is the data you want to bind to the Widget Property. Click the left box, and a list of properties for the HPText Text Block will appear. Select the Text property to pass the HP numbers into this property.
The right box is the data you want to pass into the selected widget property. However, the Text property only accepts data of the Text type. Since the Fortnite HP number comes in a Float (i.e. Double) type, you need to convert it into the appropriate Text type. Click the right box and select Conversion Functions > To Text (Double).
A large list of options appear. The most important settings are typically at the top, while the rest of the settings provide a way for you to format the final value that gets passed into your Text property.
Click image to enlarge.
Select the Link icon next to Value, then select your Health value from the HUD Controller Viewmodel.
Click the empty field and select HUDPlayerInfoListViewmodel in the left column, expand Controlling Player Info on the right, and select Health.
This passes the Health property–a Float (i.e. Double) type, through the To Text (Double) Conversion Function. To Text (Double) converts Health into a Text type so it displays on the widget. The converted Health is then passed into the Text property of your HPText widget.
Repeat the steps above to set up the ShieldText widget. The same bindings will show the Shield numbers as well.
Set Material Parameter
For more details on how Set Material Parameter works, refer to Set Material Parameter in Unreal Engine documentation.
Now it’s time to set up the Circle progress bar. The progress changes based on player Health and Shield levels.
Set up an empty binding to your circle HPBar.
In the left box, select HPBar > Brush. The Brush contains the Material Instance of your circle HP bar.
In the right box, select Conversion Functions > Set Scalar Parameter.
In Parameter Name, enter the name of the parameter that changes the progress of your progress bar.
To look for this parameter name, open the Material Instance of your HP Bar and look at the Parameter Values on the right.
The parameter that controls the progress bar is called Progress. Enter that name into the Parameter Name field.
It is important that your Parameter Name is the same as the parameter in your Material Instance, otherwise the material won’t work in-game.
Select the Link icon next to Value. Similar to ToText, bind the Health of the player to Value.
This is the final result of binding the Health and Shield stats in the viewmodel. Now, whenever the player’s health changes, it will pass the Health property into the HP bar Material Instance and update the Progress scalar parameter.
Repeat the same for your ShieldBar. Instead of binding it to the Health property, it should be binded to the Shield property.
Now your HP and Shields bindings are set up! It’s time to display your widget on your HUD.
HUD Controller Device Setup
Place a HUD Controller Device in your level.
In the Details panel for the device, ensure that:
Show HUD = Yes
In the Player Info Widget Override field, use the widget that contains the custom Health and Shields.
Click image to enlarge.
Select Launch Session, you should see the Health and Shields widget on your HUD! Test your UI by taking damage and seeing it update your stats in the HUD.
Other Examples of Progress Bars
The Rectangle material can be found under Fortnite > UI > Material, you can customize the basic box to use as background in many forms, for any widget!
Create a Material Instance from this and start using it with UMG!
Using the information here and the Materials we provide you with, try making these Progress Bars:
Using a texture as a background to frame your Player Avatar, Display Name, and HP Bar.
Using a combination of textures, icons, progress bar Materials, and the Rectangle material under Fortnite > UI > Material to stylize basic progress bars.
Sectioned HP and Shield Bar along with the Player Avatar and Display Name.
