Tappable Custom HUD Widgets

You can make any custom HUD widget respond to taps on touchscreen devices and an associated keybind input when using a gamepad or keyboard. Use a Custom Button built using UMG or a Verse Button to make a HUD element like a hotbar slot, gem counter, reward notification, or inventory icon respond to player taps and run Verse logic directly.

This page covers how to make UI widgets in Unreal Motion Graphics (UMG) that respond to touch input. Unreal Editor for Fortnite (UEFN) uses a combination of Verse UI and Unreal Motion Graphics to author UI.

Use this whenever a HUD element should respond to player taps. Common cases include opening a shop from a currency counter, claiming a reward from a notification, or invoking a quick action from an inventory icon.

How it Works

The feature allows both the Verse UI button and UMG Custom Button widget to support touch input during gameplay natively. To use the feature, assign a Triggering Input Action to the button. When the player interacts with the button, the Input Action fires, triggering the On Click event of the button.

This means your hotbar and HUD buttons work across all input modes with a single setup.

Make a Custom HUD Widget Tappable

The following sections explain how you make custom HUD widgets tappable using both UMG and Verse UI.

Using UMG

1. In UMG, open the User Widget for your HUD element.

2. Add or use an existing Custom Button widget.

3. In the Details panel under Input, set the Triggering Input Action property to the Input Action you want the interaction to fire.

   

4. Add a Verse Field event to the widget.

   

5. Set up a UMG data binding to fire the Verse Field event when the button is interacted with. In the below example, the On Clicked events of 4 Custom Buttons in UMG have been configured with data bindings to each fire an associated Verse field event.

   

6. In Verse, write code to respond to the Field event and add the associated mapping context.

   Verse

   using { /Fortnite.com/Devices }
   using { /Verse.org/Simulation }
   using { /UnrealEngine.com/Temporary/Diagnostics }
   using { /Verse.org/Input }
   
   #Defines an event that can be canceled and handles canceling it.
   cancelable_event := class:
       Event:event() = event(){}
   
       Cancel():void=
   
   Expand code Copy full snippet(49 lines long)

Using Verse UI

1. In your Verse UI code, add a button widget to your HUD and assign a TriggeringInputAction to it.

2. Assign the desired Input Action to the button's TriggeringInputAction property. This is the named event your Verse code subscribes to and responds to.

3. Write Verse code to respond to the button's OnClick event.

   Verse

   using { /Fortnite.com/Devices }
     using { /Fortnite.com/Input }
     using { /Fortnite.com/UI }
     using { /UnrealEngine.com/Temporary/Diagnostics }
     using { /UnrealEngine.com/Temporary/UI }
     using { /Verse.org/Input }
     using { /Verse.org/Simulation }
   
     jump_button_device := class(creative_device):
   
   
   Expand code Copy full snippet(42 lines long)

Input Mapping and Hotbar Actions

To support hotbar-style item selection across all input modes, a HotbarMapping input context is available. It provides pre-configured chorded actions for hotbar slots:

Input<public> := module:
    Gameplay<public> := module:
        HotbarMapping<public>:input_mapping = external []

Example: Custom Hotbar for Item Selection

To build a tappable hotbar:

1. Add a Custom Button widget on top of each hotbar slot in your HUD widget.

2. Add the HotbarMapping context via Verse.

3. Assign a HotbarSlot Input Action to each button's TriggeringInputAction property in UMG.

4. Create an event binding from each Custom Button’s OnClick event to a Verse field.

5. In Verse, add the HotbarMapping context and subscribe to each Verse field that is bound to the OnClick event and implement the item-selection logic.

The result: tapping a hotbar slot on touchscreen, pressing the gamepad chord, or using the keyboard shortcut all fire the same event and run the same Verse handler with no per-device branching.

Check out the Custom Hotbar Examples in the User Interfaces Feature Example in UEFN to see a hotbar in action.

Reassign Default Actions to Drive Custom Behavior

Because your custom logic runs from a subscribed Input Action, you can repurpose default actions when your game does not use them. For example, in a target-throwing game where the character does not jump, subscribe to the default Jump action in Verse and write throw ball logic in the handler. The default touchscreen layout still shows the Jump button (which the player sees as the throw control), and tapping it runs your code.

Migrating from TouchActionWrapper

If your project uses TouchActionWrapper, migrate to Custom Button as follows:

1. In UMG, locate any widget that uses TouchActionWrapper as a parent container.

2. Remove the TouchActionWrapper and replace it with a standard Custom Button widget.

3. On the Custom Button widget, set the Triggering Input Action property to the same Input Action that was previously assigned to the TouchActionWrapper's InputAction property.

4. Update your Verse code if needed. The GetInputEvents / TriggerActivationEvent subscription pattern remains the same.

5. Save and validate your project. The editor validation error for TouchActionWrapper will disappear once all instances are replaced.

For more information on customizing touchscreen controls, see Developer Customizable Touchscreen Controls.