Custom UI and Music

Make your platformer stand out from the rest, by creating your own music and unique user interface!

The music and user interface (UI) should match the type of island you’re creating. If you’re creating an island experience that’s fun and playful, the music and UI should reflect that.

In this experience, the music has an urgency to it to make the player move forward and warn them of their surroundings.

The UI incorporates the color of the plants on the island to give everything a unified feel. The basic shape of the UI looks simple but complements the game without being in the way or distracting from the game.

Custom Music

Patchwork features device prefabs that combine a number of Patchwork devices into music packages. These packages concentrate on rhythm sections that make creating your own music easier.

Patchwork Prefab	Image	Device List	Explanation
Melody Prefab		Note Sequencer Note Progressor Instrument Player Echo Effect LFO Modulator Speaker	Provides a way for you to create a melody by using specific instruments then modifying their sounds.
Bass Prefab		Note Sequencer Note Progressor Omega Synth Distortion Effect LFO Modulator Speaker	Provides a way for you to create a bass section for your melody with the Note Sequencer and Progressor devices, and the Omeg Synth device.
Drum Prefab		Drum Sequencer Drum Player LFO Modulator Echo Effect Speaker	Provides a way to create a drum section to add a beat.

Custom UI

The example island has a custom player UI, coin collection tracker, and pop-up warning. The custom player UI makes the game feel unique and adds to the experience by replacing the default Fortnite UI.

See the Making a Custom HUD tutorials to create your own player UI.

The custom coin tracker is a fun way for players to see how many coins they’ve collected. 

To create your own Collectible tracker, see the Conversion Functions: To Text (Int) and To Text (Double) tutorial from the Using the Viewmodel tutorials.

Pop-Up Warning

The pop-up message warns players when the time of day jumps forward into night and the game switches from platformer to survival mode. The message in the pop-up tells players that the time is about to switch and what that means. 

To create your own popup messages in UMG, see the Modal Dialog Variant tutorial in the UI Pop-Ups document.

To create your own pop-up message, you’ll need the following widgets:

• Overlay

• Image

• Text

• Quiet Button

To bind the Quiet Button to close the popup after it displays, follow the instructions below:

1. Open Window > View Bindings.

   

2. Select the Quiet Button in your widget, then click +Add Widget in the View Bindings window.

   

3. Click the left field that contains the Quiet Button and select Click Event > Event from the Binding dropdown menu. This automatically decides the direction of the interaction for the button and creates an event on the Quiet Button.

   

4. Click in the empty right field and select CreativeModalDialogViewmodel > Response > Select. The Response to the event appears below.

   

5. Click in the empty Response field and select Button 1 from the dropdown menu. Both the event and response are now connected to the Quiet Button.

   

The widget is now complete and ready to be used with the Pop-Up Dialog device.

Add the Widget to the Pop-Up Dialog Device

Add a Pop-Up Dialog device to your project. Ensure the Pop-Up Dialog device is selected in the Outliner panel before you modify its properties.

In the Details panel, set the following options:

1. In the Response dropdown menu select Button1.

2. Set the Default back button option to Button 1.

3. Add Button 1 Text, then type Close in the empty field.

4. Change Enabled During Phase to Gameplay Only.

5. Scroll down to the Modal Widget section and select your pop-up widget from the Template Override Class dropdown menu.

For the pop-up warning that warns players about the time switch and what they can expect after the time switches, set the warning to display before the player steps on the trigger.

Direct Event Binding

Device A	Function	Device B	Event	Explanation
Pop-up Dialog	Show	Collectible Object	On Collected	The warning pop-up displays when the player collects the coin.