Difference between revisions of "UIX"
(Adds tutorial section) |
|||
Line 34: | Line 34: | ||
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. | 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. | ||
</translate> | </translate> | ||
+ | |||
+ | == Tutorials == | ||
+ | |||
+ | [[User:ProbablePrime|ProbablePrime]]'s series on UIX: | ||
+ | |||
+ | # [https://www.youtube.com/watch?v=cLtD7uWrduI Canvases and rectangles] | ||
+ | # [https://www.youtube.com/watch?v=lCGfFJYOj3o Materials, buttons, and text] | ||
+ | # [https://www.youtube.com/watch?v=cTcOdVw1cEQ Text scrolling] | ||
+ | # [https://www.youtube.com/watch?v=FUUSjTwhvHk Images & sprites] | ||
+ | # [https://www.youtube.com/watch?v=WPL776reVFw Masking images & nine slices] | ||
+ | # [https://www.youtube.com/watch?v=B2G708bnBeM Checkboxes] | ||
+ | # [https://www.youtube.com/watch?v=wwvyTqjC5Q0 Progress bars] | ||
+ | # [https://www.youtube.com/watch?v=ReERNLr-CJo Text fields] | ||
+ | # [https://www.youtube.com/watch?v=kqF4vF_iYPU Sliders] | ||
+ | # [https://www.youtube.com/watch?v=1-FF9IolGZw Layouts] | ||
+ | # [https://www.youtube.com/watch?v=rkTmciUYJlY Common UI interactions & UIX] | ||
+ | # [https://www.youtube.com/watch?v=kbASFui7YWk AxisMultiViewportScanner for sliding forms or UI] | ||
+ | # [https://www.youtube.com/watch?v=qxJzTZGyeqw Creating a facet] | ||
+ | |||
+ | |||
+ | <youtube>cLtD7uWrduI</youtube> |
Revision as of 23:51, 14 April 2021
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.
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.
Tutorials
ProbablePrime's series on UIX:
- Canvases and rectangles
- Materials, buttons, and text
- Text scrolling
- Images & sprites
- Masking images & nine slices
- Checkboxes
- Progress bars
- Text fields
- Sliders
- Layouts
- Common UI interactions & UIX
- AxisMultiViewportScanner for sliding forms or UI
- Creating a facet