Difference between revisions of "UIX"
Chemicalcrux (talk | contribs) (Mention the UIX Canvas and expand upon interaction a bit.) |
Chemicalcrux (talk | contribs) (Update the links to point to (Component)-suffixed pages) |
||
| Line 7: | Line 7: | ||
== Canvases == | == Canvases == | ||
| − | A UI requires a [[Canvas]] at its root. The Canvas defines the size of the UI. | + | A UI requires a [[Canvas (Component)|Canvas]] at its root. The Canvas defines the size of the UI. |
== RectTransforms == | == 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. | + | Every slot involved in a UI must have a [[RectTransform (Component)|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 == | == Layouts == | ||
| Line 19: | Line 19: | ||
== Graphics == | == 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. | + | To actually display things, your UI needs one or more Graphics components. [[Image (Component)|Image]] will fill the element, optionally taking a material (to define its appearance) and sprite (to define its shape). Other elements include [[Text (Component)|Text]], to display text, and [[Mask (Component)|Mask]], to hide parts of child UI elements. |
== Interaction == | == 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. | + | Interaction components allow for input. [[Button (Component)|Button]] will respond visibly to hovering and pressing, and will trigger other components on the slot (as well as on child slots). [[Slider (Component)|Slider]] works similarly, but can also control a child element's RectTransform to move it around. |
Revision as of 00:38, 9 February 2021
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.
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.