The User Interface tool is used to create custom UI elements for your games such as health bars or scoreboards. The tool allows you to place buttons, progress meters & text elements. These can be moved and scaled to any part of the screen. The position of UI elements is based on proximity to different screen zones so the UI will adjust for different sized screens.
| Edit | Enters the UI Editor |
| Visible | Determines if the component is visible. |
| Preview | If enabled, shows the preview in the editor. |
| Z Index | Draw order for the UI node. UI node with higher Z Index will be drawn on top. |
Within the UI Node is the UI Editor. This editor will allow you to decide what elements your UI will have, how they will appear and what parameters can be adjusted by other Nodes.
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 have a component selected in your scene it's properties will be displayed in the Properties panel on the upper right side of the screen. Here you can adjust all the parameters associated with that component.
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 that component appears on the screen. Players could be playing your game on many 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 your UI will be well placed on any screen.
Inputs and Outputs opens a menu where you can set what parameters of the component can receive signals from outside Nodes and which can send signals for ward. 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 to change which appear on top 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 another component by dragging it over the intended parent and releasing when the bounding box turns red.
Here's a link to a demo game that shows how to implement and use the User Interface node: