Getting started with UI

Two short builds: a health bar HUD that's always on screen, and a pause menu you show and hide with a button press. Between them they cover anchoring, the common widgets, and click handling.

You'll need a project you can open in the editor. Nothing else — this walkthrough needs no image files.

Part 1 — A health bar HUD

1. Create the Canvas. In the Scene Hierarchy, right-click → Create Empty Entity, rename it HUD, then Add Component → UI → Canvas. Leave Render Mode on its default, Screen Space Overlay — a HUD should stay fixed to the screen regardless of what the camera does.

2. Add a background bar. Create a child entity under HUD (drag it onto HUD in the Hierarchy, or right-click HUD → Create Empty Entity), rename it HealthBar. Give it Add Component → UI → Rect Transform, then Add Component → UI → UI Image.

3. Anchor it to the top-left corner. In the Rect Transform section, use the Anchor Preset grid and click the top-left button — this sets both Anchor Min and Anchor Max to the top-left corner, so the bar stays a fixed distance from that corner no matter the screen size. Set Offset Min to (20, -60) and Offset Max to (260, -20) — a 240×40 rectangle sitting just inside the corner.

4. Color it. On the UI Image you just added, set Color to a dark grey — this is the bar's background/track.

5. Add the fill. Create a child entity under HealthBar, name it Fill, give it a Rect Transform and a UI Image. Use the Stretch (Fill Parent) button in the Anchor Preset grid so Fill exactly covers HealthBar, then set its Image Color to red. This is the part a health bar shrinks by scripting later — see Scripting.

6. Add a Progress Bar. Back on HealthBar (not Fill), Add Component → UI → UI Progress Bar. Its Value field (0 to 1) is what a script drives at runtime — see Scripting for how Fill's width follows it.

7. Add coin text. Create another child under HUD, name it CoinText, give it a Rect Transform, anchor it to the top-right corner this time, and set Offset Min/Max so it sits near that corner. Add Component → 2D → Text Component (text is the same component used for world-space text — it works the same way here), and set its Text String to Coins: 0.

You should now see a dark bar with a red fill in the top-left of the Viewport, and "Coins: 0" in the top-right — without pressing Play. That's Screen Space Overlay: it renders in the editor exactly as it will at runtime.

Part 2 — A pause menu

1. Create a second Canvas. Create another empty entity, name it PauseMenu, Add Component → UI → Canvas. Set its Sort Order to 10 (higher than the HUD's default 0, so it draws and receives clicks on top), and untick Visible — the pause menu should start hidden.

2. Add a backdrop. Child entity Backdrop under PauseMenu, with a Rect Transform and a UI Image. Use the Stretch (Fill Parent) anchor preset so it covers the whole screen, and set its Image color to black with the alpha turned down (around 0.6) for a dim overlay. Turn on Raycast Target on the Rect Transform — this is what stops clicks from reaching whatever's behind the menu while it's open.

3. Add a Resume button. Child entity ResumeButton under PauseMenu, with a Rect Transform anchored to the center, sized around 200×50. Add a UI Image (this is the button's visible background), then Add Component → UI → UI Button. Turn on Raycast Target on its Rect Transform too — a button that can't be raycast can't be clicked.

4. Label it. Child entity Text under ResumeButton, Rect Transform stretched to fill its parent, Add Component → 2D → Text Component, Text String set to Resume.

5. Add a Quit button. Repeat steps 3–4 for a QuitButton, positioned just below ResumeButton.

6. Wire up navigation. On ResumeButton's UI Selectable section (added automatically alongside UI Button), set Down to QuitButton; on QuitButton's, set Up to ResumeButton. Now pressing down/up on a keyboard or gamepad moves focus between them — see Components for what happens if you leave these on (Auto) instead.

7. Make Resume actually resume. Add a script to ResumeButton (right-click → New C# Script...) and override OnClick:

using JoystickEngine;

public class ResumeButtonBehavior : GameEntity
{
    protected override void OnClick()
    {
        Canvas.Find("PauseMenu")!.Visible = false;
    }
}

See Scripting for why this goes on the button's own script rather than being wired up some other way.

8. Make Quit do something too — for now, just log it:

public class QuitButtonBehavior : GameEntity
{
    protected override void OnClick() => Log.Info("Quit pressed");
}

9. Show the menu from a Pause key. Add a script to any always-present entity (your player, or a small empty "GameManager" entity):

public class GameManager : GameEntity
{
    protected override void OnUpdate(float ts)
    {
        if (Input.WasKeyPressedThisFrame(KeyCode.Escape))
            Canvas.Find("PauseMenu")!.Visible = true;
    }
}

10. Press Play. The HUD shows immediately; pressing Escape brings up the pause menu, and Resume closes it again.

This is UITemplate.jscene

What you just built is a smaller version of UITemplate.jscene, already sitting in every new project's Assets folder — open it to see a complete version side by side with what you made here.

Next

• Components — every field on every UI component, including the ones this walkthrough only used a couple of settings from
• Scripting — everything you can drive from C#, and what you can't yet
• Troubleshooting — when a button won't click or a layout looks wrong