Stop Building Walls, Start Building Menus: Making Widgets Actually Do Stuff
Stop Building Walls, Start Building Menus: Making Widgets Actually Do Stuff
So you’ve built a base. It’s got walls, traps, and enough loot to buy a small island. But when you press a button, nothing happens. The button sits there, looking smug, while your players wander around confused.
In Fortnite Creative, a widget is just a picture floating in the air until you give it a nervous system. Right now, it’s like a trap that doesn’t explode. You need to wire it up.
This isn’t about drawing pretty buttons (though the Widget Editor is great for that). This is about Verse. This is about teaching the game: "When Player A clicks Button B, do Thing C."
By the end of this, you’ll have a UI that actually reacts to human input, turning your static menu into a functional part of your island.
What You'll Learn
- The Difference Between "There" and "Active": Why widgets sit on screen but ignore you until you give them permission.
- The
AddWidgetCommand: How to spawn a UI element and tell the game it needs to listen for clicks. - Event Binding: The "If This, Then That" logic that makes a button press trigger an action (like spawning a weapon or changing a score).
- Scene Graph Basics: Understanding where your UI lives in the game’s hierarchy.
How It Works
1. Widgets Are Just Props (Until They Aren’t)
Think of a Widget like a Prop. If you drop a rock in your level, it sits there. It’s an object. If you drop a "Text Block" widget on your UI canvas, it’s just a floating piece of text. It has no brain. It doesn’t know you exist.
To make it interactive, you have to do two things:
- Spawn it with a special flag that says, "Hey, this thing can be clicked."
- Attach a listener that says, "If anyone clicks this, run this script."
2. The player_ui_slot Argument
In Verse, when you tell the game to show a widget, you use a function called AddWidget. By default, the game assumes your widget is just a decoration (like a background image).
But if you want a Button or a Slider to work, you have to pass an argument called player_ui_slot. Specifically, you set InputMode to ui_input_mode.All.
Game Analogy: Imagine your player’s screen is a Tactical Map.
- Normally, the map is read-only. You can look at it, but you can’t draw on it.
- Setting
InputMode := ui_input_mode.Allis like handing the player a pen. Suddenly, they can interact with elements on that map. Without this setting, clicking a button is like trying to write on a glass screen with your finger—it does nothing.
3. Event Binding (The "Trigger" of the UI World)
In UEFN, you’re probably used to using a Trigger Volume. Player walks in -> Trap goes off.
In Verse, we do the same thing with Events. Every interactive widget (like a Button) has an "Event" attached to it. It’s like a wire waiting to be cut. You need to "bind" a function to that wire.
Game Analogy:
- The Widget: A tripwire.
- The Event: The tension in the wire.
- The Function: The C4 charge.
- Binding: Connecting the tripwire to the C4.
If you don’t bind the function, the wire is loose. The player can step on it all day, and nothing happens.
4. Scene Graph: Where Does the UI Live?
You might think UI floats in a void. It doesn’t. In Unreal Engine 6 (and Verse), everything is part of the Scene Graph.
- Entities: These are the actors in your game (Players, Props, Devices).
- Components: These are the parts attached to entities (Health, Mesh, UI).
Your UI isn’t just "on the screen." It’s a Component attached to the Player Entity. When you add a widget, you’re attaching a new component to the player’s body. This matters because if the player dies, the UI component usually goes with them (unless you detach it, but that’s an advanced topic).
Let's Build It
We’re going to build a "Chaos Button." When you click it, it prints a message to the debug log (so you know it worked) and spawns a random weapon.
Step 1: The Setup
- Open UEFN.
- Create a new Verse Device. Name it
ChaosButtonDevice. - Open it in Visual Studio Code.
Step 2: The Code
Here is the complete, annotated code. Don’t just copy-paste; read the comments. They are your training wheels.
using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/Systems/World }
using { /Verse.org/Simulation }
# 1. Define our Device
# This is the "Actor" sitting in your level.
# Think of it like a Button Device, but smarter.
ChaosButtonDevice = device:
# 2. Variables (The Loot Pool)
# These are the items that can spawn.
# We define them as a list (array) of weapon IDs.
WeaponPool := ["ItemID_CombatAssaultRifle", "ItemID_CombatShotgun", "ItemID_CombatSMG"]
# 3. The Widget Reference
# We need a place to store the widget so we can interact with it later.
# In Verse, we often use a "Handle" to keep track of spawned objects.
ChaosMenuHandle: handle<widget> = uninitialized
# 4. The Main Logic Function
# This runs when the device is initialized (spawns into the world)
OnBegin<override>()<suspends>: void =
# --- PHASE 1: SPAWN THE UI ---
# First, we need to actually create the widget.
# We assume you have a widget blueprint named "ChaosMenu" in your Content Browser.
# If you haven't made one, create a Widget Blueprint -> Modal Dialogue Variant.
MenuWidget := CreateWidget<ChaosMenu>()
# --- PHASE 2: MAKE IT INTERACTIVE ---
# This is the CRITICAL STEP.
# We add the widget to the player's UI slot.
# The argument `player_ui_slot{InputMode := ui_input_mode.All}`
# is the "pen" we talked about earlier. It allows clicking.
# Without this, the button is just a picture.
ChaosMenuHandle := AddWidget(MenuWidget, player_ui_slot{InputMode := ui_input_mode.All})
# --- PHASE 3: BIND THE EVENT ---
# Now we find the Button inside our widget and wire it up.
# We assume your widget has a Button named "ChaosButton".
# If your button is named differently, change "ChaosButton" below.
Button := ChaosMenuHandle.GetWidgetByName<Button>("ChaosButton")
# Here we bind the event.
# When the button is clicked, run the function "OnChaosButtonClicked".
Button.ClickedEvent.Bind(OnChaosButtonClicked)
# 5. The Reaction Function
# This is what happens when the player actually clicks the button.
OnChaosButtonClicked: () -> void =
# Pick a random weapon from our pool
RandomIndex := RandomInt(0, 3) # 0 to 2
SelectedWeapon := WeaponPool[RandomIndex]
# Give the player that weapon
# We use the current player's context to grant the item
# Note: In a real device, you'd need to get the player reference.
# For this simple example, we'll just print to debug to prove it works.
Print("Chaos Button Pressed! Spawning: ", SelectedWeapon)
# If you want to actually spawn it, you'd use:
# GrantItem(SelectedWeapon)
Walkthrough: What Just Happened?
OnBegin: This is the "Game Start" signal. When your island loads, this function runs. It’s like the Battle Bus opening.AddWidget: We didn’t just show the widget; we showed it with permission. Theui_input_mode.Allargument is the key. It tells the engine: "This widget is part of the gameplay layer, not just the background art."Bind: We grabbed the specific button inside the widget and tied a rope from its "Clicked" event to ourOnChaosButtonClickedfunction. Now, every time that button is pressed, the game jumps straight to that function.
Try It Yourself
You’ve got the basics. Now, let’s make it fun.
Challenge:
Modify the ChaosButtonDevice to include a Slider widget. When the player slides the bar to the right, the debug message should print the current value of the slider.
Hint:
- In your Widget Blueprint, add a Slider widget and name it
VolumeSlider. - In Verse, find the slider:
Slider := ChaosMenuHandle.GetWidgetByName<Slider>("VolumeSlider"). - Bind the
ValueChangedEvent(or similar, check the widget type docs) to a new functionOnSliderMoved. - Inside that function, print the slider’s current value.
Don’t know how to find the exact event name? Check the Widget Types documentation in UEFN. It’s like checking the stats of a weapon before you equip it.
Recap
- Widgets are passive props until you give them a brain.
AddWidgetis how you spawn them, but you must includeplayer_ui_slot{InputMode := ui_input_mode.All}to make them clickable.- Event Binding is the "wire" that connects a click to an action. Without it, your buttons are just decorations.
- Scene Graph reminds us that UI is a component attached to the player, not a separate universe.
Now go make some buttons that actually do something. Your players are tired of clicking things that don’t happen.
References
- https://dev.epicgames.com/documentation/en-us/fortnite/making-widgets-interactable-in-unreal-editor-for-fortnite
- https://dev.epicgames.com/documentation/en-us/fortnite/custom-conversation-ui-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/ui-widget-editor-in-unreal-editor-for-fortnite
- https://dev.epicgames.com/documentation/en-us/fortnite/creating-and-removing-widgets-in-unreal-editor-for-fortnite
Verse source files
- 01-fragment.verse · fragment
Turn this into a guided course
Add making-widgets-interactable-in-unreal-editor-for-fortnite to your free study plan — we'll suggest related pages and stitch the lot into one compile-checked, self-guided lesson with worked examples and quizzes.
References
- making-widgets-interactable-in-unreal-editor-for-fortnite ↗
- custom-conversation-ui-in-unreal-editor-for-fortnite ↗
- ui-widget-editor-in-unreal-editor-for-fortnite ↗
- ui-widget-editor-in-unreal-editor-for-fortnite ↗
- creating-and-removing-widgets-in-unreal-editor-for-fortnite ↗
Original tutorial generated by Verse Island from the Verse/UEFN knowledge base, with references to the Epic Games sources above. Code is validated against the knowledge base.