UIX

This article or section is a Stub. You can help the Neos Wiki by expanding it.

UIX is Neos'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.

A useful UIX demo, UIX Canvas, can be spawned with the Developer Tooltip, found under the Objects category. It provides examples of layouts, images, buttons, and sliders.

Concepts

Canvases

A UI requires a Canvas at its root. The Canvas defines the size of the UI.

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.

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 HorizontalLayout 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 maybe just the layout?) and delete the original.

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 some effectively random process.

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.

Recipes

Empty canvas

1. Using the Developer Tooltip, Create New > Empty Object.
2. In that object, Attach Component > UIX > Canvas.
3. Change the Scale of the object to 0.001 on all axes to get the object to be a more reasonable size.
4. You can then change the Canvas's Size x and y (in pixels) to your liking.
5. Next, on the same empty object, Attach Component > UIX > Graphics > Image. You can change the image's Tint to change the base color of the canvas.
6. Again using the Developer Tooltip, Create New > Materials > UI > UI Unlit.
7. Change the material's ZWrite property to On, and the OffsetFactor and OffsetUnits properties to 1.
8. Grab the material ball and click on your empty object's Image Material slot to load it in. This fixes the "bleed-through" effect which would cause different UIX objects to bleed through each other if placed on top of each other.
9. You may also want to make the canvas grabbable (Attach Component > Transform > Interaction > Grabbable).

You can now add children to be displayed on the canvas.

ProbablePrime's public folder, under Tutorials > UIX, contains a CanvasTemplate which has already done all the above steps for you. Simply spawn one out and start from there.

Tutorials

ProbablePrime's series on UIX:

1. Canvases and rectangles
2. Materials, buttons, and text
3. Text scrolling
4. Images & sprites
5. Masking images & nine slices
6. Checkboxes
7. Progress bars
8. Text fields
9. Sliders
10. Layouts
11. Common UI interactions & UIX
12. AxisMultiViewportScanner for sliding forms or UI
13. Creating a facet