You can create custom user interface (UI) elements for your island in Unreal Editor for Fortnite (UEFN) by using a widget Blueprint with the HUD Message device and Pop-Up Dialog device.
There are two widget Blueprint categories for creating a custom UI:
User Widget - Used to create a custom HUD Message.
Modal Dialog Variant - Used to create custom clickable buttons.
The Pop-Up Dialog device will only work with a Modal Dialog Variant Blueprint. A HUD Message device works with both types of Blueprints.
To learn more about the Widget Editor, refer to the UI Widget Editor document.
User Widget
This widget uses the HUD to display a custom UI message to players. Use this to send players on a quest, or as a narrative device for characters on your island. You can add buttons to your message within the workflow for Modal Dialog Variant below.
Drag a HUD Message device into the viewport. The device will be ready to connect to a widget Blueprint.
Create the Blueprint
Right-click in the Content Browser to open the Content Browser menu.
Select User Interface > Widget Blueprint. The widget path opens.
Select User Widget. The widget Blueprint thumbnail appears in the Content Browser.
Rename the thumbnail.
Select the HUD Message device in the viewport, search for the Advanced option HUD Widget in the Details panel, then select your widget Blueprint from the dropdown menu.
Double-click the thumbnail to open the Widget Editor.
Select a Panel widget from the Panel menu. For this example, a Canvas Panel was used.
This step must be done before adding any elements to the widget.
Whatever you place in this panel will display in the HUD Message.
Resize the panel widget by clicking the corner and dragging to the desired size. In this example, the panel is 1920 x 1080 for full high definition (HD).
Click to enlarge image.
Import an image into the Content Browser, then drag the image widget into the Widget Blueprint Editor. This will be your HUD background image.
Resize the image from the Details panel using the Image Size option under Appearance.
Move the image around using the Translation fields. Dragging in the first field moves the image to the left and right. Dragging in the second field moves the image up and down.
Drag a UEFN Text Block widget onto the panel. The text block widget is where you’ll create your custom HUD message.
Where you place the text box widget is where the text will appear on the HUD message.
Add your custom UI message to the Text field in the Details panel.
Add color to your text and change your font style with the Appearance options Color and Opacity, Font Family, and Size.
You can adjust your text further by skewing the letters, using custom letter spacing, or adding an outline or drop shadows to the text.
When your HUD Message device is triggered, your custom UI message will appear in the HUD.
Modal Dialog Variant
This widget uses a button interface to connect a Pop-Up Dialog device and to an Item Granter device to supply players with an item. To begin, drag a Pop-Up Dialog device and Item Granter device into the viewport.
Create the Blueprint
Right-click in the Content Browser to open the Content Browser menu.
Select User Interface > Widget Blueprint. The widget path opens.
Select Modal Dialog Variant. The widget Blueprint thumbnail appears in the Content Browser.
Rename the thumbnail.
Double-click the thumbnail to open the Widget Editor.
Drag a panel widget into the viewport and resize it.
Click to enlarge image.
Drag an image widget into the viewport or import of a weapon or item and drag the image from the Content Browser into the viewport.
Select the alignment of the image. There are different horizontal and vertical alignments.
Translate the image inside the viewport using the Translate tools. Dragging in the first field moves the image right and left, dragging in the second field moves the image up and down.
Drag a button widget into the viewport, select an alignment, then translate the button using the Translation fields.
Name the button in the Text field and add an action in the Text Secondary field.
If you only want to use an action on the button, then add the action to the Text field only. This means your button can simply read "Press Here".
Set the following Selection options:
Selectable - On
Interactable when Selected - On
This causes the buttons to use button behavior when receiving input.
Select the Pop-Up Dialog device in the viewport and search for Modal Widget > Template Override Class in the Details panel. Select the UI button from the Template Override Class dropdown menu.
Set the Auto Display Option to Game Start. When you playtest, the button will automatically spawn at game start.
You can also set this option to Never, then set up another device to trigger the Pop-Up Dialog device.
Select the Item Granter and add the weapon or item to the Item List.
The item you equip should match the image you use unless you use a question mark, in which case you can use any item you want.
Select the Pop-up Dialog device from the Grant Item dropdown menu and select On Responding Button1 from the Function list.
Button Logic
Now you're ready to make the button logic for the widget Blueprint.
Open the Widget Editor.
Click the View Bindings button at the bottom of the editor.
Click Create Viewmodel.
Select Creative Modal Dialog Viewmodel > Select > Close. This adds all the possible button logic you can edit to the widget Blueprint.
Click View Bindings > Add Widget to open the menu for widget selection.
Select the button widget from the Creative Modal Dialog Viewmodel dropdown then click Select.
Select One Way Widget and set to One Way To Viewmodel from the Binding Mode dropdown menu.)
Click in the first field and select Conversion Functions > Get Response Button 1 > Select.
These button numbers refer to the placement in the panel.
Click into the second field and select Creative Modal Dialog Viewmodel > Response > Select.
Select the UEFN button widget you dragged onto the panel from the Field dropdown menu and select Click Event > Select.
Click Compile.
Playtest to ensure the button spawns and works as intended when pressed.