Stop the Bus: Designing a Title Screen That Doesn’t Suck

Let’s be real: most Fortnite islands start with the player spawning into a void, getting hit by a random tree, and wondering why they downloaded this. That’s not immersion; that’s a cry for help. A proper title screen is your island’s handshake. It’s the difference between "another generic deathmatch" and "this guy actually put in work."

In this tutorial, we’re going to build a custom Title Screen using the HUD Message device and the UI Widget Editor. We’ll layer images, text, and layout containers to create a polished intro that stops players from rage-quitting before they even press "Play." No coding required for the visuals—just pure, unadulterated UEFN wizardry.

What You'll Learn

• How to create a User Widget (the canvas for your UI).
• The hierarchy of UI containers: Size Box, Stack Box, and Overlay.
• How to use Padding to keep your text from hugging the edges like a clingy ex.
• How to bind your custom UI to a HUD Message device to display it on screen.

How It Works

Think of building a UI like building a base in Fortnite. You can’t just throw walls in random spots and expect it to hold up. You need a foundation, a structure, and then the interior design.

1. The Canvas (User Widget): This is your empty plot of land. Before you build, you need to define the space. In UEFN, this is a User Widget. It’s a blueprint for how your UI looks, separate from the actual game world.
2. The Foundation (Size Box): Imagine a giant invisible frame. The Size Box defines the boundaries of your UI panel. If you don’t set this, your content might spill out into the corners of the player’s screen, looking like a glitched texture.
3. The Structure (Stack Box): This is where you stack your items. Think of it like a vertical list of loot drops. If you put an Image and a Text Block into a Stack Box, they will sit on top of each other, one after the other.
4. The Interior Design (Overlay & Padding): Sometimes you want things to overlap (like a background image behind text). That’s what an Overlay does. And Padding? That’s just the spacing between your furniture and the walls. We’ll use it to push your title text away from the bottom edge so it doesn’t get cut off by the player’s health bar or controller prompts.

The Scene Graph Connection: In Unreal Engine 6 (and Verse), everything is an Entity with Components. Your UI is no different. The Widget is the Entity. The Size Box, Stack Box, and Image are Components attached to that Entity. They form a Hierarchy (a parent-child relationship). If you move the Parent (Size Box), the Children (Stack Box, Text) move with it. If you delete the Parent, the Children vanish into the void. Understanding this hierarchy is key to not breaking your layout when you tweak one element.

Let's Build It

We’re going to build a simple but stylish Title Screen: A background image, a big bold title, and a "Press Start" prompt.

Step 1: Create the User Widget

1. In the Content Browser, right-click and select User Interface > User Widget.
2. Name it WBP_Title.
3. Double-click to open the UI Widget Editor.

Step 2: Set Up the Containers

1. In the Hierarchy panel (left side), right-click and add a Size Box.
2. With the Size Box selected, go to the Details panel (right side).
3. Find Padding and set it to 0.0, 0.0, 0.0, 200.0.
   • Translation: 0 padding on Left, Top, Right. 200 pixels on the Bottom. This ensures your content doesn’t get squashed by the bottom of the screen.
4. Right-click the Size Box in the Hierarchy and add a Stack Box as its child.
   • Why? The Stack Box will hold our actual content (Image + Text) and keep it neatly stacked inside the Size Box’s boundaries.

Step 3: Add the Visuals

1. Right-click the Stack Box and add an Overlay.
   • Why an Overlay? It allows us to stack elements on top of each other later if we want effects, but for now, it acts as a container for our main content.
2. Right-click the Overlay and add an Image.
   • In the Details panel, click the Brush selector and choose your background image (import one first if you don’t have it).
   • Set the Stretch property to Fill so it covers the whole area.
3. Right-click the Overlay again and add a UEFN Text Block.
   • Type your game title (e.g., "EPIC ISLAND").
   • Set the Text Size to something big (e.g., 48).
   • Set the Color to White.
   • Pro Tip: If your text is hard to read, go back to the Image, add a Black Background image behind the text, or use a Blur effect.

Step 4: Bind to the Game World

1. Close the UI Widget Editor.
2. In your Level Editor, place a HUD Message device.
3. In the Details panel for the HUD Message device, find the Widget property.
4. Drag and drop your WBP_Title from the Content Browser into this slot.
5. Set the Display Time to 0 (or a high number) if you want it to stay up until you manually hide it, or use a Trigger to show it when the game starts.

Step 5: The Verse Hook (Optional but Cool)

If you want this title screen to disappear when the player presses "Start," you’ll need a tiny bit of Verse. Here’s how you structure the logic:

# This is a simple Verse script to control the Title Screen
# 'Event' is like a trigger that fires when something happens (e.g., player presses a button)

ShowTitleScreen := () -> void:
    # This function displays the widget
    # 'HUD_Message' is the device we placed in the level
    HUD_Message.Show()

HideTitleScreen := () -> void:
    # This function hides the widget
    HUD_Message.Hide()

# 'OnBegin' is a function that runs automatically when the island starts
OnBegin := () -> void:
    ShowTitleScreen()
    
    # Wait for player input to hide the title
    # (Simplified logic - in reality, you'd bind this to a specific button event)
    # For now, let's just show it for 5 seconds as a demo
    Wait(5.0)
    HideTitleScreen()

Walkthrough of the Code:

• ShowTitleScreen: A Function (a reusable block of code) that calls the Show() method on our HUD Message device. Think of it as flipping the "On" switch for the TV.
• HideTitleScreen: The opposite. Flips the "Off" switch.
• OnBegin: An Event that fires once when the game loads. It’s the "Game Start" button.
• Wait(5.0): Pauses the script for 5 seconds. Like a storm timer counting down.

Try It Yourself

Challenge: Make your Title Screen interactive.

Goal: Instead of the title screen disappearing after 5 seconds, make it disappear only when the player presses the "Interact" button (usually E or X).

Hint: You’ll need to look into Input Events in Verse. Specifically, listen for the Interact event. When that event fires, call HideTitleScreen(). Don’t forget to bind the Verse script to a Verse Device in your level!

Recap

You’ve just built a professional-grade Title Screen. You learned how to structure UI with Size Boxes and Stack Boxes, manage Padding to avoid edge cases, and bind it all to a HUD Message device. You even dipped your toes into Verse to control when the screen appears and disappears. Now your island starts with a bang, not a whimper.

References

• https://dev.epicgames.com/documentation/en-us/fortnite/title-sequence-3-designing-the-title-screen-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/uefn/title-sequence-2-customizing-splash-screens-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/fortnite/gameplay-camera-and-control-devices-in-fortnite-creative
• https://dev.epicgames.com/documentation/en-us/uefn/gameplay-camera-and-control-devices-in-fortnite-creative
• https://dev.epicgames.com/documentation/en-us/fortnite/making-a-title-sequence-in-unreal-editor-for-fortnite