Create Cleaner Verse UIs in Fortnite UEFN with UIModule.utilities

Create Cleaner Verse UIs in Fortnite UEFN with UIModule.utilities

Designing UIs in Verse can get messy fast, especially once you start stacking multiple canvas, overlay, and stack_box widgets. The more you add, the more boilerplate creeps in: repeated margin setup, alignment settings, tiling options, text colors, shadow offsets, and so on.

The UIModule module solves that problem by giving you a clean set of helper functions and configuration structs to standardize your UI creation.
You can focus on layout and logic, not on repetitive setup.

Why You Should Use UIModule.utilities for Verse UI Design

Instead of writing long widget definitions every time, you can use short, reusable functions like:

ProgressText := utilities.GetTextBlock("Progress 0%", color.White, color.Black)
SpeedText := utilities.GetTextBlock("0 km/s", color.White, color.Black)

and skip all the margin/alignment boilerplate when creating layout slots:

ProgressSlot := utilities.GetStackBoxSlot(ProgressText, HUDConfiguration.ProgressStackBoxSlot)

These utilities keep files readable, modular, and easier to maintain. Especially in larger UI systems.

Main Components of the UIModule for Efficient UI Development

The module covers three main areas:

1. Widget Helpers

Utility functions for creating UI widgets quickly:

  • GetTextBlock() — builds a styled text block with color, justification, and shadow.
  • GetTextureBlock() — creates an image block for textures or icons.
  • GetMaterialBlock() — similar to GetTextureBlock, but for materials.
  • SetText() — updates text dynamically with optional color.

2. Slot Configurations

Each layout type in Verse (canvas, overlay, stack box) has a corresponding configuration class:

Layout Configuration Purpose
canvas_slot canvas_slot_configuration Anchors, margins, alignment, and Z-order
overlay_slot overlay_configuration Alignment and padding for overlay widgets
stack_box_slot stack_box_slot_configuration Padding and alignment for horizontal/vertical stacks

These configurations act like layout presets. You can reuse them across widgets for a consistent UI look and feel.

3. Convenience Methods

Simplify adding or removing widgets from player UI:

utilities.AddWidget(Player, Canvas, ui_input_mode.None)
utilities.RemoveWidget(Player, Canvas)

Example: Building a Spaceship Progress HUD in Verse

Here’s how these utilities look in practice, taken from the spaceship_progress_ui.verse file.

GetMainCanvas():canvas=
{
    # Create horizontal stack box for progress and speed
    HorizontalStackBox := stack_box{ Orientation := orientation.Horizontal }

```
ProgressStackBoxSlot := GetStackBoxSlot(ProgressTextBlock, HUDConfiguration.ProgressStackBoxSlot)
SpeedStackBoxSlot := GetStackBoxSlot(SpeedTextBlock, HUDConfiguration.SpeedStackBoxSlot)

HorizontalStackBox.AddWidget(ProgressStackBoxSlot)
HorizontalStackBox.AddWidget(SpeedStackBoxSlot)

# Create vertical stack box for timer and progress/speed row
VerticalStackBox := stack_box{ Orientation := orientation.Vertical }

ProgressSpeedSlot := GetStackBoxSlot(HorizontalStackBox, HUDConfiguration.ProgressSpeedStackBoxSlot)
TimerSlot := GetStackBoxSlot(TimerTextBlock, HUDConfiguration.TimerStackBoxSlot)

VerticalStackBox.AddWidget(ProgressSpeedSlot)
VerticalStackBox.AddWidget(TimerSlot)

# Add vertical stack box to canvas
CanvasSlot := GetCanvasSlot(VerticalStackBox, HUDConfiguration.ProgressTextCanvasSlotConfiguration)
NewCanvas := canvas{}
NewCanvas.AddWidget(CanvasSlot)
return NewCanvas
```

}

Without the utilities, this layout would take dozens of extra lines to define anchors, margins, padding, and alignment for every widget slot.
Here, everything is driven by reusable configuration structs. Making it easy to tweak UI layout without touching your main logic.

I’ve been using this same setup in my own Fortnite project, Airlock Crisis (2888-6118-5758), where these helpers made it faster to handle different HUD layers and update progress displays during gameplay events.

Takeaways for Building Better UIs in Fortnite UEFN

  • A simple way to create and style widgets consistently
  • Configuration classes for cleaner, reusable layout logic
  • Helper methods for adding and removing widgets from the player’s HUD

Together, they make Verse UI development faster, cleaner, and easier to scale. Perfect for modular systems or any HUD built for live updates.

Back to blog

Leave a comment