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.
Section topics
| Topic | Description |
|---|---|
| Working with UI components | Learn how to work with O3DE’s UI components. |
| UI Transform2D | Use the UI Transform2D component to position and scale UI elements. |
| Visual components | Learn about the visual components you can add to UI elements. |
| Interactive components | Learn about interactive components and how UI canvases consume user input. |
| Layout components | Learn how to use the layout components to arrange elements on a canvas. |
| Tooltip components | Add tooltips to your canvases with the Tooltip components. |
| UI Fader | Use the UI Fader component to adjust the transparency of UI elements. |
| UI Flipbook Animation | Use the UI Flipbook Animation component together with the UI Image component to create animations. |
| UI Mask | Use the UI Mask component to selectively hide areas of an element’s children. |
| UI Spawner | Learn how to spawn UI elements at runtime. |
Working with UI Components
Learn how to add and delete components, reference UI elements as component properties, manage existing components in Open 3D Engine’s UI Editor and create your own UI components.
UI Transform2D
The Transform2D component defines an element’s position, rotation, size, and scale.
Visual Components
Use visual components (image or text) to give an element color and texture, or text in Open 3D Engine’s UI Editor .
Interactive Components
Use interactive components in the Open 3D Engine UI Editor.
Layout Components
Use layout components in O3DE’s UI Editor to organize child elements into columns, rows, or a grid.
Tooltip Components
Use tooltip components to give an element a tool tip when hovering over it, and configure its display properties in O3DE’s UI Editor.
UI Fader
Use the Fader component to adjust the transparency of an element and its children.
UI Flipbook Animation
Add the Flipbook Animation component to an element to create simple image-based animations in Open 3D Engine.
UI Mask
Add the Mask component to an element to reveal parts of the child element in Open 3D Engine.
UI Spawner
Use the Open 3D Engine UI Spawner component to spawn a runtime dynamic slice at an entity’s location with an optional offset.