UI

Menus, HUDs, buttons, sliders, and everything else that sits on top of your game — built from the same entity/component system as everything else, with a few UI-specific pieces added on top.

• Canvas — a container that decides how its contents are positioned: fixed to the screen (a HUD or menu) or placed out in the world.
• Rect Transform — replaces the regular Transform on anything living inside a Canvas, and describes a rectangle instead of a point: where it sits, how big it is, and how it reacts when the screen resizes.
• Widgets — Image, Text, Button, Slider, Toggle, Progress Bar, and a few more, each a small component you add on top of a Rect Transform.

New to this? Getting started builds a HUD and a pause menu from scratch in about fifteen minutes.

How it fits together

Canvas                       — the container; screen-fixed or in-world
   └── Rect Transform         — every child's position/size within it
          └── a widget component  — Image, Text, Button, Slider, Toggle, Progress Bar...

A Canvas entity can have its own children directly, or nest further Canvases and groups underneath — a pause menu is usually a Canvas with a background Image, some Text, and a couple of Buttons all parented under it.

You already have one

Every new project's Assets folder includes UITemplate.jscene — a working HUD (health bar, coin counter) and pause menu (Resume/Quit buttons) you can open, click through, and copy pieces out of. Getting started builds the same kind of thing by hand, so you know what each piece does.

Screen space or world space

A Canvas has a Render Mode:

• Screen Space Overlay (the default) — pinned to the screen, ignores the camera entirely. Use this for a HUD, a pause menu, a main menu — almost everything.
• World Space — positioned like any other entity, by its Transform, and moves with the camera. Use this for a health bar floating over an enemy's head, or a sign in the game world.

Playing it

UI runs in Play mode, same as the rest of your scene — buttons click, sliders drag, navigation responds to keyboard/gamepad. Outside of Play mode, a Canvas and its widgets show in the Viewport exactly as they'll look at runtime, so you can lay things out without pressing Play at all.

What's included

A Canvas can be screen space or world space, scaling to fit the screen (with a few different ways to handle mismatched aspect ratios), or staying a fixed pixel size. Elements anchor to a corner, edge, or center of their parent — or stretch to fill it — using the same preset grid described in Getting started.

The widget set covers Image (including 9-slice panels that stretch without warping their corners), Text, Button, Slider, Toggle, and Progress Bar. Layout Groups stack children in a row, column, or grid automatically. Scroll views clip their contents to the visible area, so a list can hold more than fits on screen. Keyboard and gamepad navigation moves between selectable elements automatically, or along neighbors you set explicitly. A Screen Space Overlay canvas can keep its content clear of notches and rounded corners with Safe Area.

From C#, you can show and hide canvases, tint or swap images, update a progress bar, move and resize elements, and handle button clicks — see Scripting for what's driveable and how.

Next

• Getting started — build a HUD and a pause menu
• Components — every field on every UI component
• Scripting — drive UI from C#
• Troubleshooting — when a button won't click or a layout looks wrong