Menu
Lumberyard
User Guide (Version 1.13)

UI Elements

UI elements are entities to which you can attach multiple components. You can start with an empty element and add components to it, such as a button, image, slider, text, and so on. Or you can add an existing pre-fabricated (prefab) element, such as a scroll box, which is an element with components already attached. You can also create your own prefab elements.

Every UI element has a required component called Transform2D. The Transform2D component defines the positioning, spacing, and size of the element relative to its parent (whether its parent is the canvas or another element). Each UI element can also have one visual component (image or text), one interactive component (button, check box, scroll box, slider, or text input), and one layout component (layout column, layout row, or layout grid). The remaining components are the mask and fader, of which UI elements can attach either or both.

For each of the following procedures, use the UI Editor to manage UI elements.

Managing UI Elements in the UI Editor

Task Steps
To create an element In the UI Editor toolbar, click New, Empty element. The element appears in the Hierarchy pane and viewport.
To move, rotate, or resize an element

Select the element, then click the Move, Rotate, or Resize tool in the toolbar.

Select Snap to grid to modify elements in increments.

To copy an element Right-click the element in the Hierarchy pane or viewport and click Copy.
To nudge an element To nudge, or move, an element one pixel at a time, select the element and click the Move tool. Use arrow keys to nudge elements in the selected direction. Press and hold the Shift key while pressing the arrow keys to nudge elements 10 pixels at a time.
To paste a copied element Right-click anywhere in the Hierarchy pane or viewport and click Paste. If an element is selected, the Paste as sibling and Paste as child options appear.
To delete an element Right-click the element in the Hierarchy pane or viewport and click Delete.
To hide an element Click the eye icon (to the right of the element name) in the Hierarchy pane or viewport. Click again to unhide the element.
To hide all elements To hide all elements, deselect any currently selected items and then click the eye icon in the topmost row of the Hierarchy pane.
To prevent selection of an element in the viewport Click the padlock icon to the right of the element name in the Hierarchy pane. This prevents selection only of that particular element; its children are still selectable.
To prevent selection of all elements in the viewport Deselect any currently selected elements (click in a blank area of the Hierarchy pane) and then click the padlock icon in the topmost row of the Hierarchy pane.
To rename an element Double-click the element in the Hierarchy pane, type the new name, and press Enter.
To nest an element Select the element in the Hierarchy pane and drag it on top of the parent element.
To change the element draw order Select and drag elements up or down in the Hierarchy pane. Elements are drawn in order starting from the top of the hierarchy list, so elements at the bottom of the list are displayed in front of elements at the top of the list.

Configuring UI Anchors and Offsets

Each UI element's position is determined by the Transform2D component. The Transform2D component sets a UI element's position and size relative to its parent's edges. The parent may be another element (if the elements are nested), or the canvas.

For more information about the Transform2D component, see Transform2D – Managing UI Anchors and Offsets.