UGUI

 

 

UGUI

---

 Unity엔진 에서 제공하는 UGUI에 대해서 알아보도록 하겠습니다. 유니티 자습서에서 기초중에 기초를 영상을 통해 친절하게 설명해 주고 있습니다.

 

UGUI도 사용하기 편리하지만 UGUI나 NGUI나 파티클 렌더링 문제(Depth)는 존재하고 UGUI에는 Center On Child같은 기능이 없습니다.

 

1. UI Canvas

The Canvas is the root component for rendering all UI objects in Unity

"캔버스는 유니티에서 모든 UI 오브젝트를 렌더링 하는데 필요한 루트 컴포넌트 입니다."

 

 영상에서 제공하는 대사 입니다. 영상 돌려보기 불편하신 분들을 위해 적어두었습니다. 

 

 캔버스는 UI 엘리먼트 그룹의 렌더링을 관리하는 컴포넌트 입니다.

 모든 UI 엘리먼트는 캔버스의 자식입니다.

 한 씬에서 캔버스를 2개 이상 가질 수 있습니다.

 하지만 UI 엘리먼트를 사용하려면 사용할 수 있는 캔버스가 최소 1개여야 합니다.

 UI 엘리먼트가 새로 생성되었는데 캔버스가 없다면 새로 생성되며 새로운 UI 엘리먼트가 해당 캔버스에 자식으로 첨부됩니다. 

 

 각 캔버스에는 다양한 렌더 모드가 있습니다.

 

 렌더 모드(Render Mode)는 팝업 메뉴로 설정할 수 있습니다.

 Screen Space - Overlay는 가장 흔한 렌더 모드이며 캔버스의 기본 렌더 모드 설정입니다.

 Screen Space - Overlay를 선택하면 UI는 씬을 오버레이합니다. 또한 모든 UI 엘리먼트는 해당 씬에서 렌더링되는 다른 모든 것 위에 오게 됩니다.

 이 모드에서 캔버스는 자동으로 스크린을 채우고 스크린 설정이 변하면 자동으로 크기를 조정합니다.

 

 

 이미지 하나를 가지고 테스트를 해 보는데 중심점(Anchor Point)를 화면 어디에 두는지 중요합니다. 4:3 비율 10:9 비율 1024 x 768, 1280 x 720 스크린 모드에서 중심점을 우측에 두고 이미지 위치를 -100으로 두면 화면 크기에 따라 캔버스 크기가 자동으로 변하고 이미지 위치가 정확하게 화면 크기에 따라 우측에서 -100에 위치하게 됩니다.

 

1024 x 768

16 : 10

 

 Screen Space - Overlay 모드에서 캔버스는 Rect Transform 컴포넌트를 드라이브한다는 점에 유의합니다. 그리고 전체 Rect Transform 컴포넌트를 편집할 수 없습니다. 캔버스는 Rect Transform의 모든 값을 설정해 자동으로 스크린을 채웁니다. 컴포넌트 관련 추가 정보를 확인하려면 아래 링크의 정보를 참조하십시오.

 

정보를 볼 수만 있는 Rect Transform 컴포넌트

 

 이 렌더 모드에는 Pixel Perfect 옵션이 있습니다. 이 모드를 선택하면 UI 엘리먼트는 렌더링될 때 가장 가까운 픽셀로 조정됩니다. 그러면 UI 엘리먼트의 모양이 선명해지는 경우도 있습니다.

Screen Space - Camera는 Screen Space  - Overlay와 매우 유사합니다. 하지만 씬의 특정 카메라가 렌더링한다는 점이 다릅니다. 이를 통해 카메라 지정 설정을 스크린 공간 UI에 적용할 수 있습니다.

 

 가장 흔한 예는 원근 카메라를 이용해 UI에 깊이의 느낌을 부여하는 것입니다. 이 모드에서 캔버스는 카메라의 뷰포인트를 자동으로 채우며 카메라의 뷰포인트 설정이 변하면 자동으로 크기를 조정합니다. 이 렌더링 모드에서는 Rect Transform도 캔버스에 의해 전체적으로 드라이브되고 있습니다. 이 렌더 모드에는 Screen Space - Overlay와 똑같이 작동하는 Pixel Perfect를 비롯한 여러 옵션이 있습니다. Render Camera는 이 캔버스의 UI 엘리먼트를 렌더링하는 카메라를 설정합니다. 이것이 없다면 캔버스 컴포넌트는 Screen Space - Overlay를 이용해 이 캔버스를 렌더링합니다.

 

 Screen Space - Camera를 선택하고 카메라를 캔버스 컴포넌트에 할당하면 UI 엘리먼트는 카메라 프러스텀으로 이동해 크기가 재조정됩니다.

 그러니까 이와같은 상태를 만드려면 Canvas 하위에 Panel을 하나 만들어 주고 크기를 500 x 768로 해 준다음 중심점(Anchor Point)을 왼쪽으로 맞춰주고 X위치를 300으로 맞춰주면 됩니다. 그럼 패널이 UI 레이아웃 왼쪽에 위치하게 되고 그 안에서 이미지가 왼쪽 중심점에서 100에 위치하게 됩니다.

 

 보여지는 화면은 위와 같습니다. NGUI의 3D Camera와 흡사한거 같습니다.

 

 이를 통해 UI를 씬 뷰의 게임 오브젝트에 맞추어 렌더링할 수 있습니다. 

 씬 속 UI 엘리먼트의 렌더링 위치를 제어하려면 Plane Distance를 이용해 캔버스와 카메라의 거리를 조절합니다. 캔버스와 UI 엘리먼트는 카메라 앞의 위치에 따라 프로스텀에 맞게 자동으로 크기가 조정됩니다. Plane Distance는 렌더링 카메라의 렌더링되는 클리핑 플레인의 범위 내에 있어야 합니다.

(현재로선 Plane Distance는 딱히 다른 의미는 없는거 같습니다.)

 

 Screen Space - Camera를 사용할 때는 씬의 그 어떤 카메라로도 캔버스를 렌더링할 수 있습니다. 씬을 렌더링하는 다른 카메라로부터 캔버스와 콘텐트를 고립시키려면 카메라의 클리어 플래그, 컬링 마스크와 depth 속성을 이용합니다. 

이러한 카메라 속성 사용법 관련 추가 정보를 확인하려면 아래 링크의 카메라 관련 정보를 참조하십시오. 

 

 Render Mode - World Space는 씬 볼륨의 엘리먼트를 렌더링합니다.

 이 UI 엘리먼트는 씬 속의 정적인 오브젝트 말풍선 같은 이동 오브젝트 또는 씬 속 게임 오브젝트를 따르는 플레이어 태그일 수도 있습니다. 우선 World Space 모드의 캔버스는 더는 Rect Transform을 드라이브하지 않으며 월드 스페이스의 어디에서도 캔버스를 설정할 수 있다는 점에 유의합니다. 씬 속에 캔버스가 2개 이상 존재할 수 있다는 점을 이하면, 월드 스페이스 UI 엘리먼트에 필요한 만큼 새로운 월드 스페이스 캔버스를 생성하는 것도 이상하지 않습니다.

 (World Space는 캐릭터의 HP나 데미지를 표시할 때 쓰면 될거 같습니다.)

 

 (World Space를 선택했을 때 볼 수 있는) Event Camera는 이벤트 수신과 어떤 카메라를 이용해 UI 엘리먼트 클릭 같은 이벤트를 감지할 것인지 결정하는 데 필요합니다. 대부분의 경우, 스크린 스페이스 월드의 선택으로 이 이벤트 카메라가 씬을 렌더링하는 카메라가 됩니다. Canvas의 Receives Events는 UI 엘리먼트가 클릭, 호버 등의 이벤트를 수신할 것인지를 표시합니다. 이 캔버스의 자식인 모든 UI 엘리먼트에서 이벤트를 무시하려면 이 속성을 비활성화합니다.

(5.5.0버전에서는 Receives Events를 확인할 수 없습니다.)

 

 Canvas의 Sorting Layer 와 Order in Layer는 씬의 다른 렌더러와 비교해 캔버스의 렌더 순서를 관리합니다. Sorting Order와 Order in Layer는 캔버스 컴포넌트에서 노출되며 캔버스의 Screen Space - Camera나 World Space 설정에 이용할 수 있습니다. Sorting Layers와 Order in Layer 관련 추가 정보를 확인하려면 아래의 링크 정보를 참조하십시오.

 

 캔버스의 UI 엘리먼트는 톱다운 방식으로 렌더링되어 첫 아이템들이 이 뒤에서 렌더링되고 아래의 아이템들은 나중에 렌더링되어 상단에 나타납니다. UI 엘리먼트의 렌더링 순서를 변경하려면 계층에서 순서를 바꾸면 됩니다.

 

위에서 부터 그려짐.

 NGUI에 비해 편리해진 이 방식은 Depth관리를 하기 편리하다는 것입니다. 계층구조에서 눈으로 바로 Depth를 확인할 수 있다는 의미 입니다.

 

2. UI RectTransform

The Rect Transform is the positioning component for any UI element within a Canvas and is used to adjust positioning, anchoring, pivots and more.

 

 Rect Transform은 모든 새로운 UI 컴포넌트에서 일반 변형 컴포넌트(Transform)를 대체하는 새로운 컴포넌트입니다. 변형 컴포넌트(Transform)는 씬 볼륨에서 3D 오브젝트의 위치, 회전 및 스케일을 표시합니다. 반면 Rect Transform은 피봇 포인트와 관련 있는 폭 및 높이가 지정하는 2D 직사각형을 표시합니다. Rect Transform이 단순한 2D 직사각형을 표시하지만, 컴포넌트에는 회전 및 스케일뿐 아니라 Z축 위치도 포함되므로 씬 볼륨에서 엘리먼트를 3D 오브젝트로 조작할 수 있습니다.

 

 직사각형 변환 구성요소(Rect Transform Component)는 일반적으로 유니티에서 제공하는 변환 구성요소(Transfrom)과는 다른 새로운 컴포넌트 입니다. 변환 구성요소(Transform)은 유니티 에디터 씬에서 3D 오브젝트의 위치, 회전 및 크기를 조절할 수 있으며 인스펙터창에서 수치를 조절할 수 있습니다. 직사각형 변환 구성요소(Rect Transform Component)는 중심점(Pivot Point), 폭(Width) 및 높이(Height)를 조절할 수 있습니다. 또한 위치, 회전 및 크기도 조절할 수 있습니다.

 한마디로 일반적인 유니티의 Transfrom과는 다른 Rect Transform이며 UI에 사용됩니다. 직사각형 모양이고 중심점, 폭, 넓이, 위치, 회전, 크기를 조절할 수 있습니다.

 

 Rect Transform과 기존 변형 컴포넌트의 중요한 차이점 한 가지는 앵커 개념입니다. 부모가 Rect Transform 컴포넌트를 가지고 있으면 Rect Transform을 부모에게 고정할 수 있습니다. 고정을 통해 UI 엘리먼트는 부모 UI 엘리먼트의 Rect Transform 위치 및 크기를 기준으로 움직이거나 늘릴 수 있습니다. UI 엘리먼트는 직계 자식은 아니더라도 궁극적으로는 캔버스의 자식이라는 점에 유의해야 합니다. 캔버스 자체는 Rect Transform을 갖습니다. 따라서 거의 모든 상황에서 UI 엘리먼트의 부모도 Rect Transform을 취합니다. 그리고 UI 엘리먼트는 어떤 식으로든 부모에 고정됩니다. 캔버스 컴포넌트 관련 추가 정보를 확인하려면 아래에 링크된 정보를 참조하십시오. 

 

 직사각형 변환 구성요소(Rect Transform Component)에는 기준점(Anchor) 개념이 있습니다. UICanvas로 부터 시작하는 모든 UGUI에는 직사각형 변환 구성요소가 있고 부모를 기준으로 자식들이 움직일 수 있습니다. 해, 지구, 달을 생각하고 행렬 연산을 생각해 보면 될거 같습니다. 지구는 해를 중심으로 돌고 달은 지구를 중심으로 도니까 해가 기준(Root)이고 지구가 해의 자식 객체이며 달은 지구의 자식 객체 입니다.

 

 씬 뷰에서 UI 엘리먼트를 조작하려면 Rect 툴을 사용하는 것이 가장 좋습니다. 

 

 

 Rect 툴은 도구 모음의 Rect Tool 을 클릭하거나 단축키 T를 사용해 선택할 수 있습니다. 선택한 Rect 툴을 이용해 모든 UI 엘리먼트에 대한 이동, 크기 조정 및 회전 작업을 수행할 수 있습니다. 선택한 UI 엘리먼트는 직사각형 안의 어떤 지점을 클릭 및 드래그하여 이동시킬 수 있습니다. UI 엘리먼트는 모서리 끝 부분을 클릭 및 드래그하여 크기를 조정할 수 있습니다. 끝이나 모서리를 가리키면 커서가 일반 포인터에서 양방향 화살표로 변한다는 점에 유의하십시오. 이는 드래그될 때 UI 엘리먼트의 크기가 재조정되는 방향과 일치합니다. Shift 키를 누르면 UI 엘리먼트의 크기가 비율에 따라 재조정됩니다. 모서리 근처 직사각형 바깥을 클릭 및 드래그하면 UI 엘리먼트를 회전시킬 수 있습니다. 툴이 UI 엘리먼트를 회전시킬 수 있는 때를 표시하면서 커서가 어떻게 변하는지 확인하십시오. 

 

 UI 엘리먼트의 크기 조정이나 회전은 피봇 포인트와 연계해 이루어집니다. 피봇 포인트는 표준 게임 오브젝트의 센터 포인트와 매우 비슷합니다. 피봇 포인트는 푸른색 고리로 표시되며 기본 설정으로 UI 엘리먼트의 중심에서 시작합니다. 씬 뷰의 피봇 포인트 인디케이터를 클릭 및 드래그하여 피봇 포인트를 이동할 수 있습니다. 피봇 포인트가 UI 엘리먼트 직사각형 안에 있어야 할 필요는 없다는 점에 유의합니다. 피봇 포인트를 UI 엘리먼트 직사각형 바깥에 놓으면 특별한 동작을 수행할 수 있습니다. 하지만 이는 일반적인 상황은 아닙니다.

 

 그러니까 쉽게 말해서 위 툴로 직사각형을 조절해 줄 수 있다는 얘기 입니다.

 

중심점 (Pivot) 모드로 바꾸어 주어야 변경할 수 있습니다.

 

 변형 컴포넌트와 Rect Transform의 또 다른 차이는 효과적인 글로벌 및 로컬 편집 공간입니다. 

 로컬 공간의 UI 엘리먼트를 편집하면 직사각형과 핸들은 UI 엘리먼트와 함께 정렬됩니다. 글로벌 공간에서는 직사각형과 핸들이 글로벌하게 정렬되며 직사각형은 UI 엘리먼트의 범위를 표시합니다.

 UI 엘리먼트를 회전시킬 때 이것이 가장 잘 드러납니다. 씬 뷰에서 앵커는 작은 삼각형 4개로 표시되며, 삼각형은 기본 설정으로 UI 엘리먼트의 부모 Rect Transform 중앙에 모여 있습니다. 이 부모 Rect Transform이 캔버스일 수도 있습니다. 앵커는 이 단원 후반부에서 자세히 다룰 것입니다. 인스펙터에서 Rect Transform을 보면 변형(Transform) 컴포넌트와 확연히 다릅니다. UI 엘리먼트의 위치 및 크기는 Rect Transform 컴포넌트 인스펙터의 우측 상부에 표시됩니다.

 

 Another difference between the transform component and the rect transform is the effective global and local space on editing. When editing UI elements in local space the rectangle and handles are aligned with the UI element. In global space the rectangles and handles are aligned globally and the rectangle indicates the bounds of the UI element. This is most notable when the UI element is rotated.

 

 변형을 할 때, 로컬 기준으로 하는가 글로벌 기준으로 하는가의 차이를 설명합니다. 이해가 잘 되지 않아서 원문도 써 보았습니다. 그러니까 그림으로 설명 드리자면 다음과 같습니다.

 좌측이 글로벌 기준으로 이동하는 것이고 우측이 로컬 기준으로 이동하는 것입니다. 이동 방향이 다릅니다. 세밀하게 이동, 회전, 크기 조절 할 때 사용하면 될거 같습니다.

 

 위치는 X축과 Y축의 앵커 포인트에서 피봇 포인트에 이르는 거리를 픽셀로 표시합니다. 위치 Z는 로컬 Z축의 거리이며 종종 0의 값으로 남겨줍니다. 폭과 높이는 픽셀로 표시한 UI 엘리먼트의 크기입니다. Position 및 Size 필드는 역동적이며 맥락에 민감합니다. 이 필드들은 앵커의 위치와 직접적인 관련이 있으므로 이 단원에서 보다 자세히 다룰 것입니다.

 

 인스펙터창을 보면 이 흰사각형 이미지가 -50 위치에 있는 것을 확인할 수 있습니다. 기준점(Anchors)은 MinX가 0.4 MaxX가 0.4라고 되어 있는데 화면(Canvas)을 10등분해서 4번째 위치에 기준점(Anchors)이 있음을 의미합니다. 4/10 = 0.4이지요. MinX는 화면의 왼쪽 MaxX는 화면의 오른쪽을 의미합니다. MinY는 화면의 위쪽, MaxY는 화면의 아래쪽입니다. 위 내용은 중심점(Pivot)이 기준점(Anchors)로 부터 -50의 위치에 있다.입니다. 만약 중심점(Pivot)이 X가 0.1에 있다면 흰사각형을 10등분한 첫번째 위치에 중심점이 있게 되고 이 흰사각형은 크기가 100x100 이므로 위치는 -90이 되게 됩니다.

 

 

 이 수치는 내용을 알기 위한 테스트용 이므로 실제 작업을 할 때에는 작업물에 맞추어 정확한 수치 입력이 필요하겠습니다.

 

 Rect Transform 컴포넌트에는 강력한 앵커링 매커니즘이 포함됩니다. 부모 게임 오브젝트에도 Rect Transform 컴포넌트가 있으면 Rect Transform은 부모에게 고정시킬 수 있습니다. 대부분의 경우, 모든 UI 엘리먼트는 어떤 식으로든 부모에게 고정됩니다. 씬 뷰에서는 4개의 작은 삼각형 기즈모가 앵커를 표시합니다. 각 삼각형은 앵커 1개에 해당합니다. 또한 각 앵커는 Rect Transform의 한쪽 모서리와 관계가 있습니다. 좌측 상부 앵커는 Rect Transform의 좌측 상부 모서리와, 우측 하부 앵커는 우측 하부 모서리와 관계가 있습니다. 각 앵커와 모서리의 경우도 이와 마찬가지입니다. 

 

 앵커는 UI 엘리먼트의 직사각형이 아니라 부모의 직사각형 경계 내에 위치합니다. 앵커는 부모의 직사각형 경계 바깥에 위치할 수 없습니다. 삼각형 기즈모를 클릭 및 드래그하면 앵커를 이동할 수 있습니다. 삼각형 그룹의 중앙을 클릭하면 삼각형들을 그룹으로 이동할 수 있습니다. 개별 삼각형을 클릭하면 1회에 앵커 1개를 이동합니다. 앵커는 Rect Transform과 고정 관계이며 앵커는 부모 Rect Transform과도 고정 관계입니다. 

 

 앵커를 설정할 때 앵커와 Rect Transform의 관련 모서리 사이의 거리는 고정값입니다. 하지만 부모 Rect Transform 내 앵커의 위치는 부모의 크기에 따라 다르며 부모 Rect Transform의 크기 변화의 영향을 받습니다. 

 

 

 부모와 비교한 앵커의 상대 위치는 X축 및 Y축에 표시된 부모 크기의 비율로 표시됩니다. 

 

 

 또한 앵커의 절대 위치는 부모의 Rect Transform이 변하면 변경할 수 있습니다. 이 비율은 각 축의 0에서 1 사이의 정규값으로 표시됩니다. 0, 0이 부모 Rect Transform의 좌측 하부라면, 1, 1은 우측 상부입니다.

 

 따라서 앵커 4개가 단일 포인트 주변에 모여있다면 UI 엘리먼트는 그 포인트에 고정됩니다. 부모 Rect Transform의 크기가 변하면 Ui 엘리먼트는 앵커를 따라 움직입니다. 앵커에서 관련 모서리까지의 거리는 고정되어 있으므로, UI 엘리먼트를 확장하거나 크기를 조정할 수 없습니다. 하지만 어떤 식으로든 앵커를 분리하면 UI 엘리먼트는 부모를 따라 확장할 수 있습니다. 앵커들과 앵커들 간 공간이 부모 Rect Transform에 상대적이며 부모의 크기가 변하면 변하기 때문입니다. 

 

 부모와 비교한 UI 엘리먼트의 확장량은 앵커의 배치에 좌우됩니다. 몇 가지 일반적인 경우는 이렇습니다. 앵커의 위치가 UI 엘리먼트의 모서리이며 이 경우 확장하더라도 UI 엘리먼트는 부모와 동일한 비율을 유지합니다. 앵커의 위치가 부모의 경계라면 UI 엘리먼트의 끝과 부모의 경계 사이의 공간이 동일한 비율을 유지하면서 고정 경계를 생성합니다. 

 

 함께 모인 1세트의 앵커를 부모 Rect Transform의 가장자리에 배치하면 UI 엘리먼트는 수직이 아니라 수평으로 확장됩니다. 고정된 UI 엘리먼트의 확장 동작은 부모 Rect Transform의 끝을 잡아 끌어서 신속하게 테스트할 수 있습니다. 끌기를 하면 미리보기(Preview) 레이블이 표시되고 끌기를 마치면 부모 Rect Transform이 원래 상태로 되돌아 간다는 점에 유의하십시오. 

 

 

 이등변 삼각형으로 표시되는 기준점(Anchors)은 4개로 나눌 수 있습니다. 화면(Canvas)이 1024x768인데 기준점을 위와같이 해 줄 수 있습니다. 이렇게 하면 비율에 따라서 작업을 할 수 있습니다. 노란색 사각형은 크기가 500x500입니다. 이 크기를 만드려면 1024 - 500 = 524 이므로 Right값에 524를 입력해 주면 노란색 사각형이 500값이 될 수 있습니다. 이 의미는 오른쪽 기준점(Anchors)에서 524 위치에 노란색 사각형의 Right가 있다는 의미 입니다.

 

 마찬가지로 아래쪽(Bottom)이 244값인 이유는 768 - 500 = 268 이므로 아래쪽 이등변 삼각형 기준점에서 268의 위치에 노란색 사각형의 아래쪽(Bottom)이 있다는 의미 입니다. 이렇게 기준점을 나누는 순간 노란색 직사각형의 고정 크기는 필요하지 않게 됩니다. 이유는 기준점을 나누는 순간 비율에 따라 계산되기 때문입니다. 그러므로 고정적인 UI를 만들 필요가 있을 때는 기준점을 나누지 않아야 하며 비율에 따른 UI를 만들 필요가 있을 때 기준점을 위와같이 나누어 주면 됩니다.

 그리고 기준점(Anchors)은 직사각형 변환 구성요소(Rect Transform Component)가 있는 각 게임 오브젝트마다 지정할 수 있습니다.

 

 초록색 사각형의 기준점(Anchors)을 상위 오브젝트의 위아래에 맞춘다면 상위 오브젝트인 하얀 사각형의 크기 변경에 따라서 크기가 비율로 변합니다. 초록색 사각형의 기준점(Anchors)은 상위 오브젝트의 최대 크기에 영향을 받습니다. 좌하단(0, 0) 우상단(1, 1)

 

 앵커의 위치를 정할 때 [Shift] 키를 누르면 UI 엘리먼트의 크기도 변하므로, 더욱 쉽게 편집할 수 있습니다. [Rect Transform]의 크기 조정 방법은 관련 모서리와 비교한 앵커의 위치에 좌우됩니다. 이 둘 사이의 거리가 고정값이기 때문이죠. 앵커들이 모여있지 않으면 [Rect Transform]의 위치 및 크기 정보 표시 방식이 변하며, 더 이상 단일 포인트를 앵커로 정의하지 않는다는 점이 중요합니다. 앵커 4개가 모여 있으면 단일 앵커 포인트를 정의합니다. 또한 [Rect Transform]은 피봇으로부터의 위치 상쇄값, UI 엘리먼트의 폭 및 높이를 표시합니다. 하지만 앵커들이 서로 떨어지면 [Rect Transform]은 좌, 우, 상단 및 하단의 고정값을 표시합니다. 

"기준점 모음(Anchor Presets)"

 이 값들은 앵커의 관련 모서리에 대한 X축 및 Y축 고정 상쇄값입니다. 앵커 2개가 모여 있으면 해당 축은 확장되지 않으며 [Rect Transform]은 해당 축의 위치 및 폭, 또는 위치 및 높이를 계속 for that axis로 표시합니다. UI 엘리먼트를 위해 피봇과 앵커를 설정할 때 일반적인 구성은 매우 다양합니다. 신속하고 간편한 설정을 위해 [Rect Transform]에 [Anchor Presets] 창이 포한됩니다. [Anchor Presets] 버튼을 클릭하면 사용할 수 있습니다. [Anchor Presets] 버튼은 [Rect Transform]의 현재 앵커 선택을 표시합니다. [Anchor Presets] 창에는 앵커 및 피봇을 위한 일반 구성 세트가 있습니다. 이러한 일반 구성은 앵커 위치에 따라 매트릭스 형태로 제공됩니다. (유니티 에디터의 우측 인스팩터창의 Anchor Presets를 누르고 보시면 됩니다.) 고정 앵커 포인트는 중간에 확장 옵션은 외각에 있습니다. 앵커 위치는 원하는 구성을 클릭해 간단히 설정할 수 있습니다. 또한 UI 엘리먼트의 피봇 위치 또는 2개 모두 원하는 구성을 클릭할 때 [Shift] 및/또는 [Alt] 키를 눌러 앵커를 설정하면서 동시에 설정할 수 있습니다. 이 옵션 키들은 [Anchor Presets] 창 상단에 표시됩니다. 피봇은 X축 및 Y축의 정규값 0-1을 이용해 UI 엘리먼트의 피봇 포인트를 정의합니다. 정규값은 좌측 하부가 0,0 우측 상부가 1,1 입니다. 회전은 UI 엘리먼트의 회전을 정의합니다. 대부분의 경우, 회전은 Z축에서만 이루어지므로 2D 공간의 UI 엘리먼트는 유지됩니다. 그러나 회전은 3축에서 모두 허용되며 3D 공간에서 엘리먼트를 확인할 수 있습니다. 

 

"스케일과 크기의 차이"

 스케일을 다루기 전에 스케일과 크기의 차이를 이해하는 것이 중요합니다. 씬 뷰에서 UI 엘리먼트의 크기를 조정할 때, 또는 인스펙터에서 폭과 높이를 조정할 때 UI 엘리먼트는 스케일이 아니라 크기가 조정됩니다. 크기를 조정하면 [Rect Transform]의 폭 및/또는 높이가 변하지만 UI 엘리먼트의 스케일은 변하지 않습니다. UI 엘리먼트의 크기를 조정해도 폰트 크기, 잘린 이미지의 경계 또는 UI 엘리먼트 관련 기타 아이템은 영향을 받지 않습니다. 하지만 UI 엘리먼트의 스케일을 조정하면 폰트 및 경계 등의 아이템과 함께 전체 엘리먼트의 스케일이 변합니다. 레이아웃이 목적이라면 일반적으로 UI 엘리먼트의 스케일보다는 크기 조정을 권장합니다. 반면 스케일 조정은 애니메이션 효과를 비롯한 특수 목적에 유용합니다. UI 엘리먼트에 음수 크기를 부여하면 볼 수 없다는 점에 유의해야 합니다. 하지만 음수 스케일 조정은 지원되며 -1 스케일을 UI 엘리먼트 플리핑을 비롯한 여러 효과에 활용할 수 있습니다. 

 

 [Rect Transform] 컴포넌트에는 옵션 편집 모드 두 가지 즉 [Blueprint] 및 [Raw Edit] 모드가 포함됩니다. [Blueprint] 모드를 사용하면 [Rect Transform]의 회전이나 스케일 조정을 하지 않은 것처럼 편집할 수 있습니다. [Blueprint] 모드에서는 [Rect] 도구로 UI 엘리먼트를 회전시킬 수 없습니다. 일반적으로 [Rect Transform] 안에서 피봇이나 앵커 값을 편집할 때는 피봇이나 앵커는 이동하지만 UI 엘리먼트는 이동하지 않습니다. 씬 뷰에서 이러한 아이템을 편집할 때도 마찬가지입니다. 하지만 [Raw Edit] 모드에서는 피봇이나 앵커가 이동하지 않으며 UI 엘리먼트는 해당 고정 아이템에 비레하여 이동합니다. 레이아웃 그룹처럼 [Rect Transform]이 부모 [Rect Transform]이나 다른 UI 컴포넌트가 제시한 값의 전부 또는 일부를 취하는 경우도 있습니다. 이 경우, [Rect Transform]의 속성 일부나 전부가 회색으로 변해 편집할 수 없습니다. 그러면 [Rect Transform] 상단에 노트가 표시되면서 다른 컴포넌트가 일부 값을 사용하고 있다고 알려줍니다. [Rect Transform]에 영향을 주는 컴포넌트 관련 상세 정보는 Unity 설명서나 해당 컴포넌트 레슨 단원을 참조하십시오.

 

 [Blueprint Mode] 좌측 OFF 우측 ON

블루 프린트 모드를 켜면 우측과 같이 회전값에 상관없이 크기 조절을 할 수 있습니다.

 

 

[Raw Edit Mode]

원본 편집 모드를 켜면 중심점과 기준점을 편집할 때 그것들은 고정되어 있고 사각형을 움직일 수 있습니다.

 

 

 

---