UIX/ko

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

UIX라 함은 네오스의 UI 시스템을 의미하는 용어입니다. UIX는 유니티 UI와 유사하게, 평면의 사용자 인터페이스를 생성할 수 있도록 해줍니다. 이 기능은 대시 메뉴와 인스펙터를 구현하는 근간이 됩니다.

사용 가능한 UIX 데모는 UIX Canvas가 있으며, 이는 Developer Tooltip을 통해 생성해 볼 수 있습니다. 툴 장착 후 컨텍스트 메뉴에서 새로 만들기 선택 후 오브젝트 항목 내에서 UIX Canvas를 선택합니다. UIX Canvas는 레이아웃, 이미지, 버튼, 슬라이더 등의 예제를 제공합니다.

기본개념

Canvases

UI는 root에 속한 Canvas를 필요로 합니다. Canvas는 UI의 크기를 정의하지요.

RectTransforms

UI를 적용할 모든 슬롯은 RectTransform 구성요소를 가지고 있어야 합니다. UI 구성요소를 슬롯에 추가하면 RectTransforms가 자동으로 추가 되므로 보통은 직접 추가하실 필요는 없습니다. RectTransform은 정해진 범위 내에서 사용할 영역의 경계를 결정합니다. -- 그래서 RectTransform의 배치정보는 0,0과 1,1을 기본값으로 가집니다.

Layouts

RectTransform을 이용하여 수동으로 UI을 배치할 수 있으나, 종종 자동으로 배치되는게 필요할 경우(예, 가상키보드, 커스텀UI 등)가 있습니다. Layout 구성요소들은 하위 슬롯의 RectTransforms을 재정의 하므로, 자식의 RectTransforms의 속성들을 무시할 수 있습니다. 예를 들자면 HorizontalLayout같은 컴포넌트는 하위 슬롯의 요소들을 수평으로 배치할려고 하지요.

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

정확히는 화면에 보여지는 것을 의미합니다. UI는 한개 이상의 Graphics 구성요소들로 이루어집니다. Image 범주에 속하는 하위 구성요소로는 재질등을 표현하기 위한 머티리얼, 모양을 정의하기 위한 스프라이트 그리고 문자열을 출력하기 위한 Text 구성요소 등이 있습니다. 또한, UI 요소의 일부를 숨기기 위한 Mask 컴포넌트도 있습니다.

Interaction

Button 구성요소는 지시선으로 가리킬때 발생되는 Hovering과 터치나 클릭으로 반응하는 Pressing을 이용하여, 사용자 정의의 기능을 수행할 수 있고, Slider또한 버튼과 비슷하게 작동하지만 자식 요소의 RectTransform 구성요소를 제어하여 스크롤링을 처리할 수 있습니다.

만드는 방법

텅 빈 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.

A button

1. Add a child to your canvas (or layout or whatever) and call it Button.
2. In that object, Attach Component > UIX > Graphics > Image. You can change the image's Tint to change the base color of the button.
3. Change the RectTransform's AnchorMin/Max to add a border around the button. This effectively tells the parent where the child is and how to scale it.
   • AnchorMin (x,y) is the lower left corner of a rectangle on the parent canvas that the child should be fit into, ranging from 0 to 1. (0,0) is the lower left of the parent.
   • AnchorMax (x,y) is the upper right corner of a rectangle on the parent canvas that the child should be fit into, ranging from 0 to 1. (1,1) is the upper right of the parent.
   • Adding a small border of, say, 5% of the parent's size, means the AnchorMin should be (0.05,0.05) (i.e. 0,0 plus 5%) and AnchorMax should be (0.95,0.95) (i.e. 1,1 minus 5%).
4. Attach Component > UIX > Interaction > Button. Based on the image's Tint, the button will automatically fill out the colors for its normal, highlight, press, and disabled states.
5. You may add text to the button:
   1. Create a child object of the button and call it Text.
   2. On that child, Attach Component > UIX > Graphics > Text.
   3. Change the text to what you want.
   4. Alter the font size, set up autosize, change the alignment to what you want.
6. You can hook the button up to LogiX by creating a Button Events node, dragging out the Button interface card, and hooking it up to the Button Events node.

You can also put an icon on a button.

1. On the Button object, Attach Component > Assets > SpriteProvider.
2. Drop your chosen image into the Texture property of the SpriteProvider.
3. Grab the SpriteProvider and drop it into the Sprite property of the Button's Image.
4. Use the Tint property on the Image to color the icon.
5. You can parent the Button to another object with an Image to set the background.

ProbablePrime's public folder, under UI Stuff > Icons > Shapes, has many icons for your use.

Scrollable text

1. Add a child to your canvas (or layout or whatever) and call it Mask.
2. In that object, Attach Component > UIX > Mask. This effectively makes any graphical elements from children that wander outside the RectTransform invisible.
3. In the same object, Attach Component > UIX > Graphics > Image.
4. Turn on the Mask's ShowMaskGraphic property.
5. Add a child to the Mask object and call it ScrollRect.
6. In that object, Attach Component > UIX > Interaction > ScrollRect.
7. In the same object, Attach Component > UIX > Layout > ContentSizeFitter.
8. Set the ContentSizeFitter's VerticalFit property to MinSize.
9. In the same object, Attach Component > UIX > Layout > VerticalLayout.
10. Add a child to the ScrollRect object and call it Content.
11. In that object, Attach Component > UIX > Graphics > Text.
12. Change the text to what you want. Typically for long text that you get from a file, you would import a text file from your computer, inspect the result, navigate to the text component (object > ScrollRect > Content), and grab and drag the Text component's Content property into your object's Text Content.
13. Alter the font size, set up autosize, change the alignment to what you want.
14. Change the font color to something that will show up against the mask image color!

A simple vertical layout

1. Add a child to your canvas (or layout or whatever) and call it Layout.
2. In that object, Attach Component > UIX > Graphics > Image. Set the Tint to something that will differentiate this object from child objects.
3. Also in that object, Attach Component > UIX > Layout > VerticalLayout.
4. Change all the Padding and the Spacing properties on the VerticalLayout to 4.
5. Add a child of Layout, and call it Element.
6. In that object, Attach Component > UIX > Graphics > Image. Set the Tint to something that will differentiate this object from the layout object.
7. Duplicate this object a few times. They will all be children of Layout.
8. You may need to heed the warning above, and duplicate the canvas to get the layout to recalculate.
9. You can add LayoutElement to each Element. This tells the parent layout how to calculate widths and heights.

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