Create custom UI with the base M_UI_Shape_Rectangle material by making material instances from the base material to be used in UMG widgets. The shape material also provides a way for you to make flat shapes that can be used to create unique UI designs. The M_UI_Shape_Rectangle material is located in the Content Browser under the Fortnite folder in UI > Materials.
Material instances can be used to fill a widget like paint. Materials are preferable to adding textures to widgets because materials use less memory than imported textures. Materials are also a better way to design UI in UEFN and UE, especially for a flat UI design because it's easier to render, not to mention you can get fancy with 3D and dynamic materials.
UMG widgets are referenced in special UI settings on a few devices in Unreal Editor for Fortnite (UEFN). The UMG widgets replace the default Fortnite UI in the heads-up display (HUD).
For more tutorials on using materials to create UI, refer to the following:
Creating Custom UI Shapes
Before creating a custom UI shape, decide how you want the UI to look, then use the M_UI_Shape_Rectangle material to design the look of your UI widget. This could be something as simple as a customized square or something more intricate like a flower shape. Designs may require multiple shapes that can then be positioned together when you create your widget.
To create shapes, you must first create a material instance of the original M_UI_Shape_Rectangle material.
Right-click the material thumbnail and select Create Material Instance.
In the Save Asset As window, name your material instance which will be saved to your project's content folder. Name your assets in a way that groups them together. For example, stock material instances in UEFN start with "M_UGC_" and end with "_Inst". Your material instance name should look something like M_UGC_Circus_Inst.
Double-click your new material instance to bring up the Material Instance Editor. You can also access the editor by right-clicking the asset and selecting Edit.
The Details panel of the Material Instance Editor has the tools you'll need to fully customize material instances. These tools are found in the sections:
[1]Fill
[2] Stroke
[3] Colors
[4] State (Hovered/Focused/Pressed/Disabled)
Fill
Options in the Fill section affect the shape of your material. For many options like Fill Transparency, a 0.0 value will deactivate the setting while a 1.0 value will activate it. Always remember to activate the Fill Transparency option so your shape will show in the Viewport.
In the image above, you’ll see the adjusted settings that were used to create a shape.
Stroke
Options in the Stroke section can be adjusted to create a customizable border. Due to the preset blue border color, you'll be able to see your design as you adjust the Stroke's option values.
The image above shows the Stroke Transparency option set to 1.0 to display a blue border.
Colors
Options in the Color tab can be altered to further customize the shapes you create. These options can only be adjusted once you set the option to "On" by clicking its corresponding boolean box.
You can even create gradients for both shapes and borders. You can preview gradients as they are altered in the Viewport.
In the image above colors are applied in gradients. This option is activated by adjusting the Gradient on/off value above 0.0.
State
This option is located in the Color section and can modified to set the shape's colors through various states. You can set custom colors for different player actions, such as hover, focus, press, or disable your UI shape.
Unless you set a material for the Phys Material option, your shape will have a transparent boundary when imported into the widget you create. To avoid this, set your physical material as Wood so it can be rendered as an actual material.
After you’re done customizing your UI shape, remember to save by clicking the floppy disk icon in the top right corner. Your customized material instance will save to your project's content folder.
This tutorial's example uses shapes that combine to make up a sunflower along with a button background.
Creating UI Widgets
Now you’ll need to create widgets for players to interact with. Read the UI Widget Editor doc to learn more about creating widgets and organizing the Hierarchy tab.
At this point, you should have created material instances for every element of your design.
This tutorial's example consists of multiple instances of a flower petal and a flower disk. The button consists of a base and two images that are used as button icons.
These material instances will be arranged in widget blueprints to create a custom design. The widget blueprint is what will be imported into the Pop-Up Dialog device to override the pre-stock UI.
Create a new widget blueprint that will hold both the material instances and the button widgets that make up your custom UI. This will be the widget blueprint that is added to the device's settings.
In this widget, combine all of your custom material instances to create your design. As you create your UI widget, drag assets from Common, Common UI, Panel, UIKIT, and User Created underneath your widget name.
In the photo above, assets are organized in the Hierarchy tab and repositioned in the viewport to make a flower shape for the custom UI.
After you are satisfied with your design, save your blueprint and navigate back to your Content Browser. This blueprint will now be imported into a Pop-Up Dialog device that will display the custom UI.
Adding Widgets to Devices
Once your design is ready, place a Pop-Up Dialog device to display your widget.
Drag your widget into the Details > Modal Widget > Template Override Class.
You can view and test your creation through a launched session.