Lumberyard
User Guide (Version 1.15)

UI Components

UI components define the properties of a UI element. For example, every element has a Transform2D component that defines its position, rotation, size, and scale. You can give an element additional properties by adding components, such as adding the image component to give an element color or texture. Each UI element can 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). You can attach any or all of the remaining components: dynamic components, tooltips, tooltips display, mask, and fader.

Adding or Deleting Components

You can easily add or delete components in the UI Editor.

To add a component to an element

  1. In the UI Editor, select an element in the Hierarchy pane and click Add Component at the top of the Properties pane.

  2. Select the component (image, text, button, check box, slider, text input, scroll box, fader, mask, layout column, layout row, or layout grid) that you want to add to the element.

  3. Use the instructions for the specific component you are adding in the next section.

To delete a component from an element

  • In the UI Editor, select an element in the Hierarchy pane. Right-click the component in the Properties pane and click Remove.