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. 데브툴팁을 사용하여 새로 만들기 > 빈 오브젝트 선택
2. 인스펙터에서 Attach Component > UIX > Canvas.
3. 슬롯의 X, Y, Z의 Scale 값을 모두 0.001로 설정하여 적당한 크기로 재조정합니다.
4. Canvas 구성요소의 속성 중 Size의 X, Y값을 픽셀단위로 입력하여, 원하는 크기로 만듭니다.
5. 다음으로, 같은 슬롯에 Attach Component > UIX > Graphics > Image 구성요소를 추가하고, Tint 속성값을 조정하여 기본 바탕색상을 설정할 수 있습니다.
6. 적용할 머티리얼을 만들기 위해, 또다시 데브툴팁을 장착하고, 새로 만들기 > 머티리얼(Materials) > UI > UI Unlit을 선택합니다.
7. 해당 머티리얼 속성 중 ZWrite값을 On으로 지정하고, OffsetFactor와 OffsetUnits 속성값은 1로 할당합니다. (이 설정은, 여러개의 UI 객체가 중첩되어 있을때 발생하는 블리드쓰루 문제를 해결해 줍니다.
8. 생성된 머티리얼을 집어서, 새로 만들었던 Image 구성요소의 Material 속성에 적용합니다.
9. 또한, Canvas를 집을수 있도록 하기 위해 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