The Meter material is perfect for use in UI. This material can be referenced in a UMG Image widget to track your health, eliminations, or collection of in-game goods and currency. Use this tutorial to create your own Meter material and use it in a custom UI design.
This material can override the default Fortnite look with the custom material you create for tracking player health, shields, or another type of player centric statistic.
This material uses icons in its design. Unreal Editor for Fortnite (UEFN) comes natively with numerous icons. Find the icons under the Fortnite folders Textures > Icons.
Create a Material
All materials are created in the Content Browser. To organize your project, create a folder to house all your materials.
Right-click in the Content Browser to open the Context menu.
Select Material from the Context menu.
Name your material M_Meter.
Double-click the material thumbnail to open the Material Editor.
To create the meter material, you’ll need to download the UI Material Lab from Fab.
For more information about material nodes and how they work, refer to Material Nodes and Settings.
Material Nodes
The following is a list of the material nodes used in this tutorial and their purpose in the final product. To skip this explanation and start creating the material, click here.
| Material Node | Purpose |
|---|---|
Adds a color to the Icon and Progress Fill. | |
Used to add a background mask underneath the Icon. Also used as a Progress Bar to mask out the background according to the progress. | |
Provides a way to add a texture to the UI material. | |
Used to overlay the colored Icon on top of a background color, as well as create the mask for the Icon on top of the background. | |
Outputs the icon’s UV texture coordinates in the form of a two-channel vector value. | |
Material Function > UI Scale | Texture functions are a subcategory of the Material Function node. This provides a way to scale the UVs of the icon. |
Material Function > UI SDF Circle | Provides a way to mask the progress bar behind the icon and how much of the circle fills with the background color. Typically, this Material Function is used to draw a circle in the material. Can be replaced with other SDF Shape material functions (for example, UI SDF Box) from UI Material Lab to generate a different shape. |
Used to scale the X and Y axes of the Icon evenly, where we append 2 Scalar Parameters. 1 for scaling the X of the icon and another for the Y of the icon, and connect them to MF_UI_Scale. | |
The UVs of the icon are clamped between 0 to 1 to ensure the icon doesn’t wrap or tile. | |
Used to create a 0-10 range for the Progress scalar parameter on the Tracker device. The ConstantBiasScale takes in the set value from teh Parameter and deducts the Bias value, and multiplies it by the Scale value. | |
A Multiply node takes two inputs and multiplies them together, and outputs the result. In this example, the RGB channels of a Texture are multiplied by a Vector3 node to colorize the backgroundt. Additionally, the LinearGradient is multiplied by a Vector3 to colorize the icon. | |
Step | Creates a threshold for the X and Y coordinates. The threshold creates a container for the background material in the UI. The Step nodes turn values above a threshold to 1, and below the threshold to 0. This outputs the mask for a progress bar where there’s a clear separation between a filled and unfilled area. |
Takes in Linear Gradient’s UGradient values and rounds them up to the next integer, and outputs the result. This lets us easily create a basic solid background. | |
Constant | Provides a way to add a value to a material attribute. |
Prepare the Main Material Node
Before adding any material nodes, prepare the material to be used in UI by changing settings on the Main Material Node (MMN). The settings on the MMN determine which inputs are available on the MMN and where the material can be used.
Select the MMN node.
In the Details panel of the Material Editor, set the Material Domain to User Interface.
Set the Blend Mode to Translucent.
Click image to enlarge.
Set Up Progress Color
Begin the meter material by setting up the Progress Color, that can be identified in UMG through the Image widget. You can usethis Progress Color to create a custom UI design.
Right-click in the Material Graph to open the node menu.
Type Linear Gradient into the search bar. Select LinearGradient from the dropdown. The node appears on the graph.
Repeat steps one and two to add the following nodes to the Material Graph:
Ceil
Multiply
Constant3vector
Drag off the white pin on the Constant3Vector node and plug into the A input on the Multiply node. The shape in the viewport changes color.
Select the Constant3Vector material node in the Material Graph. The node highlights in the graph to indicate you’ve selected it.
Click in the Black square on the node to open the Color Wheel. Select a color from the Color Wheel for the material.
Drag off the UGradient pin on the Linear Gradient node and plug into the left input on the Ceil node.
Drag off the right pin on the Ceil and plug into the B input on the Multiply node.
This node configuration provides the color for the UI container.
Right-click in the graph area and add a LinearInterpolate node to the graph.
Drag off the Multiply node and plug into the A input on the first LinearInterpolate node.
This part of the material is used to track progress in a meter by filling up the background of a container.
To group nodes together and move as a unit, do the following:
Left-click and drag around a group of nodes. All nodes selected highlight.
Grab a node and drag around the graph, all selected nodes move together as one piece.
Set Up Icon Scaling and Color
For this section of the material you’ll choose and scale an icon,and select a color for the icon in the material and in the UI. Icons can be found in the Fortnite > Textures > Icons folders.
Right-click in the graph area and add the following nodes to the graph:
TextureCoordinate
AppendVector
Clamp
TextureSample
Constant3vector
Multiply
Constant
Select the Constant node in the graph, then right-click and select Duplicate from the dropdown. Another Constant node appears on the first one. Move the duplicate underneath the original.
Duplicate the Multiply node.
Duplicate the LinearInterpolate (Lerp) node.
Select the top Constant node in the graph and add a Default Value of 0.7.
Right-click on the node and select Convert to Parameter from the dropdown. Name the parameter IconScaleX. This node will control the scale size for the X coordinates of the icon.
Select the bottom Constant node in the graph and add a Default Value of 0.7.
Right-click on the node and select Convert to Parameter from the dropdown. Name the parameter IconScaleY. This node will control the scale size for the Y coordinates of the icon.
Drag off the IconScaleX parameter node and plug into the A input on the AppendVector node.
Drag off the IconScaleY parameter node and plug into the B input on the AppendVector node.
The IconScale X and Y values set in the parameter node can be controlled outside the material when turned into a Material Instance.
Next you’ll need to create a Material Function node to add a function to the material that scales the UVs of the icon.
Set Up a Material Function: UI_Scale
In this step you’ll learn how to create a Material Function and search for functions to use with the node.
Right-click in the graph and type MaterialFunction in the search bar. Select MaterialFunctionCall from the dropdown. The MaterialFunctionCall node appears in the graph.
In the Details panel, click on the Material Function dropdown menu and type UI_Scale into the search bar, then select MF_UI_Scale from the dropdown. The MaterialFunctionCall node turns into the UI Scale node.
The UI_Scale function provides a way to increase or decrease the scale of the icon’s UVs using Material Functions. Material Functions can only be used in a material through the Material Function node.
Set Up Icon Uvs
Next you’ll add an icon and icon color to the material that will be scaled when taking in the information from the parameters and UI Scaling.
Drag off the TextureCoordinate node and plug into the UVs (V2) input on the MF_UI_Scale node.
Drag off the AppendVector node and plug into the Scale (V2) input on the MF_UI_Scale node.
Drag off the Result pin on the MF_UI_Scale node and plug into the white input on the Clamp node.
Select the Texture Sample node to open its options in the Details panel.
Open the Texture dropdown.
Type "icon" in the search bar.
Select an icon from the dropdown.
Drag off the white pin on the Clamp node and plug into the UVs input on the Texture Sample node.
Drag off the RGB pin on the Texture Sample and plug into the A input on the first Multiply node.
Drag off the A pin on the Texture Sample and plug into the B input on the first Multiply node.
Drag off the A pin on the Texture Sample node again and plug into the Alpha input on the second LinearInterpolate (Lerp) node.
Drag off the first Multiply node and plug into the B input on the second Multiply node.
Select the Constant3Vector node to open its options in the Details panel.
Click in the Constant field to open the Color Wheel.
Select a color for the icon from the Color Wheel.
Drag off the white pin of the Constant3Vector node and plug into the A input on the second Multiply node.
Drag off the white pin on the second Multiply node and plug into the B input on the first LinearInterpolate (Lerp) node.
Drag off the white pin on the first Multiply node and plug into the Alpha input on the first LinearInterpolate (Lerp) node.
Drag off the white pin on the first Multiply node and plug into the B input on the second LinearInterpolate (Lerp) node.
Drag off the white pin on the first LinearInterpolate (Lerp) node into the Final Color input on the Main Material Node.
The icon now appears in the material preview window.
Next you’ll set up the mask for the progress bar. This works by revealing only the portion of the material that corresponds to the increase in eliminations, just like in the gif below.
Set Up a Progress Bar Mask
The last step of the material is creating a mask for the progress bar that can be called in a widget or in Sequencer to animate the UI material causing the progress bar to fill with the material color as the player eliminates enemies.
You need to create space for the next series of nodes. Select all the currently existing nodes by left-clicking and dragging around them, then move them to the left as one group.
You’ll need to plug the mask set up into the second LinearInterpolate (Lerp) node. Select the second LinearInterpolate (Lerp) node and move it right toward the Main Material Node. Below is what the node configuration should look like at this point.
Click image to enlarge.
For this section of the material, you’ll need to mask properties of the material based on their X and Y coordinates in the container. These coordinates will also be used to reveal the material as the player eliminations increase.
Right-click in the graph area and add the following nodes to the graph:
Constant
ConstantBiasScale
LinearGradient
Step
Multiply
Select the Constant node and right-click on the node and select Duplicate from the dropdown.
Select the first Constant node and give it a value of 5.0.
Right-click the node and select Turn into Parameter.
Name the parameter TrackerProgress.
This parameter will be used in UMG and Sequencer to track the player’s eliminations and cause the material to be revealed in the container.
Drag off the white pin on the Tracker Progress node and plug into the ConstantBiasScale node.
Select the ConstantBiasScale node, and in the Details Panel, set the Bias value to 0, and scale to 0.1. This normalizes TrackerProgress to the 0-10 value of the Tracker.
Drag off the ConstantBiasScale node and plug into the Y input on the Step node.
Drag off the VGradient pin on the LinearGradient node and plug into the X input on the Step node.
Drag off the white pin on the Step node and plug into the B input on the Multiply node.
Select the second Constant node and give it a value of 0.9.
Right-click in the graph and type MaterialFunctionCall in the search bar.
Select the Material Function node so its options open in the Details panel.
Type UI_SDF_Circle in the search bar.
Select UI_SDF_Circle from the dropdown.
This material function controls the size of the container through the Constant node and determines the shape of the material container. In this case, it’s a circle container.
Drag off the second Constant node and plug into the Size(s) input on the MF_UI_SDF_Circle node.
Drag off the Fill pin on the MF_UI_SDF_Circle node and plug into the A input on the Multiply node.
Drag off the white pin on the Multiply node and plug into the A input on the second LinearInterpolate (Lerp) node.
Drag off the white pin on the second LinearInterpolate (Lerp) node and plug into the Opacity input on the Main Material Node.
The material is complete, the complete node configuration should look like the image below.
Click image to enlarge.
To use this material with UMG, turn it into a Material Instance. A Material Instance’s parameters can be overridden, turned on or off, and called in UMG and Sequencer to animate the UI the material is used with.
To make a Material Instance:
Right-click on the material thumbnail in the Content Browser.
Select Create Material Instance from the dropdown.