👁‍🗨 UI

UI는 User Interface로 사용자(사람)가 프로그램과 상호작용을 할 수 있게 해주는 것을 말한다.

플레이어정보, 플레이어 체력바, 메뉴버튼들을 UI라고할 수 있다.

---

🔲 Canvas

Canvas는 유니티 UI 오브젝트들이 그려지고 배치되는 UI 전용 공간이다.

씬(Scene) 내에서 이 하얀 박스가 캔버스의 공간이며,

이 공간 안에 배치된 UI 요소들이 실제 플레이어 화면에 보여지게 된다.

---

RenderMode

캔버스 컴포넌트에는 Render Mode 설정이 있는데,

총 3가지 방식으로 UI가 렌더링된다.

Screen Space - Overlay

Overlay는 UI를 화면 위에 직접 그리는 방식이다.

UI는 항상 제일 위에 그려지며,

씬에서는 플레이어와 UI가 겹쳐보일 수 있지만 실제로는 분리된 공간에서 그려진다.

---

Screen Space - Camera

Camera는 UI를 카메라 앞에 그리는 방식이다.

Render Camera에 등록한 카메라 기준으로 비추는 방향으로 그리며,

Plane Distance로 UI와 카메라의 거리를 조절할 수 있다.

Overlay와 다르게 플레이어 공간에 있는 오브젝트와 겹쳐질 수 있다.

---

World Space

World Space는 플레이어가 있는 공간에 게임 오브젝트처럼 배치하는 방식이다.

Rect Transform의 값을 수정할 수 있게 되어

Transform처럼 원하는대로 월드에 배치할 수 있다.

---

🔧 Canvas Scaler

UI를 만들 때는 클라이언트마다 해상도가 다르기 때문에

상황에 따라 UI 오브젝트의 크기를 바꿔줄 필요가 있다.

이때 사용하는 것이 Canvas Scaler 컴포넌트다.

UI Scale Mode에는 총 3가지가 있지만 2가지만 알아보자.

---

Constant Pixel Size

Constant Pixel Size는 UI의 크기를 화면 해상도에 상관없이 픽셀 단위로 지정하는 방식이다.

예로들어,

UI에 4분의 1 크기를 차지하는 960x540 크기의 검은색 이미지가 있다.

1920x1080 해상도에서는 4분의 1을 차지하지만 다른 해상도에서는 어떻게 될까?

---

정확한 크기(픽셀)을 유지할 수 있지만,

해상도에 따라 크거나 작아져서 UI 비율이 어긋?날 수도 있다.

---

Scale With Screen Size

Scale With Screen Size는 UI의 크기를 해상도에 따라 비율로 자동 조절하는 방식이다.

기준이 되는 해상도(Reference Resolution)를 클라이언트 해상도와 비교하여

UI 오브젝트들의 스케일을 자동으로 조절한다.

---

1920x1080 해상도에서 4분의 1을 차지하던 이미지가

2560x1440 해상도에서도 4분의 1을 차지하는 것을 볼 수 있다.

---