Verse String Interpolation with Live On-Screen UI
Tutorial intermediate compiles

Verse String Interpolation with Live On-Screen UI

Updated intermediate Code verified

What you'll learn

You'll learn how to embed variables inside a string literal with {VariableName} syntax, and how to display that live text on a player's HUD using the real player-UI stack: GetPlayerUI[], a canvas container, a text_block widget, and AddWidget. By the end you'll have a counter that updates on-screen once per second.

How it works

In Verse you can never write "Score: " + Score — you cannot + a string with an int. Instead you use interpolation: wrap any expression in curly braces inside a string literal, and Verse converts it to text for you: "Score: {Score}". Anything inside the braces is evaluated — variables, arithmetic, even function calls.

To show interpolated text on screen you need the player-UI pipeline:

  1. Get the player's UI with GetPlayerUI[Player]. This is a <decides> call (it fails if the player has no UI), so you MUST bind it inside an if using [] brackets.
  2. Create a text_block widget to hold your text and set its content with SetText.
  3. Wrap the text block in a canvas (a container widget) via a canvas_slot, because player_ui.AddWidget expects a widget to mount.
  4. Call PlayerUI.AddWidget(MyCanvas) once to mount it, then just call SetText again on each update — the mounted widget re-renders automatically. Re-adding the same widget every frame would stack duplicates.

SetText takes a message, and a string literal (including one built from interpolation) converts to a message automatically. We build that literal with StringToMessage-style interpolation.

Let's build it

This device mounts a text block on the first player's screen and updates a counter every second using string interpolation. Note that we AddWidget once, then only re-run SetText inside the loop.

using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /Verse.org/Verse }
using { /UnrealEngine.com/Temporary/UI }

# Displays a live, interpolated counter on the first player's HUD.
string_interp_ui_device := class<concrete>(creative_device):

    # Mutable counter we interpolate into on-screen text.
    var Counter : int = 0

    OnBegin<override>()<suspends>: void =
        # Grab the first player in the playspace.
        AllPlayers := GetPlayspace().GetPlayers()
        if (FirstPlayer := AllPlayers[0]):
            # GetPlayerUI is <decides> (fails if no UI) — bind it with [].
            if (PlayerUI := GetPlayerUI[FirstPlayer]):
                # Create the text widget that will hold our interpolated string.
                TextWidget : text_block = text_block{}
                TextWidget.SetText(MakeCountText(0))

                # Wrap the text block in a canvas slot so it can be mounted.
                CountCanvas : canvas = canvas:
                    Slots := array:
                        canvas_slot:
                            Widget := TextWidget
                            Anchors := anchors{Minimum := vector2{X := 0.5, Y := 0.1}, Maximum := vector2{X := 0.5, Y := 0.1}}
                            Alignment := vector2{X := 0.5, Y := 0.5}
                            SizeToContent := true

                # Mount ONCE. Re-adding every tick would stack duplicate widgets.
                PlayerUI.AddWidget(CountCanvas)

                # Update loop: only SetText each second — the widget re-renders.
                loop:
                    set Counter = Counter + 1
                    # Interpolation: embed Counter directly, no + concatenation.
                    TextWidget.SetText(MakeCountText(Counter))
                    Print("Updated UI to count {Counter}")
                    Sleep(1.0)

    # Builds the interpolated message shown on screen.
    MakeCountText(Value:int)<transacts>: message =
        StringToMessage("Current Count: {Value}")

    # Helper: strings convert to message inside a message-typed function.
    StringToMessage<localizes>(S:string): message = "{S}"

Try it yourself

  1. Place the device in your island and press Play with at least one player.
  2. Watch the top-center of your screen — the count ticks up once per second.
  3. Check the log/console for the Print output confirming each update.
  4. Extend the interpolation: try "Count: {Counter}, doubled: {Counter * 2}" — expressions inside {} are evaluated, so arithmetic works directly.
  5. Move the widget by changing the Anchors/Alignment values in the canvas_slot.

Recap

  • Verse has NO + for mixing text and numbers — use {Expression} interpolation inside a string literal.
  • Expressions inside {} are fully evaluated (variables, arithmetic, calls).
  • GetPlayerUI[Player] is <decides> — bind it with [] inside an if.
  • Mount a widget with AddWidget once via a canvas/canvas_slot; then call SetText to refresh it live.
  • SetText takes a message; a string literal converts to message automatically.

Check your understanding

Test yourself with an interactive quiz and track your progress + earn XP — free for members.

Turn this into a guided course

Add String Interpolation and Formatting in Verse 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.

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.

Comments

    Sign in to vote, comment, or suggest an edit. Sign in