Introduction
UIX is Resonite's UI system. It allows you to create two-dimensional user interfaces, and is conceptually similar to the Unity UI system. It underpins the Dash Menu and Scene Inspector.
There is a dedicated UIX Category for building UIX and its elements and components.
Demos & Starting Points
A useful UIX demo, UIX Canvas Blank or UIX Canvas Sample, can be spawned with the Developer Tool, found under the Objects category. It provides examples of layouts, images, buttons, and sliders.
Another useful starting point is using the panel in the UI Presets folder provided in the Resonite Essentials folder. Double click the panel item to spawn it, then edit it from there.
There is a UIX Tutorial to put together UIX easily.
Concepts
Canvases
A UI requires a Canvas at its root. The Canvas defines the size of the UI.
The components that utilizes the canvas concept:
| Components | Description |
|---|---|
| Canvas | The root UIX for all your elements. |
| Nested Canvas | A secondary root for UIX elements, this is mainly used to be consistent with the main canvas. |
RectTransforms
Every slot involved in a UI must have a RectTransform on it. RectTransforms are automatically added when you attach other UI components. The RectTransform determines the boundaries of that UI element, expressed as a fraction of the total space available -- so a default RectTransform has anchors at 0,0 and 1,1.
The components that utilizes the RectTransforms concept:
| Components | Description |
|---|---|
| RectTransform | The container designed to hold your UIX elements like buttons, fields, sliders, etc. |
| RectTransformComputedProperties | A component that can return the size of the rect transform and all its contents. |
Layouts
Whilst you can manually position elements by adjusting their RectTransforms, you often want this to be handled automatically. A layout overrides the RectTransforms of its slot's children. For example, the Horizontal Layout component will try to position its children in a horizontal line.
Since layouts depend on the order of their children, and you can't drag children around in the inspector, you must specify a child's OrderOffset property. Normally these are 0, but if you change it, the children will be ordered by increasing OrderOffset, with children of equal OrderOffset being ordered by time of creation of that slot.
Again, if you change the OrderOffset of a child, your layout will have to be recalculated, which may run into the above warning.
Graphics
To actually display things, your UI needs one or more Graphics components. Image will fill the element, optionally taking a material (to define its appearance) and sprite (to define its shape). Other elements include Text, to display text, and Mask, to hide parts of child UI elements.
Interaction
Interaction components allow for input. Button will respond visibly to hovering and pressing, and will trigger other components on the slot (as well as on child slots). Slider works similarly, but can also control a child element's RectTransform to move it around.