First Verse UI: Lap Counter HUD
In this lesson you'll learn to
- ✓Get GetPlayerUI[], AddWidget a text_block, and update it live — the START of the UI arc.
Get GetPlayerUI[], AddWidget a text_block, and update it live — the START of the UI arc.
📖 Reference & full walkthrough: First Verse UI: Lap Counter HUD
🔁 Builds on: south-shores hud-message feedback pattern (upgraded to real widgets)
🧩 Your capstone piece: Per-racer lap counter HUD widget
Building Your First Custom HUD with Verse
Have you ever wanted to see a custom score counter or a special message on your screen in Fortnite? You can build it yourself! In this tutorial, we will create a simple text label. It will appear right in the corner of your screen. This is called a HUD. A HUD is like a heads-up display. It shows info without blocking the game. We will use Verse to make it happen. You will learn how to add text to the screen. You will also learn how to make it disappear. This is a great first step into UI design. Let's get started!
What You'll Learn
- What a HUD is and why it is useful.
- How to create a Widget using Verse.
- How to show and hide that Widget.
- How to use the Player UI to talk to the screen.
How It Works
Think of your game screen like a window. The game world is outside the window. The HUD is the frame around the window. It stays still while the world moves.
In Fortnite, we use Widgets for the HUD. A Widget is like a sticker. It can have text, images, or buttons. We place these stickers on the screen using Verse.
To put a sticker on the screen, we need two things. First, we need the Player UI. This is like the glass of the window. It belongs to the player. Second, we need a Widget. This is the sticker itself. We stick the sticker onto the glass.
We use a special device called the Text Block. It holds words. We can change the words anytime. We can also add it to the Player UI. This makes it appear. We can remove it to make it vanish. This is how we control what the player sees.
Let's build a simple "Hello" label. It will pop up when the game starts. Then it will disappear after a few seconds. This shows you how to manage screen elements.
The widget lifecycle: build a text_block, add it to the player's UI, wait, then remove it.
Let's Build It
We will write a Verse script. It will create a text label. The label will say "Welcome!". It will show for a short time. Then it will go away.
Copy this code into a new Verse script in UEFN.
using { /Fortnite.com/Devices }
using { /Fortnite.com/Game }
using { /Fortnite.com/UI }
using { /UnrealEngine.com/Temporary/UI }
using { /UnrealEngine.com/Temporary/Diagnostics }
using { /Verse.org/Simulation }
# This is our main script class.
# It runs when the game starts.
welcome_message_device := class(creative_device):
# This runs once when the island loads.
OnBegin<override>()<suspends> : void =
# 1. Get the player's screen (The Player UI).
# We find the first player in the game.
# GetPlayspace() returns all active players on this island.
Players := GetPlayspace().GetPlayers()
# Guard against an empty lobby before continuing.
if (Player := Players[0], FortPlayer := player[Player], PlayerUI := GetPlayerUI[FortPlayer]):
# 3. Create a new text_block Widget.
# This is our "sticker" with text.
MyText := text_block:
DefaultText := StringToMessage("Welcome to my Island!")
# 4. Add the widget to the player's UI.
# This makes it appear on screen!
# slot controls layer order; use default_z_order (0) here.
PlayerUI.AddWidget(MyText, player_ui_slot{ZOrder := 0})
# 5. Wait for 3 seconds.
# The game pauses here for a moment.
Sleep(3.0)
# 6. Remove the widget from the UI.
# This makes the sticker disappear.
PlayerUI.RemoveWidget(MyText)
# ---- Verse Cortex: appended community utilities ----
# Community utility: wrap a string as a localizable `message`
# (required by SetText / HUD / billboard APIs). Auto-appended by
# Verse Cortex because the snippet referenced it but did
# not define it.
StringToMessage<localizes>(value:string) : message = "{value}"
Walkthrough
Let's look at what each part does.
First, we use the three using lines at the top. This tells Verse we want to use UI tools, game tools, and device tools. It is like opening a toolbox.
Next, we define OnBegin. This is an Event. An event is a trigger. It happens when the game starts. Verse runs the code inside it.
Inside OnBegin, we get the players. We use GetPlayspace().GetPlayers(). This returns a list of everyone on the island. We then use Players[0] to grab the first player. It is like picking the first player in a lobby.
Then we get the PlayerUI. We use GetPlayerUI[FortPlayer]. This is the interface. It lets us add things to the screen.
We create MyText. This is a Widget. It is a specific type called a text_block. It holds words. We set DefaultText using StringToMessage("...") to supply the text content. This is like writing on a whiteboard.
We call .AddWidget(MyText, player_ui_slot{ZOrder := 0}). This sticks the text to the screen. The player_ui_slot controls layering. The player sees it now.
We call Sleep(3.0). This pauses the script. It waits three seconds. The text stays on screen during this time.
Finally, we call .RemoveWidget(MyText). This takes the sticker off the screen. The text is gone.
Try It Yourself
Now it is your turn to play! Try these changes.
Challenge: Change the text to say "Good Luck!" instead of "Welcome". Also, make it stay on the screen for 5 seconds.
Hint: Look at the DefaultText := line. Change the words inside the quotes. Look at the Sleep() line. Change the number 3.0 to 5.0. Remember to save and test your island!
Recap
You built a custom label for your Fortnite island. You learned what a HUD is. It is the frame around your game view. You used a text_block Widget. This is a container for text. You added it to the Player UI. This made it appear. You removed it to make it vanish. Great job! You just made your first UI element.
References
- https://dev.epicgames.com/documentation/en-us/fortnite/creating-ui-with-verse-in-unreal-editor-for-fortnite
- https://dev.epicgames.com/documentation/en-us/fortnite/user-interface-devices-in-unreal-editor-for-fortnite
- https://dev.epicgames.com/documentation/fortnite/verse-starter-05-controlling-the-npc-with-ui-in-unreal-editor-for-fortnite
- https://dev.epicgames.com/documentation/en-us/fortnite/item-icon-component-in-fortnite
- https://dev.epicgames.com/documentation/fortnite/verse-api/unrealenginedotcom/temporary/ui/player_ui
Keep going — free
You've read the intro. The rest of this lesson is free for members. Sign in to continue and track your progress.
Sign in free to continue this lessonSources
/guides/creating-a-simple-ui-with-hud-widgets-in-verseBiloxi Studios original lesson
Add this lesson to your free study plan.
🧭 The Keeper’s log
Quest complete? Chart your next heading from the 🐻 North Jungle expedition.
⛵ Take me there