Creating and Removing Widgets

The following sections show how to add a widget to a player’s UI and remove a widget.

These examples use a text block widget, but you can use any kind of widget. See Widget Types for all the types of widgets you can use.

Adding a Widget

This example shows how to add a widget when a player interacts with a Button device in the level:

1. Create a new Verse device and add it to the level. To learn how to create a new device in Verse, see Create Your Own Device Using Verse.

2. Open your Verse file in Visual Studio Code with Verse Explorer.

3. Add an editable Button device property to your Verse device and set up the reference to the Button device in your level. To learn how to create editable properties, see Customize Device Properties. # Set the Button device in the Editor to reference the device in the level @editable MyButton : button_device = button_device{}

4. At the top of your Verse file, add the following lines to use the Verse UI API: using { /UnrealEngine.com/Temporary/UI } using { /Fortnite.com/UI } using { /UnrealEngine.com/Temporary/SpatialMath}

5. This UI is only per player, so you'll need a reference to a player to access their UI. This example shows how to display a custom UI when the player interacts with a button, since events for devices include a reference to the player that interacted with the device. To learn how to set up event subscriptions, see Coding Device Interactions. # Runs when the device is started in a running game OnBegin<override>()<suspends> : void = MyButton.InteractedWithEvent.Subscribe(HandleButtonInteraction) # A custom UI can only be associated with a specific player, and only that player can see it HandleButtonInteraction(Agent : agent) : void = # Display UI

6. Now, you can call the failable function GetPlayerUI[] in an if expression to get a reference to the player’s UI.

   Verse

        # A custom UI can only be associated with a specific player, and only that player can see it
        HandleButtonInteraction(Agent : agent) : void =
            # Agents can be a player or AI, but you can only get the UI of a player
            # so you must cast the Agent, who interacted with the Button device, to the player type
            if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
                # Display UI
   

   Copy full snippet(6 lines long)

7. With the reference to the player's UI, you can call AddWidget() to add your widget.

   1. Create a message named TextForMyUI that has the localizes specifer and initialize it with the string "Hello, world!". hello_world_device := class(creative_device): # Set the Button device in the Editor to reference the device in the level @editable MyButton : button_device = button_device{} # A localizable message to display as text in the UI TextForMyUI<localizes> : message = "Hello, world!"

   The message type means the text can be localized, and the string you use to initialize a message variable is the default text and language for the message. To learn more about the message type, see the Verse Language Quick Reference.

   1. Then, create a text widget with TextForMyUI as the default text and add it to the player's UI.

      Verse

       # A custom UI can only be associated with a specific player, and only that player can see it
       HandleButtonInteraction(Agent : agent) : void =
           # Agents can be a player or AI, but you can only get the UI of a player
           # so you must cast the Agent, who interacted with the Button device, to the player type
           if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
               MyUI : text_block = text_block{DefaultText := TextFOrMyUI}
               PlayerUI.AddWidget(MyUI)
      

      Copy full snippet(7 lines long)

8. The following is the complete code:

   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
   
   Expand code Copy full snippet(26 lines long)

9. Save your Verse file and choose Verse > Build Verse Code in the UEFN main menu to update your Verse device.

When you playtest your level with this Verse device, the text "Hello, world!" appears in the upper left corner of the screen when the player interacts with the Button device.

Removing a Widget

This example shows how to remove the UI from the player's screen when they interact with the Button device again:

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

2. To be able to remove the widget later when the player interacts with the Button again, you'll need to store the widget in a variable so you can reference it later. Since widgets only show per player, you'll need to store the widget and associate it with the player it's displaying to, so you can grab the right widget for the right player.

3. Create a map variable named MaybeMyUIPerPlayer that uses player as the key and an optional text block as the widget value in the map. (Note, this example uses a text block widget, but you can use any kind of widget.) var MaybeMyUIPerPlayer : [player]?text_block = map{}

4. When you add the widget to the player's UI, store your widget in the MaybeMyUIPerPlayer variable, so you can remove it later from the screen. Since accessing an element in a map is a failable expression, setting the value of the widget in relation to the player must be called in a failure context, like an if expression.

   Verse

        # A custom UI can only be associated with a specific player, and only that player can see it
        HandleButtonInteraction(Agent : agent) : void =
            # Agents can be a player or AI, but you can only get the UI of a player
            # so you must cast the Agent, who interacted with the Button device, to the player type
            if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
                NewUI := text_block{DefaultText := TextForMyUI}
                PlayerUI.AddWidget(NewUI)
                if (set MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}
   

   Copy full snippet(8 lines long)

5. Now update the function to check if the player already has a widget showing for them in MaybeMyUIPerPlayer. If they do, then remove the widget. If they don't, then create a new widget for them to see.

   Verse

        # A custom UI can only be associated with a specific player, and only that player can see it
        HandleButtonInteraction(Agent : agent) : void =
            # Agents can be a player or AI, but you can only get the UI of a player
            # so you must cast the Agent, who interacted with the Button device, to the player type
            if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
                if (MyUI := MaybeMyUIPerPlayer[InPlayer]?):
                    PlayerUI.RemoveWidget(MyUI)
                    if (set MaybeMyUIPerPlayer[InPlayer] = false) {}
                else:
                    NewUI := text_block{DefaultText := TextForMyUI}
   
   Expand code Copy full snippet(12 lines long)

6. The following is the complete code:

   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
   
   Expand code Copy full snippet(34 lines long)

7. Save your Verse file and choose Verse > Build Verse Code in the UEFN main menu to update your Verse device.

When you playtest your level with this Verse device, the text "Hello, world!" appears in the upper left corner of the screen when the player first interacts with the Button device. The text disappears when the player interacts with the Button device again.