How to Build a Toggle Message Board

Have you ever wanted to send a secret message to players on your Fortnite island? Maybe it's a hint for a puzzle or just a funny greeting.

You can use Widgets. Widgets are like floating signs that appear on the player's screen. They are not part of the 3D world. They stick to the screen.

In this tutorial, we will build a simple toggle button. When a player presses it, a message appears. Press it again, and the message disappears. This makes your island feel interactive and polished.

What You'll Learn

• How to create a text widget.
• How to show the widget to a player.
• How to remove the widget from the screen.
• How to use a map to remember which player saw which widget.

How It Works

Think of a widget like a sticker. You can stick it on a player's screen. But you need to know which player has which sticker. If you have two players, you don't want Player A's message to disappear when Player B presses a button.

To solve this, we use a Map. A map is like a list with pairs. It looks like this: Player -> Widget. It helps Verse remember exactly which widget belongs to which player.

We also use a Button device. This is a simple object in your level. When a player touches it, it sends a signal. We will catch that signal in Verse.

Here is the plan:

1. We make a list to store widgets.
2. When the button is pressed, we check if the message is already there.
3. If it is not there, we make a new widget and add it to the list.
4. If it is already there, we remove it from the screen and the list.

Let's Build It

First, place a Button device in your level. Then, create a new Verse file for it.

Here is the complete code. Copy this into your Verse file.

using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/UI }
using { /UnrealEngine.com/Temporary/Diagnostics }
using { /Verse.org/Simulation }
using { /Fortnite.com/UI }

# This is our main device class. It inherits from creative_device
# so it can live in the level and react to game events.
toggle_message_board := class(creative_device):

    # Wire your Button device to this property in the
    # Verse Explorer (Details panel) after uploading.
    @editable
    ButtonDevice : button_device = button_device{}

    # We create an empty map to store widgets.
    # The key is the player. The value is the widget.
    var WidgetMap : [player]text_block = map{}

    # OnBegin runs automatically when the game session starts.
    OnBegin<override>()<suspends> : void =
        # Connect the button's InteractedWithEvent to our handler.
        ButtonDevice.InteractedWithEvent.Subscribe(OnButtonPressed)

    # This function runs every time the button is pressed.
    OnButtonPressed(Agent : agent) : void =
        # We need a player, not just an agent. Convert safely.
        if (Player := player[Agent]):
            # Get the player_ui interface so we can add/remove widgets.
            if (PlayerUI := GetPlayerUI[Player]):
                # Check if this player already has a widget in our map.
                if (ExistingWidget := WidgetMap[Player]):
                    # The widget exists! Let's remove it.
                    PlayerUI.RemoveWidget(ExistingWidget)
                    # Remove it from our map too.
                    set WidgetMap = map{}
                else:
                    # No widget yet. Let's make one!
                    NewWidget := text_block:
                        DefaultText := StringToMessage("Hello, Player!")
                    # Show the widget on this player's screen.
                    # ZOrder 0 places it at the default layer.
                    PlayerUI.AddWidget(NewWidget, player_ui_slot{ZOrder := 0})
                    # Save the widget in our map for this player.
                    set WidgetMap = WidgetMap + {Player -> NewWidget}

# ---- Verse Cortex: appended community utilities (UEFN-299) ----
# Community utility: wrap a string as a localizable `message`
# (required by SetText / HUD / billboard APIs). Auto-appended by
# Verse Cortex (UEFN-299) because the snippet referenced it but did
# not define it.
StringToMessage<localizes>(value:string) : message = "{value}"```

### Walkthrough

1.  **`using { /UnrealEngine.com/Temporary/UI }`**: This line tells Verse we want to use UI tools. It's like opening a toolbox.
2.  **`var WidgetMap : [player]text_block = map{}`**: This creates our map. It is empty at first. It expects a player as the key and a text block as the value.
3.  **`if (ExistingWidget := WidgetMap[Player]):`**: This is a clever trick. It checks if the player has a widget. Because map lookup is a failable expression in Verse, this only succeeds when an entry really exists. If it doesn't, we fall through to the `else` branch.
4.  **`PlayerUI.RemoveWidget(ExistingWidget)`**: This tells Verse to take the widget off the player's screen. It's like peeling off a sticker.
5.  **`PlayerUI.AddWidget(NewWidget, player_ui_slot{ZOrder := 0})`**: This puts a new sticker on the screen. We give it some text to show.

## Try It Yourself

Now it's your turn to make it better!

**Challenge:** Change the message that appears. Instead of "Hello, Player!", make it say "You found the secret!"

**Hint:** Look for the line that says `DefaultText := StringToMessage("Hello, Player!")`. Change the words inside the quotes. Remember to keep the quotes!

## Recap

*   Widgets are UI elements that appear on the player's screen.
*   Use a **Map** to keep track of which widget belongs to which player.
*   Use **AddWidget** to show the widget.
*   Use **RemoveWidget** to hide the widget.

Great job! You just built a dynamic UI system. Keep experimenting with different messages and styles.

## References

*   https://dev.epicgames.com/documentation/en-us/uefn/creating-and-removing-widgets-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/fortnite/creating-and-removing-widgets-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/fortnite/verse-api/unrealenginedotcom/temporary/ui/overlay/removewidget
*   https://dev.epicgames.com/documentation/en-us/fortnite/verse-api/unrealenginedotcom/temporary/ui/overlay/removewidget
*   https://dev.epicgames.com/documentation/en-us/fortnite/verse-api/unrealenginedotcom/temporary/ui/player_ui/removewidget