Create your own buttons, health bars, score displays and menus with this node. Open the UI Editor in the node's Details panel to get started.
The components you create with the UI node can be moved and scaled to any part of the screen. The position of the UI components is based on proximity to different screen zones so the UI will adjust for different sized screens. You can even use Pixel Art in your custom UIs!
| Edit | Enters the UI Editor |
| Visible | Determines if the component is visible |
| Preview | If enabled, shows the preview of the UI in the editor |
| Z Index | Drawing order for the UI node. UI node with higher Z Index will be drawn on top. |
Design the components of your custom User Interfaces in the UI Editor. You'll be able to define the different parts, how they will appear, and which parameters can be adjusted with other node.
The largest panel on the left is the Canvas where you can move around and arrange your UI components.
Drag components into the scene from the Components or Premade menus.
At the bottom of the screen are all the components you have to create your UI.
The Components tab has individual pieces while the Premades tab will have preset UI set-ups.
Drag components from the menu into the Scene to add them to your UI.
When you select a component in the UI editor, its properties will be displayed in the Properties panel on the upper right side of the screen.
Different components will have different properties depending on what they do but all components share two important properties, Alignment and Inputs and Outputs.
Alignment determines where the component appears on the screen. Players could be playing your game on different-sized screens, so components are anchored to different screen regions instead of one overall screen space. It's important to keep this in mind and ensure your UI components are aligned to the right screen region so that the UI will be placed properly on any screen.
Inputs and Outputs opens a menu where you can set the parameters of the component that can receive signals from other nodes, and which can send signals forward. For example a button will need to send signals to other nodes while a health bar needs to get the player's health from the health logic.
The Hierarchy menu lists all the components used in your UI.
Each component can be re-ordered by dragging the menu icon on the right. The component at the top of the list is the bottom layer, components under it will appear on top in the UI
Components can also be embedded in each other: drag the component to be embedded over the intended parent and release when the bounding box turns red.
Here's a link to a demo that shows how to use the User Interface node: