[Unity] 6. UI - Canvas와 Rect Transform의 Anchor

 

- UI (User Interface): 게임 플레이어가 게임과 상호작용하는 시스템

 

- uGUI (unity Graphic User Interface): 유니티에서만 사용하는 그래픽 UI(무료로 제공)

 

- UI 만들기

1) Hierachy 뷰에서 [우클릭] - [UI] - [Canvas] 클릭.

2) 캔버스와 함께 EventSystem이 자동으로 생기는데 삭제하지 말자.(캔버스를 더 만들어도 하나만 생김)

3) 만들어진 캔버스 [우클릭] - [UI] - [Image]를 누르면 하얀 도화지가 생성. 

 

- Canvas: UI를 그리는 공간(like 도화지). 모든 UI 요소는 캔버스의 자식오브젝트

1) RenderMode: 화면 위에 UI를 그리는 모드. 카메라 비율, 해상도가 변경되면 자동으로 이에 맞춰짐. 

• Screen Space - Overlay: 화면에 딱 맞춤. 동떨어진 영역을 가진 상태로 항상 카메라를 맨 위에서 덮음. 포지션을 움직일 수 없음
• Screen Space - Camera: 카메라와 동일한 크기로 맞춤. 캔버스의 크기가 게임 뷰의 크기와 같다. 가장 자주 사용. (+ Plane Distance: 카메라와 캔버스까지의 거리. )
• World Space: 카메라를 씬에 있는 다른 오브젝트처럼 동작하는 모드. 수동으로 크기와 비율을 조절할 수 있음. 

2) Canvas Scaler - UI Scale Mode: 캔버스의 크기 조절

• Scale With Screen Size: 캔버스의 크기를 고정해놓을 때. 해상도가 달라질 때 캔버스 크기를 결정해 놓기 위해. (가로 모드 게임이라면 Match를 Width에 맞춰놓는 게 좋고, 모바일처럼 세로게임은 Height로 맞춰놓는 것을 추천. 게임을 만들 때 여러 해상도로 보면서 작업하는 것이 좋음) 

 

3) Layout - Rect tool: UI 요소를 이동, 크기 조절, 회전하는데 사용

 

 

- Rect Transform: 기존 Transform 컴포넌트 대신 UI에 사용되는 Transform 컴포넌트

• 앵커(Anchors): UI의 부모에 대한 고정 오프셋. 부모 사각형의 폭과 높이에 대한 비율로 정의. 아래 사진의 빨간 동그라미 삼각형(앵커 4개가 붙어 있는 것임)+ 쓰는 이유? 해상도가 달라져도 원하는 비율에 맞게 알아서 이미지가 조정된다.

• Pos X, Pos Y: 앵커에 대한 피벗(pivot)의 포지션
• Left, Right, Top, Bottom: 앵커가 떨어져 있다면 표시됨. 각각 앵커로부터 떨어진 거리를 뜻함

 

앵커가 떨어져있을 때, Left 100을 설정하면 왼쪽 앵커로부터 100만큼 떨어진 상태로 캔버스이지지가 변화됨