Krotox Engine › Docs › Krotox Manual › 2D Content

Game UI: canvases, layout & screens

Building menus and HUDs with Krotox's native UI: canvases and scaling, anchors and pivots, safe areas for notched phones, layout groups, the UI controls, how screens replace each other, and world-space canvases.

Krotox has its own UI system for menus, HUDs, dialogs and on-screen controls. It is separate from the world: UI elements are positioned with anchors in canvas units, not with world coordinates, so they adapt to any screen.

The building blocks

Component	Role
Canvas	The root of one UI screen. Every UI element lives under a canvas.
Canvas Scaler	Decides how the canvas scales on different screens.
UI Rect	Position and size of an element, relative to its parent, with anchors and a pivot.
Safe Area	Keeps an element clear of notches, camera cut-outs and the home bar.
Image, Text, Button, Slider, Toggle, Input Field, Scroll Rect, Progress Bar	The visible controls.
Layout Group, Grid Layout Group, Content Size Fitter	Automatic arrangement and sizing.
Mask	Clips children to its rectangle.

Create UI from the Hierarchy: right-click ▸ Create ▸ UI ▸ Canvas, World Space Canvas, Button, Image, Text, Vertical Layout, Horizontal Layout, Grid Layout or Mask (Clip Region).

Canvas

Field	Default	Meaning
`Reference Width` / `Height`	`1920 × 1080`	The design resolution you lay the UI out at.
`Orientation`	Auto	Portrait swaps the reference resolution (`1080 × 1920`) so stretched children scale correctly. Also Landscape and Free.
`Render Order`	`0`	The canvas's screen priority. See Screens.
`Visible When Paused`	on	Keep the canvas eligible while the game is paused. Essential for pause menus.
`Layered`	off	Show this canvas on top of whichever screen is active, instead of competing with it (dialogs, toasts).
`Render Mode`	Screen Space Overlay	Or World Space, for UI placed in the world.

Canvas Scaler

Field	Default	Meaning
`Mode`	Scale With Screen Size	Scale With Screen Size scales the canvas to match the reference resolution. Constant Pixel Size never scales (1 pixel = 1 unit). Physical Size keeps elements a real-world size using screen DPI, so they feel the same on a phone and a tablet.
`Reference Resolution`	`1920 × 1080`	The resolution the scaling is measured against.
`Match Width Or Height`	`0.5`	When the screen's aspect differs from the reference: `0` matches width, `1` matches height, in between blends.

For a portrait phone game, set the canvas to Portrait and Match Width Or Height to around 0 so the UI always fits the screen's width. For landscape, use around 1.

UI Rect: anchors, pivot and size

Every UI element has a UI Rect instead of using its Transform.

Field	Default	Meaning
`Anchor Min` / `Anchor Max`	`0.5, 0.5`	Where the element attaches inside its parent, from `0` (left/bottom) to `1` (right/top).
`Pivot`	`0.5, 0.5`	The element's own reference point. `(0.5, 0.5)` is its centre.
`Offset`	`0, 0`	Position of the pivot relative to the anchors, in canvas units.
`Size`	`100 × 100`	Width and height (added to the anchor span when anchors are stretched).
`Scale`, `Rotation`	`1`, `0`	Scale and rotation about the pivot.

Common anchor setups:

Want	Anchor Min	Anchor Max	Pivot
Stay in the centre	`0.5, 0.5`	`0.5, 0.5`	`0.5, 0.5`
Stick to the top-left corner	`0, 1`	`0, 1`	`0, 1`
Stick to the bottom edge, full width	`0, 0`	`1, 0`	`0.5, 0`
Fill the parent	`0, 0`	`1, 1`	`0.5, 0.5`

When the anchors are apart, the element stretches with its parent, and Size becomes extra size on top of that span (negative values give a margin).

Safe areas on phones

Add a Safe Area component to a full-screen panel and put your HUD inside it. The panel is inset by the device's safe-area margins: notch, camera cut-out, rounded corners and home bar. Each edge (left, right, top, bottom) can be switched off. The editor simulates common notch layouts, so you can check it without a device.

Laying out many elements

Layout Group arranges its active children in a row or a column, with spacing, padding (left, right, top, bottom), alignment and optional stretching. Inactive children are skipped, so the others close the gap.
Grid Layout Group arranges children in equal cells: Cell Size, Spacing, Padding, a Start Corner (upper-left, upper-right, lower-left, lower-right), a Start Axis (fill rows or columns first), alignment, and a Constraint (Flexible, Fixed Column Count or Fixed Row Count, with Constraint Count). Use it for inventories and level-select grids.
Content Size Fitter resizes an element to its content (text size or children): Unconstrained, Min Size or Preferred Size per axis.
Mask clips its children to its rectangle, for scroll views and cards.

The controls

Control	Key fields
Image	`Texture`, `Tint Color`. `Type`: Simple, Sliced (nine-slice), Tiled or Filled (reveals `Fill Amount` from 0 to 1 horizontally, vertically or radially). `Raycast Target`: whether it takes the pointer.
Text	`Text`, `Color`, `Font Size`, `Kerning`, `Line Spacing`, alignment, `Bold`, `Italic`, `Word Wrap`, `Best Fit` with min and max font size. Supports `<b>`, `<i>` and `<color=#RRGGBB>` tags.
Button	Normal, hover and pressed colours, `Interactable`, and an On Click method name to call on a script.
Slider	`Value`, `Min Value`, `Max Value`, a fill rect, and an On Value Changed method.
Toggle	`Is On`, and an On Value Changed method.
Input Field	`Text`, `Read Only`, and an On Value Changed method.
Scroll Rect	Horizontal and/or vertical scrolling by drag or mouse wheel.
Progress Bar	`Value` (0 to 1), a `Fill Entity`, optional text with a format string, and smooth transitions.

Fills must be children. A Progress Bar's or Slider's fill entity must be a child of the bar: either an Image set to Filled (its fill amount follows the value) or a UI Rect (its anchors stretch with the value). With no child fill, a progress bar drives its own Filled image.

Wiring a button without code. In the Button's On Click field, type the name of a public, parameterless method on a script (for example OnStartGame). Scripts can also subscribe in code; see UI scripting API.

Screens: which canvas is shown

Each canvas is a screen, and Render Order decides which screen is on display:

Canvases on inactive entities are skipped. While the game is paused, so are canvases with Visible When Paused off.
Of the rest, only the canvases sharing the highest Render Order are drawn and receive input. Lower ones are hidden, not drawn underneath.
Hiding the top screen reveals the next-highest one.

So:

Layers that must be visible together (a HUD and an on-screen joystick) get the same Render Order.
A screen that replaces them (pause, game over) gets a higher Render Order.
A dialog or toast that should appear over the current screen without hiding it gets Layered turned on.

The Viewport follows the same rule while you edit, and the UI rect gizmo is only drawn for elements on the visible canvas. Raise a canvas's Render Order to edit it.

In earlier builds a higher Render Order only drew on top of lower canvases. Now lower-priority canvases are not drawn at all. If an overlay must stay visible with your HUD, give both the same Render Order or make the overlay Layered.

Blocking taps to the game

An Image with Raycast Target on takes the pointer like a control, so nothing beneath it receives the click, including controls on lower canvases. Give a modal popup a full-screen backdrop image so taps cannot reach the game behind it. An image inside a button passes the click on to the button, and an image whose alpha is 0 never takes the pointer. Turn Raycast Target off on decorative images that sit over controls.

Gameplay code can ignore taps that the UI used with Input.IsPointerOverUI().

World-space canvases

Set a canvas's Render Mode to World Space (or create a World Space Canvas) to place UI in the world: name plates, health bars over enemies, signs, in-world terminals. The canvas is positioned, rotated and scaled by its Transform. Its size is the reference resolution in canvas units, with Pixels Per Unit (default 100) of them per world unit. World canvases are drawn beneath the screen overlays, and buttons on them are clicked where the pointer meets the panel.

Hiding and showing UI

Active = false on an element's entity hides it and everything under it, and stops it receiving clicks. This is the usual way.
Interactable = false on a button, slider or toggle keeps it visible but unresponsive (greyed-out buttons).
Setting an Image's or Text's colour alpha to 0 fades it; turn Raycast Target off too, or the invisible image still blocks clicks.

See the UI scripting API for complete pause-menu and HUD examples.