1. Epic GamesDeveloper
  3. Making Widgets Interactable

Making Widgets Interactable

Add interactions and functionality to your custom UI using Verse.

Making Widgets Interactable

You can make your widgets interactable by:

  • Adding the argument player_ui_slot{InputMode := ui_input_mode.All } when you add a widget using the function AddWidget().

  • Binding an event handler to the widget’s event.

Currently, you can make the following widgets interactable:

The following sections are examples of how to make these widgets interactable.

Button Interactions

Interacting with a button Verse UI

Follow these steps to create a UI with a button, and add behavior that prints the selected button text to the screen when the player interacts with the button:

  1. Open the Verse file you created in Removing a Widget.

  2. Create a function named CreateMyUI() where you’ll create the UI. CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyInteractableButtons : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUIButton return MyInteractableButtons

  3. Change the type for MaybeMyUIPerPlayer to [player]?canvas: var MaybeMyUIPerPlayer : [player]?canvas = map{}

  4. Change the assignment for NewUI to call your new function CreateMyUI().

    Verse
         # UI are added per Player.
     HandleButtonInteraction(Agent : agent) : void =
         if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
             if (MyUI := MaybeMyUIPerPlayer[InPlayer]?):
                 PlayerUI.RemoveWidget(MyUI)
                 if (set MaybeMyUIPerPlayer[InPlayer] = false) {}
             else:
                 NewUI := CreateMyUI()
                 PlayerUI.AddWidget(NewUI)
                 if (set MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}

  5. Add the argument player_ui_slot{InputMode := ui_input_mode.All} when you add a new widget so the player can use their cursor on the canvas when it’s created.

    Verse
         # UI are added per Player.
     HandleButtonInteraction(Agent : agent) : void =
         if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
             if (MyUI := MaybeMyUIPerPlayer[InPlayer]?):
                 PlayerUI.RemoveWidget(MyUI)
                 if (set MaybeMyUIPerPlayer[InPlayer] = false) {}
             else:
                 NewUI := CreateMyUI()
                 PlayerUI.AddWidget(NewUI, player_ui_slot{InputMode := ui_input_mode.All})
                 if (set MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}

  6. All UI buttons have an OnClick() listenable event that you can subscribe to. The event handler is expected to have a void return type and one parameter with the type widget_message. CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyUIButton.OnClick().Subscribe(HandleSelectedUIButton) MyInteractableButtons : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUIButton return MyInteractableButtons HandleSelectedUIButton(Message : widget_message) : void = # Define what happens when the player presses the button

  7. In HandleSelectedUIButton, print the button’s text to the screen and remove the widget from the screen. A widget_message knows what player and UI element selected it, so you can use that information to get the text of the button and find the widget that’s displayed to the player to remove it from the screen.

    Verse
         HandleSelectedUIButton(Message : widget_message) : void =
         if (PlayerUI := GetPlayerUI[Message.Player], MyUI := MaybeMyUIPerPlayer[Message.Player]?, SelectedButton := text_button_base[Message.Source]):
             Print("Player selected {SelectedButton.GetText()}")
             PlayerUI.RemoveWidget(MyUI)
             if (set MaybeMyUIPerPlayer[Message.Player] = false) {}

  8. The following is the complete code for this example.

    Verse
         using { /Fortnite.com/Devices }
     using { /Verse.org/Simulation }
     using { /UnrealEngine.com/Temporary/UI }
     using { /Fortnite.com/UI }
     using { /UnrealEngine.com/Temporary/SpatialMath }
		
     hello_world_device := class(creative_device):
		
         # Set the Button device in the Editor to reference the device in the level
         @editable

Slider Interactions

Follow these steps to create a UI with a slider, and add behavior that prints the set value to the screen when the player interacts with the slider:

  1. Open the Verse file you created in Button Interactions.

  2. Update the function named CreateMyUI() with the slider. CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyUIButton.OnClick().Subscribe(HandleSelectedUIButton) MyUISlider : slider_regular = slider_regular: DefaultValue := 5.0 DefaultMinValue := 0.0 DefaultMaxValue := 10.0 DefaultStepSize := 0.5 MyInteractableWidgets : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUISlider canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.6}, Maximum := vector2{X := 0.5, Y := 0.6}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUIButton return MyInteractableWidgets

  3. All UI sliders have an OnValueChanged() listenable event that you can subscribe to. The event handler is expected to have a void return type and one parameter with the type widget_message. CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyUIButton.OnClick().Subscribe(HandleSelectedUIButton) MyUISlider : slider_regular = slider_regular: DefaultValue := 5.0 DefaultMinValue := 0.0 DefaultMaxValue := 10.0 DefaultStepSize := 0.5 MyUISlider.OnValueChanged().Subscribe(HandleValueChangedUISlider) MyInteractableWidgets : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUISlider canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.6}, Maximum := vector2{X := 0.5, Y := 0.6}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUIButton return MyInteractableWidgets HandleValueChangedUISlider(Message : widget_message) : void = # Define what happens when the player changes the value of the slider

  4. In HandleValueChangedUISlider, print the slider’s value to the screen. A widget_message knows which player interacted and what UI element they selected, so you can use that information to get the value of the slider and find the widget that’s displayed to the player.

    Verse
         HandleValueChangedUISlider(Message : widget_message) : void =
         if:
             PlayerUI := GetPlayerUI[Message.Player]
             MyUI := MaybeMyUIPerPlayer[Message.Player]?
             ChangedSlider := slider_regular[Message.Source]
         then:
             Print("Player changed slider value to {ChangedSlider.GetValue()}")

  5. The following is the complete code for this example.

    Verse
         using { /Fortnite.com/Devices }
     using { /Verse.org/Simulation }
     using { /UnrealEngine.com/Temporary/UI }
     using { /Fortnite.com/UI }
     using { /UnrealEngine.com/Temporary/SpatialMath }
		    
     interactable_slider := class(creative_device):
		    
         # Set the Button device in the Editor to reference the device in the level
         @editable

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page