The Ghost in the Machine: Spawning UI with Verse

Ever wish you had a heads-up display (HUD) that wasn’t just the default Fortnite menu? Maybe you want a custom "Health Bar" that turns red when you’re low, or a silly "Mood Ring" that changes color based on your current weapon. In UEFN, these are called Widgets. They are the graphics that float on your screen, separate from the 3D world.

But here’s the catch: you can’t just drag a widget into the level and expect it to appear. You have to spawn it into existence using code. If you try to add a widget without proper management, your island might crash, or worse, every player on the server sees everyone else’s UI (which is awkward and buggy).

In this tutorial, we’re going to build a "Boss Health Bar" that only appears when a player clicks a specific button. We’ll learn how to spawn it, store it safely so it doesn’t vanish, and remove it when the fight is over. No more ghosting your UI.

What You'll Learn

• Widgets: What they are and why they live on your screen, not in the world.
• Variables: Storing data (like a widget) so you can find it later.
• Maps: A way to link a specific player to their specific widget (so Player A doesn’t see Player B’s health bar).
• Spawning/Removing: The code commands to make UI appear and disappear.

How It Works

Think of a Widget like a piece of paper taped to your monitor. It’s not part of the 3D room; it’s stuck to your vision. In Fortnite Creative, you design these in the Widget Editor (the UI designer tool). But to make that paper appear on screen during gameplay, you need a Device (a Verse script) to hold it.

Here is the tricky part: If you just say "Show Widget," the game shows it for everyone. If Player A clicks a button, Player B shouldn’t see Player A’s custom UI. To fix this, we use a Map.

The Map Analogy

Imagine a Map is like a locker system in a gym.

• The Key is the Player (Player 1, Player 2, etc.).
• The Value is what’s inside the locker (The Widget).

When Player 1 clicks, we check their locker. If there’s a widget inside, we remove it. If not, we put one in. This ensures every player gets their own private UI experience.

Optional Values

Sometimes a player’s locker is empty. In programming, we call this an Optional value. It’s like saying, "There might be a widget here, or there might be nothing." We have to check if it’s there before we try to use it, or the game will crash (like trying to open a locker that doesn’t exist).

Let's Build It

We are going to create a Verse device that acts as a toggle. When you press a button, it spawns a Text Block widget saying "BOSS ACTIVE!" on your screen. Press it again, and it disappears.

Step 1: Create the Widget

1. In UEFN, go to the Content tab.
2. Right-click > New > Widget Blueprint. Name it BossUI.
3. Open it. Drag a Text Block into the viewport.
4. Change the text to "BOSS ACTIVE!" in the Details panel.
5. Save and close.

Step 2: The Verse Code

Create a new Verse file in your project. We’ll use a simple structure. Note that we are using a map to store the widget per player.

# Import necessary modules
using /Fortnite.com/Devices
using /Verse.org/Simulation
using /UnrealEngine.com/Temporary/Schemas

# This is our main device script
BossDevice := class(creative_device):
    # This is the Button device you place in the level.
    # Think of this as the "Trigger" for our code.
    var ButtonDevice : creative_button = creative_button{}

    # THIS IS THE MAP
    # Key: Player (who is looking at the screen)
    # Value: Optional BossUI (the widget, which might be empty)
    # We name it BossUIPerPlayer so we know what's inside.
    var BossUIPerPlayer : [player]?BossUI = map{}

    # This function runs when the button is pressed.
    # It's like the "Elimination Event" but for buttons.
    OnButtonPressed := function(player: player):
        # Check if this player already has a widget in their "locker"
        if current_ui := BossUIPerPlayer[player]:
            # If yes, remove it. This is like taking the paper off the monitor.
            player.RemoveWidget(current_ui)
            # Clear the locker so we know it's empty now
            BossUIPerPlayer[player] = none
        else:
            # If no, spawn a new widget for this specific player.
            # We pass 'player' so the UI shows only to them.
            new_ui := player.AddWidget(BossUI{})
            # Store the new widget in their locker
            BossUIPerPlayer[player] = new_ui

Walkthrough of the Code

1. var BossUIPerPlayer : [player]?BossUI = map{}

   • The Map: This line creates our locker system. It’s empty (map{}) when the game starts.
   • The Type: [player]?BossUI means "A map where the key is a Player, and the value is an Optional BossUI." The ? is the "Optional" part. It means the value can be none (empty).

2. if current_ui := BossUIPerPlayer[player]:

   • The Check: This line does two things. First, it looks up the player’s locker. Second, it assigns that value to current_ui. If the locker is empty (none), the if statement fails, and we skip to the else. If it has a widget, current_ui holds that widget, and we enter the if block.

3. player.RemoveWidget(current_ui)

   • The Removal: This is the "Delete" command. It takes the widget from the player’s screen.

4. new_ui := player.AddWidget(BossUI{})

   • The Spawn: This creates a new instance of our BossUI widget and attaches it to the player’s screen.

5. BossUIPerPlayer[player] = new_ui

   • The Storage: Now that the widget is on screen, we save it in the map. If the player presses the button again, we’ll find it in the map and remove it.

Try It Yourself

Challenge: Right now, your boss UI just says "BOSS ACTIVE!" and disappears when you click again. Make it smarter.

Goal: Add a second widget (or change the text) so that when the widget is removed, it prints a message to the player’s chat saying "Boss defeated!"

Hint: You can use player.SendTextMessage("Boss defeated!") inside the if block (the removal part). But wait—how do you know which widget is being removed? You already have current_ui! Use that.

(Don't peek at the solution if you want to solve it yourself first!)

Recap

• Widgets are UI elements that live on your screen, not in the 3D world.
• Maps are essential for managing UI per player. They act like lockers, storing each player’s widget separately so they don’t overlap.
• Optionals (?) handle the fact that a player might not have a widget yet. Always check if the value exists before using it.
• Spawning/Removing is done via AddWidget() and RemoveWidget(), tied to player events.

Now go forth and make your UI pop! Just remember: if you don’t store your widget in a map, you’ll be chasing ghosts (and bugs) forever.

References

• https://dev.epicgames.com/documentation/en-us/fortnite/creating-and-removing-widgets-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/uefn/ui-widget-editor-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/fortnite/ui-widget-editor-in-unreal-editor-for-fortnite
• 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/making-widgets-interactable-in-unreal-editor-for-fortnite