UIX

This page is actively undergoing a major edit. To help avoid edit conflicts, please do not edit this page while this message is displayed.

This page was last edited at 22:43, 20 July 2024 (UTC) by AmasterAmaster. Please remove this template if this page hasn't been edited for a significant time. If you are the editor who added this template, please be sure to remove it or replace it with {{Template:Under construction}} between editing sessions.

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.

WARNING: Layouts calculate the positions and sizes of their children based on the children themselves. If you modify or add or delete a child and don't get the expected result, you may need to force recalculation. The only way to do this currently is to duplicate your entire object or just that slot holding the layout and delete the original. If there was ProtoFlux referenceing that original slot, components, or fields, you will need to re-reference them using the new duplicated slot.

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.