Create dynamic UI with changing materials that update based on gameplay events and data. To make your UI dynamic, you need to use a combination of UI materials, View Bindings, and three of the Set Material Parameter conversion functions (Set Texture, Scalar, and Vector Parameter).
In Unreal Editor for Fortnite (UEFN) you’re given a basic Material with a number of Parameters. Use the Tracker device to track eliminations in a progress bar style widget as an example of a material that dynamically updates based on your progression in eliminating enemies.
Create a Material Instance
For more information about material instances, refer to Creating and Using Material Instances in Unreal Engine documentation.
All assets used to create these material instances can be found natively in UEFN. To learn how to make the material in this example, refer to Meter Material in the Material tutorials section.
Create a Material Instance of M_Tracker, name the material instance, MI_TrackerExample.
In the new Material Instance, change the IconScaleX and IconScaleY based on your preferences. The materials in this example were set to 0.7 each.
You can customize the elimination ProgressColor that fills the widget based on your progress. Leave TrackerProgress, Icon, and IconColor unchecked. These will be used later with the Tracker device.
Icons can be found under the Fortnite folder in Textures > Icons.
Setting Up the Tracker Widget
You'll create a custom Tracker widget in UMG that can be referenced in the Tracker device and track the players eliminations in the custom elimination UI.
Right-click in the Content Browser and select User Interface > Widget Blueprint > User Widget.
Make a simple Tracker widget that shows the Tracker Material and a Tracker title like in the example below.
Drag an Overlay into the widgetgraph. This layers all the pieces that make up the widget. It also provides a way for you to determine where on the screen this widget appears.
Nest a Stack Box inside the Overlay so you can lay out the Tracker Material and Title left-to-right.
Nest an Overlay inside the Stack Box so you can create a Tracker Material to overlay the Stack Box with a simple dark background.
Inside the Overlay, nest two Image widgets. Press F2 to rename them TrackerBackground and TrackerMaterial.
Select TrackMaterial to open its options in the Details panel. From the Details panel, select Brush > Image and look for the MI_TrackerExample material you created.
Set the Image Size below to X=96.0, Y=96.0. It should be large enough to be seen in-game.
Now that the Tracker material is set up, you need to create the background for the material so the Track material is more readable.
Select TrackerBacking, and in the Hierarchy, then from the Details panel select Brush > Draw As > Rounded Box.
Set the Tint option above to a neutral color for better readability. In this example, the tint was set to 3A3A3AFF in the Hex sRGB field.
Set the Horizontal Alignment and Vertical Alignment options to Fill. This ensures TrackerBacking fills the container that holds the TrackerMaterial.
Now you have a background for your TrackerMaterial that looks easily readable on any in-game scene!
Setting Up the Tracker Text
After the Tracker material is referenced in the Tracker widget, you'll set up text that informs the player what is being tracked in the UI.
Nest a Text Block to the Stack Box that holds the Overlay. Rename the Text Block to TrackerTitle.
Select TrackerTitle in the Hierarchy, from the Details panel set the Vertical Alignment to Center Align Vertically. This ensures that the text is always center aligned to the TrackerMaterial.
Make some stylistic changes to the font by reducing the size, adding an outline, or changing the typeface to make it fit your theme.
In this example, the following changes were made: Font Size = 24 Typeface = Bold Outline = Dark Red
You can customize all the settings related to the Font under the Appearance category.
Once all the final design touches are complete, you should have the TrackerMaterial and TrackerTitle set up.
To add some space between both items, add padding on the Right to the Overlay containing the TrackerMaterial:
Select the Overlay.
From the Details panel, expand Padding.
Change Right Padding to 16px.
Space is added between the image and the text.
If you want to easily modify spacing between multiple objects, you can insert an Image widget into the Stack Box that holds these objects, set the Image Size X to however much space you want, and set it to Draw As None. What happens is the Image doesn’t show up but it still takes up space in your Stack Box!
It makes it easier to manage spacing between objects and not hunt down Paddings in each widget.
Setting up Set Material Parameters
Next you'll bind the values of the Tracker device to the material parameters in the Tracker widget.
Adding a Viewmodel
Add the Tracker viewmodel to the widget by selecting Window > Viewmodel from the main menu.
In your Viewmodel window, select +Viewmodel.
In the popup window, select Device - Tracker View Model.
From the menu bar, select Window > View Bindings to open the View Bindings panel.
You’re ready to start binding the data from the Tracker to manipulate your widget.
Set Scalar Parameter
A Scalar Parameter takes in an Int or Float value. For example, the progress bar fills with the TrackerMaterial based on how many eliminations you have in the Tracker.
The Material is set up to convert the number of Eliminations from the Tracker device to fill up the TrackerMaterial. All you have to do is bind that data to the Progress material parameter in MI_TrackerExample.
A Progress of 3.0 vs 8.0 in MI_TrackerExample. This is very handy!
Select the TrackerMaterial widget, then click on +Add Widget from the View Bindings window.
In the left field select TrackerMaterial > Brush.
In the right field (containing the data you want to bind to the TrackerMaterial’s Brush), select Conversion Functions > Set Scalar Parameter.
This runs the function called Set Scalar Parameter on the Brush setting. Since your Brush currently has MI_TrackerExample, it will look for a Scalar Parameter that you specify and pass a value into it.
Type TrackerProgress into the Parameter Name field, this causes the material to fill based on the Tracker’s progress.
It’s important that you don’t make errors in the parameter because it won’t be able to find the right parameter on your material. If you forgot what your parameter is called, open the Material Instance and look for parameters on the right.
Select the link icon next to Value, select MVVM_UEFN_Tracker > Value from the dropdown menu. This binds the Tracker’s current progress.
You now have your current Tracker progress feeding directly into your material! The Tracker Material will slowly fill up when the player assigned to the Tracker gets an elimination!
Set Vector Parameter
A Vector Parameter takes in a Vector4 value. Vectors are typically used for colors - RGBA (the four vectors), you’re going to use a Vector4 to change your icon color based on what is set up in the device.
For more information about Vectors, refer to Vector Material Expressions in Unreal Engine documentation.
Select the TrackerMaterial in the Hierarchy, then open the View Bindings window and select +Add Widget.
Select the TrackerMaterial > Brush properties in the empty field on the left.
Select Conversion Functions > Set Vector Parameter in the empty field on the right.
As explainned above, this binding gets the Brush from the TrackerMaterial (in this case, it’s MI_TrackerExample), and sets a Vector Parameter that you specify on that material instance. You can set the icon color to follow whatever options the Tracker device has set.
Type IconColor in the Parameter Name field.
Select the link icon next to Value, then select MVVM_UEFN_Tracker > Color. This sets the Value to the Icon Color property from the Tracker Viewmodel.
Whatever Icon Color that’s set on the Tracker device is passed to your material. If you want an orange icon, just set it on the device and it will color it for you! The material used in this example is already set up for that.
Set Texture Parameter
A Texture Parameter takes in a Texture2D value. Textures are typically used for images or icons, so we’re going to use it to change our icon based on what’s set up in the device!
For more information about Textures, refer to Textures in Unreal Engine documentation.
Select the TrackerMaterial in the Hierarchy, then in the View Bindings window select +Add Widget.
In the empty field on the left, select MVVM_UEFN_Tracker > Brush.
In the empty field on the right, select Conversion Functions > Set Texture Parameter.
Type Icon in the Parameter Name field.
Avoid errors when typing the name of the parameter! If you forget the parameter’s name you can look at the MI_TrackerExample for the list of parameters available to be set.
Select the link icon next to the Value field and select MVVM_UEFN_Tracker > Icon from the dropdown menu. This ties the value to the Icon property from the Tracker Viewmodel.
The Texture Parameter is set. Now whatever icon is set in your Tracker device will pass it into the widget!
Bind Tracker Text to Tracker Name
Next you'll bind the Tracker title you created to the same setting in the Tracker device.
Select TrackerTitle in the Hierarchy, then open the View Bindings window, and select +Add Widget.
In the empty field on the left select TrackerTitle > Text from the dropdown menu.
In the empty field on the right selectMVVM_UEFN_Tracker > Name from the dropdown menu.
This binding passes the title of your Tracker to the Text Block.
Setting Up the Tracker Device
Next, you'll reference the widget you created in UMG in the Tracker device. This causes the elimination UI to display in the HUD.
Add a Tracker device to your project.
Give the Tracker Title a name. This name displays in the TrackerTitle text in your widget.
Add your widget to the HUD Widget field.
Change the Quest Icon fields to any icon you want to display on your Tracker. This overrides the default Alien icon on the MI_TrackerExample.
Select a color in Icon Color. The icon you set above takes on the selected color.
Continue to set up the other settings to add the Tracker to your player.
Final Result
Voila! You have the custom Tracker widget appearing on the top left. Whether you eliminate zombies or other players, the widget slowly fills up! That’s how you link gameplay data to your own custom widgets using Set Material Parameters.
