[Unity] UI_Canvas

*** 공부하면서 알게 될 것을 기록해 두는 용도입니다. 오류가 있을 수 있습니다. ***

 

Canvas

Canvas 객체는 Canvas Component를 포함하는 GameObject이다. 모든 UI요소는 Canvas 객체의 하위에 있어야 하며, Canvas 객체끼리 Parent-Child 관계를 가지거나, 한 Scene에 여러 개의 Canvas 객체를 두는 것은 허용된다.

 

1. Rect Transform.

Transform Component의 UI 버전으로 이해할 것. 

처음 생성된 Canvas 객체의 Rect Transform 속성은 직접 수정할 수 없으며, 화면 크기에 따라 자동으로 조절된다. 

 

1-1)  Anchor point

예시로 Canvas 객체 아래 Panel 객체를 생성했을 때, 

각 모서리의 삼각형이 anchor point로, 부모 객체 canvas가 기준이 된다. 즉 어떤 UI 객체의 anchor point는 자기 자신이 아닌 한 단계 상위 객체의 rect tranform 기준이다.

 

이 anchor point가 Canvas의 하위 객체인 Panel의 정렬(Align)과 크기 조절(Stretch)을 설정한다. 

 

1-2) Anchor Preset

Anchor Preset에서 Canvas 내에서 UI 객체가 어떻게 정렬될 지 설정할 수 있다. 

    - 중앙 정렬(middle/center) : 스크린 해상도가 변경되어도 해당 UI 항목이 화면 가운데에 정렬

    - 좌상단 정렬(top/left) : 스크린 해상도가 변경되어도 해당 UI 항목이 왼쪽 상단 기준으로 정렬

    - 좌측 상하 리사이즈 정렬(stretch/left) : 스크린 해상도가 변경되면 왼쪽 기준으로 세로 사이즈에 맞게 stretch되어 정렬

 

위 3가지 예시와 같은 원리로 작동한다.

 

Alt를 누르고(Window 기준) Anchor Preset을 선택하면, 해당 위치로 현재 작업하는 UI 객체를 옮길 수 있다. 

 

Shift를 누르고 Anchor Preset을 선택하면, Anchor point의 위치와 선택한 UI 항목의 Pivot(가운데 동그라미) 위치를 변경한다.

 

Alt+Shift를 누르고 Anchor Preset을 선택하면, 앵커 프리셋을 바꾸고 Pivot의 위치를 그에 일치시킨다.

 

직접 Unity에서 돌려 보면서 연습하되, Pivot과 Anchor Point의 변동을 위주로 관찰하면서 숙달할 것.

 

1-3) anchoredPosition

이 부분이다.

 

Pos X,Y,Z 는 anchor point 기준으로  Pivot이 얼마나 떨어져 있는지 나타내고,

Width, Height는 해당 UI 항목의 가로/세로 크기이다. 

 

리사이즈 옵션을 선택할 시 

 

이런 식으로 바뀌게 되는데, (여기서는 Pos Y-Top, Height-Bottom), 이는 상하 크기가 화면 크기에 따라 변동되기 때문에 인스펙터 뷰에 상하단 여백을 표시하게 된 것이다. 

 

1-4) anchors

UI 항목을 리사이즈, 정렬하기 위해 사용.

0.0f~1.0f float 값이며, Min은 화면 왼쪽, 아래쪽 몇 % 지점에서 시작할지, Max는 화면 왼쪽, 아래쪽 몇 %까지 범위로 할지를 나타낸다.

 

<Panel>

2. Image

화면에 텍스트를 표시하는 Component. Sprite type만 사용 가능.

이미지를 표시하는 방법은 4 가지이다.

    - Simple : 반복 x, 고정 크기 옵션

    - Sliced : 이미지를 Resizing해도 왜곡 x

    - Tiled : 이미지 타일링 처리

    - Filled : 이미지를 부분적으로 채울 수 있는 옵션

 

3. RawImage 

배경과 같은 큰 이미지에 사용. Sprite type과 더불어 일반  Texture 타입도 사용 가능. 

 

 

 

EventSystem

Canvas 객체 생성 시 자동으로 함께 생성되는 객체. 입력 정보를 Canvas 하위의 UI 항목에 전달한다.

 

EventSystem 의 Inspector View이다. [First Selected] 속성을 통해 처음 포커스를 갖는 UI 항목을 지정할 수 있다.