Game UI

Build a menu or a HUD: text, buttons, panels and bars drawn over the game. You place them in the Game view and set them up in the inspector.

Each piece of game UI is an entity with a Canvas Element component. It is saved in the scene like everything else, and the exported game draws it the same way Studio does.

Add an element

1. Open the scene the UI belongs to.
2. In the hierarchy, press Add entity (or open the Entity menu) and pick one from the Game UI group: Text, Button, Panel or Bar.

Each one comes sized and at its own place on the screen, so it shows in the Game view at once and none covers another.

To turn an entity you already have into UI, select it and use Add Component › Canvas Element in the inspector. Its Kind menu has the other kinds too, such as View (what a camera sees) and Joystick (an on-screen stick).

To put elements inside a panel, drag them onto it in the hierarchy. A child is placed inside its parent rather than on the whole screen. To reorder them, drag a row onto the top or bottom part of another, where a line shows, and it goes just before or after it.

Place it in the Game view

Switch to the Game view. While you're editing (not playing), the UI there is yours to arrange, and the hierarchy and inspector stay beside it so you can watch the numbers change.

• Select: click an element. You get the one drawn on top, a child before its parent. Clicking where there's no element clears the selection. The element under the mouse has a faint outline, so you can see which one a click would pick.
• Move: drag the selected element. It follows the pointer whatever its anchor.
• Resize: drag one of its eight handles. The opposite edge stays put. Over a side handle the pointer becomes a left-right arrow, and over the top or bottom handle an up-down arrow.
• Cancel a drag: press Esc before you let go, and the element goes back where it was.
• Undo: each drag is one undo step.

Positions and sizes land on whole units and stop at 0.

Snapping and guides

When you move an element, it snaps once it comes within a few pixels of another element's edges or centre, or the edges and centre of the screen. Its left, centre and right edges snap across, and its top, middle and bottom snap down. A magenta guide line shows each snap while you drag.

Resizing doesn't snap.

Nudge with the arrow keys

Click in the Game view so it has the keyboard, select an element, then:

• Left Right Up Down move it one unit the way the arrow points.
• Hold Shift to move it ten.

Each press is one undo step.

Elements that don't move

An element inside a panel with Layout switched on is placed by that layout, and one that follows a node is placed by that node. You can still select them and edit their fields, but dragging and arrow keys don't move them.

Preview the UI at 2x and with touch controls

Two buttons in the Game view's top-right corner change how Studio shows the UI, not the scene:

• 1x / 2x previews the UI at twice its size, as a game that sets its UI scale to 2 draws it. Dragging at 2x still follows the pointer.
• Show touch controls shows elements marked Touch Only, such as the Starter's on-screen stick and Jump button. They show on their own when Studio runs on a phone or tablet.

Neither is saved with the scene. The clock button beside them shows frame stats.

The inspector

Select an element and its Canvas Element section shows its fields. Every change is one undo step.

Where it sits

Field	What it does
Anchor	The point of the screen (or its parent) it's placed from: a corner, the middle of an edge, or the centre.
Offset X, Offset Y	How far in from the anchored edges it sits.
Width, Height	Its size.
Order	Which element draws on top when two overlap: higher draws over lower.
Visible	Off hides it. A blueprint's Set Visible can show it during play.

Changing Anchor doesn't keep the element where it was on screen: its offsets are kept, now measured from the new anchor, so it may jump. Drag it back into place afterwards.

What it shows

Text, Font Size and Text Align set its words. Color and Background set its colours; on a Bar, Value sets how full it is. A View element's Camera picks the camera whose picture it shows.

What a Button does

A Button's Action (and Double Action, for a double press) is a menu of the scene's input actions, such as Core's jump and run. A Joystick's Action lists the actions that take a direction, such as move.

To add your own actions or change their keys, use Add Component › Input Actions on any entity in the scene. Renaming an action there renames it on every Button that uses it.

To make a button do something in your game's rules, such as loading another scene, a blueprint's On Button Pressed listens for it by the button's name. See Logic.

Style

Switch parts of the style on to change how the element looks:

• Style Fill, with a Gradient switch, replaces the background.
• Border Width, Border Color and Corner Radius set its outline and shape.
• Opacity fades it, from 0 to 1, and Rotation turns it, in degrees clockwise.
• Shadow adds a drop shadow with its colour, offset, blur and spread.
• Text Color, Text Shadow, Text Outline and, on a Text, Link Color style its words.
• Image fills it with one of the project's PNG or JPEG pictures. The editor under the picker picks a region of a sprite sheet and nine-slice insets: drag the region's box, its edges or the slice lines, zoom with the buttons or Ctrl and the mouse wheel, and Frame fits the region in view. A Bar also has a Fill Image.
• Hovered (and, on a Button, Pressed) gives the element a different look while the pointer is over it or it's held down.

A part you haven't set shows the value the engine draws without it. Reset Fill, Reset Border and Reset Text clear a whole part.

Bind: show game state

Bind makes an element show a value from the game while it runs, read from a component on a named node:

• A Bar fills from Bind Value, divided by Bind Max.
• A Text or Button shows Bind Text, with each {component.field} replaced by its value.

Bind Node names the node to read. In the Starter, the Time Bar binds to the Sunlight node's day_cycle.time, and the Time Label shows Time of day {day_cycle.time:p0}, the time as a percentage. Switching Bind on starts from what the element already shows. The number formats you can use are listed in the engine's Game UI guide.

Layout: arrange children automatically

Switch Layout on for a panel, and it places its children itself, like a row or column of boxes:

• Direction picks a row or a column, and Wrap lets children flow onto a new line.
• Gap sets the space between children, and Padding the space inside the panel's edges.
• Justify and Align set where the children sit along and across the direction.
• Each child's Grow sets its share of any space left over.

Children of a layout ignore their own anchor and offsets. Switch Layout off and each one goes back to its own placement. In the Starter, Coins is a Panel whose Layout puts the three coin slots in a row.

Follow: stick UI to something in the world

Follow names a node, and the element is drawn over that node wherever it moves on screen. Follow Offset sets where it sits from the node, in the world's units: the Starter's Nameplate follows Character with an offset of 1 up, so it floats above the character's head.

A following element is placed by its node, so you can't drag it.

What isn't there yet

• Changing Anchor doesn't keep the element in place on screen.
• A resize doesn't snap, and the corner handles don't change the pointer.
• In the web version, the resize arrows don't show over the handles.
• Elements with the same Order draw in the order they were created, not in hierarchy order.