UI editor

BeginnerArtistDesigner

You can edit UI pages and UI libraries with the UI editor.

To open the editor, in the Asset View, double-click a UI page or UI library.

Open UI editor

The UI editor opens.

UI editor overview

The UI editor comprises:

  • the list of UI libraries (A), which contain the elements (such as buttons and grids) you can add to your UI

  • a visual tree of the elements in the UI page (B)

  • a preview of the UI page as it appears in the game (C)

  • a Property Grid (D) to edit the properties of your UI elements

UI libraries

A UI library contains UI elements (such as grids, buttons, sliders and so on) that you can use and re-use in your UI pages. They work similarly to prefabs in the Scene Editor.

UI library

For more information, see UI libraries.

Visual tree

The visual tree shows the elements in the UI page and their hierarchy. This is similar to the Entity Tree in the Scene Editor.

UI asset properties

The number in parentheses indicates the number of children an element has. Some elements, such as buttons, can only have one child.

To re-order elements in the visual tree, drag and drop them.

To move an element to a new group, right-click the element and select Group into. For example, to create a new grid and move an element into it, right-click the element and select Group into > Grid.

Group into grid

UI preview

The UI preview displays a preview of the UI as it appears at runtime. The rendering is equivalent to the rendering in the game, assuming the design resolution is the same as the UI component that uses the edited asset.

By default, the UI is a billboard, meaning it always faces the camera. The UI view camera is orthographic (see Cameras).

You can select, move, and resize elements in the preview as you do in image editing applications.

Select an element

Move an element

Resize an element

Controls

ActionControl
PanHold middle mouse button + move mouse
ZoomMouse wheel
Speed up pan/zoomHold shift while panning or zooming

Tool options

To change the color and size of the selection tools, in the UI editor toolbar, click Eye icon

Note

These options have no effect on how the UI is displayed at runtime.

UI editor view options

  • Guideline: changes the width of the lines that indicate the distance to the margins (in pixels)

  • Highlight: changes the width of the highlight that appears when you move your mouse over an element

  • Selection: changes the width of the selection highlight

  • Sizing: changes the size of the boxes at the edges of selections used to resize elements

Add a UI element to a UI page

To add an element (such as a grid or button), drag it from the UI library to the UI page or the visual tree.

Add UI element

Properties

You can view and edit element properties in the Property Grid.

Property Grid!

Properties are sorted by Appearance, Behavior, Layout and Misc.

Appearance

Commonly used properties include BackgroundColor, Opacity, Visibility and ClipToBounds.

Appearance properties

Behavior

Commonly used properties include whether the element responds to touch events(CanBeHitByUser).

Behavior properties

Layout

Commonly used properties include the size of the element (Height, Width and Depth), its alignment (HorizontalAlignment, VerticalAlignment, DepthAlignement) and its Margin.

Layout properties

Misc

This category contains only the Name of the element.

Misc properties

See also