UI Designer

The Designer is the visual half of a User Interface file. You drag elements onto a canvas, arrange them into a tree, anchor them so the layout survives any resolution and style them down to individual parts. What the canvas draws is what the finished game renders, because the editor and the runtime share one styling engine.

Overview

A User Interface file is a tree of elements. At the top sits the canvas root, and everything you add is a descendant of it. Containers hold other elements, leaves like Text and Image show content and controls like Slider and Checkbox take input. The Designer is where you build and shape that tree.

What you can build here:

• Menus, HUDs, inventories, save-slot screens and settings pages
• The dialogue box itself, which is now made of ordinary elements you can move, restyle or delete
• Reusable pieces, since any User Interface file can be placed inside another one

Opening the Designer

Create a User Interface file from the Content Browser: open the Add menu and choose User Interface. Double-click the file to open it in an editor tab.

A User Interface tab has two modes, and the toolbar shows a Designer / Script selector while one is focused. Click a button to switch, or press Ctrl + E (Cmd + E on macOS). The shortcut is rebindable under Settings → Keybindings, where the command is named Toggle Designer / Script Mode.

The Designer Canvas

The canvas is the stage your interface is drawn on, surrounded by editing chrome that never appears in the game:

• Rulers run along the top and left edges, with tick marks labelled in canvas units. The tick spacing adapts as you zoom so labels stay roughly evenly spaced instead of crowding or vanishing.
• A green tick on each ruler tracks the cursor, and a small readout in the bottom-left corner prints the cursor's exact x, y position in canvas units.
• A grid is tiled from the stage origin, so it pans and zooms locked to your content. Its density adapts too: the cell subdivides or merges as you zoom, instead of becoming unreadably dense or sparse.
• The letterbox outside the screen area is dimmed, with a dashed one-pixel edge marking exactly where the screen ends. The dashed edge stays crisp at any zoom level.

The canvas is measured in canvas units, not screen pixels. The stage is 1080 units tall by default, and the width follows whichever aspect you are previewing at. Set a custom preview size and the stage becomes exactly that many units instead.

Panning & Zooming

• Pan: hold the right mouse button and drag.
• Zoom: scroll the wheel. Zoom is anchored to the cursor, so the point under the pointer stays put.
• Zoom controls: a panel in the top-right corner shows the current zoom with Zoom In and Zoom Out buttons and a Reset Zoom & Pan button. Zoom ranges from 10% to 500%.
• Zoom to selection: press F to center the selected element and zoom to fit it.

Preview Size

The badge at the bottom of the canvas picks what shape you design against. Three modes are available:

• Free lets the stage fill the pane with no aspect lock.
• A preset ratio letterboxes the stage to a fixed aspect. Eleven presets ship, ordered widest to tallest: 32:9, 21:9, 16:9, 16:10, 3:2, 4:3, 1:1, 3:4, 2:3, 9:16 and 9:19.5. Each carries a hint naming a typical device, from Super Ultrawide down to iPhone.
• Custom takes an exact width and height in pixels and makes the stage exactly that size. Values are clamped between 8 and 8192.

Whatever you pick is stored in the file, so a phone-shaped interface reopens phone-shaped. A file with no stored choice falls back to the Default Preview Ratio setting, which is what every file starts at. Preview size is design-time only: the runtime, Play and exports ignore it entirely.

The Three Panels

Designer mode gives you three panels around the canvas, and each one has its own search box at the top.

Elements

The Elements palette is the catalog you drag from. Rows are grouped into collapsible categories:

• Primitives: Text, Image, Button, Box and Spacer
• Containers: Vertical Box, Horizontal Box, Overlay, Scroll Box, Grid Box and Switcher
• Controls: Text Input, Checkbox, Dropdown, Slider and Progress
• Dialogue: the dialogue parts, plus the Options element
• User Interfaces: one row per User Interface file in the project, so a file you already built is itself an element you can place

Every row carries a hover tooltip explaining what that element is for in plain terms. The User Interfaces category appears only once the project has at least one other User Interface file, and it never lists the file you are currently editing. Where two files share a name, the row shows the parent folder in brackets so they read distinctly. Typing in the search box filters rows by label across every category.

Hierarchy

The Hierarchy is the element tree. Each row shows the element's type icon and its name, with connector lines drawing the parent and child relationships. Rows with children get a chevron to collapse the branch.

Two controls sit on the right of every row and stay visible:

• The eye hides the element and its subtree on the canvas only. The flag is saved in the file and survives reopening, but the runtime ignores it, so a designer-hidden element still shows in Play and in exports. That makes it a working tool, not a visibility property. Real visibility is the Visibility row in Element Settings.
• The padlock locks the element so the canvas will not select it, and clicks fall through to whatever unlocked element sits behind. A locked element's settings rows are all greyed out, so you can still browse it without editing it. Locking from the row menu cascades to descendants.

Dragging a row reorders the tree. The grabbed row and its whole subtree dim while you drag, and a purple line shows where the element will land. Drop above or below a row to place it as a sibling, or in the middle band of a container row to drop it inside. The indicator only appears where the drop is actually legal, so if you see no line the move would not happen.

Element Settings

Selecting an element fills the Element Settings panel. A pinned header at the top always shows three things no matter how far you scroll:

• Name: the element's display name, which is what the Hierarchy shows and what scripts reference it by. Names are unique per file and commit on blur or Enter. An empty or already-taken name reverts.
• Is Variable: exposes the element to the script graph. Untick it while script nodes still reference the element and a confirmation appears first, listing how many other files also use it.
• A type badge with the element's icon and type name, so the panel always answers "what am I editing".

Below the header the rows are grouped into collapsible sections in a fixed order: Layout, then Content (or Value on Slider and Progress), Appearance, States, Behavior, Drag and Drop, Tooltip, Rendering and Events. The search box filters rows by label and by section, so typing padding narrows a long panel to just the padding rows.

Adding Elements

Drag a row out of the Elements palette and drop it either on the canvas or straight into the Hierarchy. Both routes create the same element.

Dropping on the canvas:

• A live preview of the real element follows the cursor at reduced opacity, so what you see mid-drag is what lands.
• A dashed purple footprint outlines exactly where and how big the drop will be. That matters for transparent containers, which would otherwise be invisible while dragging.
• Drop over a container, or over an empty Button or Box, and the ghost hides while the target lights up with a green outline, telling you the element will land inside it rather than beside it.
• The whole pane accepts drops, including the dimmed letterbox, so you can legitimately place an element at off-screen coordinates.

Dropping into the Hierarchy: a purple pill with the element's icon and label follows the cursor, and the same before, after or inside indicator the reorder drag uses shows where it will go. Dropping in the empty space below the last row adds it at the top level.

You can also drag a User Interface file straight from the Content Browser onto the canvas or the Hierarchy. The dropped element is an Instance already pointing at that file.

Wrap, Replace & Dissolve

Right-click an element, either on the canvas or on its Hierarchy row, and you get the same menu. Three of its items restructure a tree in place instead of making you take it apart and rebuild it:

The rest of the menu covers Rename, Copy, Paste, Duplicate, Show / Hide, Lock / Unlock and Delete. The four that have one show their current keyboard shortcut on the row. Rename selects the element and puts the cursor in the Name field with the text selected.

Naming, Locking, Hiding & Multi-Select

Every element carries a non-empty, file-unique name. Fresh elements are auto-named from their type, so the first Button is just Button and the second becomes Button 2. Dialogue parts are named after their role instead, so a character name element reads Character Name rather than Text.

Selecting more than one element:

• On the canvas, hold Ctrl (Cmd on macOS) or Shift and click to add or remove an element from the selection.
• In the Hierarchy, Ctrl-click toggles a single row and Shift-click selects the whole range between the last row and the one you clicked.
• With several elements selected, the right-click menu switches its Copy, Duplicate, Hide, Lock and Delete items to batch versions that act on the whole selection.

Right-clicking an element that is already part of a multi-selection keeps the selection intact. Right-clicking anything else collapses it to that single element first.

Canvas Shortcuts

These commands are scoped to the User Interface canvas and appear under Settings → Keybindings in the User Interface Editor group, where every one of them can be rebound.

Mouse gestures on the canvas:

• Drag an element to move it. Hold Shift to lock the drag to whichever axis you have moved furthest along, re-evaluated as you go, so easing back toward the other axis switches the lock.
• Drag a resize handle to resize. Hold Shift to keep the element's aspect ratio.
• Right-click opens the element menu. The canvas tolerates a small accidental pan, so a right-click that moves less than about ten pixels still opens the menu while a real pan does not.

Anchors & Layout

Every element on the canvas is pinned to its parent by an anchor. An anchor is a pair of fractions on each axis, from 0 to 1, describing a spot inside the parent. When the parent resizes, the anchor moves with it and the element follows, which is what keeps a layout together at any resolution.

Two shapes are possible per axis:

• Anchor to a point when the minimum and maximum fractions match on that axis. The element keeps a fixed size and hangs off that point.
• Stretch across an axis when they differ. The element spans between the two fractions, and its offsets on that axis become edge margins rather than a position and a size.

The Anchor Medallion

Select a canvas element and four white petals appear, one at each corner of the anchor rectangle. They always fan outward, so at the edge of the screen they hang outside it rather than covering your element.

• Drag a petal to move that corner of the anchor. A live percentage readout follows the handle as you drag.
• Drag the center dot to move the whole anchor at once. The dot only appears on point anchors, since a stretched anchor has no single center to grab.
• By default the element stays put while the anchors move around it, and the offsets are rewritten to compensate. Hold Ctrl (Cmd on macOS) while dragging to move the element together with its anchors instead.

The Anchor Preset Grid

The Anchor row in Element Settings shows a 4x4 grid of preset cells. The first three rows and columns give the nine point anchors: the four corners, the four edge centers and the middle. The last column stretches horizontally, the last row stretches vertically and the bottom-right cell fills both axes. Each cell draws its own glyph, so a dot means a point, a bar means a stretched axis and a hollow square means fill.

Two modifiers change what clicking a preset does, and both are named in the cell's own tooltip:

• Ctrl-click (Cmd-click on macOS) also moves the element to the anchor rather than leaving it where it was.
• Shift-click also sets the alignment to match the preset, so a bottom-right preset aligns the element by its bottom-right corner.

Position, Size & Alignment

Under the grid, the layout rows come in paired X and Y cells so both axes read at once. A chevron on the label expands the pair into separate rows when you want more room.

Container & Content Slots

An element that lives inside a container does not carry an anchor. The container owns its geometry, and the Layout section changes to match.

• Inside a Vertical Box or Horizontal Box you get Fill, a weight for sharing leftover space with other filled siblings where 0 keeps the element's own size, plus Align for how it lines up across the stacking direction and a per-side Padding.
• Inside a Grid Box the panel says so plainly and shows no layout controls. The grid arranges its children automatically.
• Inside a Vertical Box, Horizontal Box or Scroll Box you get Fill, a weight for sharing leftover space with other filled siblings where 0 keeps the element's own size, plus Align for how it lines up across the stacking direction and a per-side Padding.
• Inside a Grid Box the panel says so plainly and shows no layout controls. The grid arranges its children automatically.
• Inside a Button, Box, Overlay or Switcher the element occupies a content slot, so it gets Horizontal Align (fill, left, center or right), Vertical Align (fill, top, center or bottom) and a per-side Padding that insets it from the container's interior.
• Inside a dialogue container the panel says the layout comes from the dialogue container, because the dialogue column owns that geometry.

Containers themselves get extra rows in Appearance. Clip Content hides any child content that spills past the container's edges, which makes it the non-scrolling counterpart to a Scroll Box. It is offered on Box, Vertical Box, Horizontal Box, Grid Box and Overlay. Max Width caps how wide the container can get, with a Max Width Align row deciding whether the capped content sits at the start, the center or the end.

Styling Elements

Everything you set in the Appearance and States sections renders identically on the canvas, in Play and in an export, because the editor and the game share one styling engine. There is no separate preview fidelity to worry about.

Per-State Colors

Interactive elements get four extra sections after Appearance, one per interaction state: Hover, Pressed, Disabled and Focused. Each holds a color row per part the element draws, for example Text, Background and Border on a button, or Track, Fill and Thumb on a slider.

A state you never touch inherits from Normal. The States section itself carries a Preview dropdown that repaints the canvas in a chosen state (Normal, Hover, Pressed, Disabled or Focused) so you can style a state you cannot otherwise hover into.

Image Brushes & 9-Slice

Any element that draws a background can wear an image brush instead of a flat color. The States section offers a Normal Image, and each of the four state sections offers its own Image, so a button can swap texture on hover.

Picking an image reveals a Mode row with three draw modes:

• Stretch scales the image to fill the element.
• Tile repeats it at its native pixel size. A Tile Size row sets the width of each repeat, with the height following the image's shape. 0 means use the image's real size.
• 9-Slice keeps the four corners fixed and stretches only the edges and the middle, which is what lets one small panel texture scale to any size cleanly. A Slice control sets the four inset distances, using the same four-side layout as padding. Switching to 9-Slice from a brush with no insets seeds a visible starting value, because zero insets would render exactly like Stretch.

Clearing the image selection removes the brush entirely and the element falls back to its color background.

Padding, Margin & Borders

Padding, margin, border width and border radius all use the same control: Padding, margin and border width all use the same control: four cells arranged in a plus, one per side, with the unit in the middle and a chevron on the label that expands them into named Left, Top, Right and Bottom rows. Border radius works the same way per corner, with its four cells in a 2x2 grid. An element whose resting value is asymmetric, such as a button, shows that resting value in the cells without writing anything to the file until you actually edit it., with a chevron on the label that expands them into named Left, Top, Right and Bottom rows. Border radius works the same way per corner. An element whose resting value is asymmetric, such as a button, shows that resting value in the cells without writing anything to the file until you actually edit it.

Text Outline & Shadow

Text elements get five collapsible sub-groups inside Appearance: Outline, Shadow, Background, Border and Scrollbar. Outline draws a stroke around the glyphs and Shadow drops a colored shadow with its own Blur control. Alongside them sit the usual typography rows including font, size, color, alignment and Line Height. Outline draws a stroke around the glyphs, and Shadow drops a colored shadow with its own Blur control. Alongside them sit the usual typography rows including font, size, color, alignment and Line Height, plus a Scrollbar sub-group for text that can overflow.

Control Parts & Dropdown Lists

The controls are styled part by part rather than as one blob, each part in its own sub-group:

• Slider: Track, Fill and Thumb
• Progress: Track and Fill
• Checkbox: Box and Check Mark, with separate checked colors, a checked border and both a checked and an unchecked image
• Dropdown: an Arrow sub-group for the chevron and a List sub-group for the open surface

The dropdown's List group styles the popup surface, its rows, an optional Alternate Row Color, a Hover sub-group, a Selected sub-group for the highlighted row and a Scrollbar sub-group. Because the list is only visible while a player has it open, the group starts with a Preview Open toggle that pins the list open on the canvas so you can style it. It affects the Designer only and changes nothing in Play. Because the list is only visible while a player has it open, the group starts with a Preview Open toggle that pins the list open on the canvas so you can style it. It affects the Designer only and changes nothing in Play.

How Settings Rows Work

Every row in Element Settings follows the same conventions, which is worth knowing once:

• A reset button appears at the end of a row only while its value differs from the default. Clicking it puts the default back. Its tooltip reads Reset to default.
• A tooltip on the label explains what the row does, in the same plain language as the palette tooltips.
• Number cells scrub. Press and drag across a number to change it, or click to type an exact value. A scrub records one undo entry for the whole gesture.
• The label column is resizable. Drag the divider between the labels and the controls to widen either side, and double-click it to snap back to the default width.
• The panel remembers its scroll position, so flipping to Script mode and back does not throw you to the top.