[유니티] UGUI - (1) 캔버스(Canvas)의 개념과 중요성

[UGUI 배경]

기존에는 유니티 안에서 GUI 개발 환경이 형편없고, 사용하기 불편해서

NGUI라는 유료 플러그인을 사용하여 GUI를 개발을 했다.

그래서 유니티에서는 NGUI 개발자를 불러들여 유니티 내 GUI 시스템을 대폭 업그레이드 시켰고,

Unity 버전 4.6부터 새로운 GUI를 출시했다.

이로써, 공식 명칭은 아니지만 UGUI라 불리는 GUI 시스템이 유니티 내에서 사용되기 시작했다.

UGUI(Unity Graphical User Interface)

UGUI에 대해 알아보려고 한다.

참고 사이트는 당연히 유니티 공식 홈페이지 - 자습서 내용이다.

캔버스(Canvas)

- Canvas는 Unity에서 모든 UI 객체를 렌더링을 관리하기 위한 루트 컴포넌 트이다.

- 즉, 유니티에서 사용하는 모든 UI 구성 요소들은 모두 캔버스 밑에 위치한다.(캔버스의 자식이다.)

- 캔버스를 생성하는 것을 잊더라도, UI 요소 중에 하나를 생성하면 Canvas는 자동으로 생성된다.

-  한 씬(Scene)에서 캔버스를 여러개 생성할 수 있다.

- 캔버스 영역이 씬 뷰에서 사각형으로 나타나므로 게임 뷰에서 보지 않아도 UI를 쉽게 배치할 수 있다.

- .캔버스(Canvas)에 있는 UI 요소는 계층 구조에 나타나는 것과 동일한 순서이다.

   즉, 겹겹이 쌓이게 되므로, 첫 번째 있는 UI가 두 번째 UI에 가려져 보이지 않게 된다.

   변경을 하고 싶다면 드래그하여 계층 구조에서 위,아래 순서를 변경하면 된다.

- 캔버스에는 기본적으로 4가지의 컴포넌트가 포함되어 있다.

1. Rect Transform

2. Canvas

3. Canvas Scaler

4. Graphic Raycaster

- 캔버스에는 스크린 공간 또는 월드 공간에 렌더링하기 위해 Render Mode가 세 종류 존재한다.

[Render Mode]

1) 스크린 공간(Screen Space - Overlay)

가장 기본이 되는 모드로, 따로 설정하지 않으면 이 모드로 설정된다.

이 렌더 모드에서는 모든 UI 요소가 해당 씬에서 다른 모든 것 위에 렌더링된다. 

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

스크린의 크기가 조절되거나 해상도가 변경되면 캔버스는 여기에 맞춰 자동으로 크기를 변경한다.

이 모드에서는 Rect Transform를 통해 직접 편집하는 것은 불가능하다.

캔버스가 Rect Transform을 설정해 자동으로 스크린을 채운다.

Pixel Perfact  

선택하면 UI 엘리먼트는 렌더링될 때 가장 가까운 픽셀로 조정된다.

2) 스크린 공간(Screen Space - Camera)

이 모드는 Screen Space - Overlay와 매우 유사하지만 

이 렌더 모드에서는 캔버스가 씬의 특정 Camera 에서 주어진 거리만큼 앞쪽에 위치한다.

UI 요소는 이 카메라에 의해 렌더링된다. 즉 카메라 설정이 UI의 모습에 영향을 준다. 

카메라가 Perspective 으로 설정되어 있으면 UI 요소는 원근감이 있게 렌더링되며,

원근 왜곡의 정도는 카메라 Field of View 에 의해 조절될 수 있다. 

스크린의 크기가 조절되거나 해상도가 변경되거나 카메라가 변경되면 캔버스 역시 여기에 맞춰 

자동으로 크기를 변경한다.

3)월드 공간(World Space)

이 렌더 모드에서는 캔버스는 씬에 있는 다른 게임오브젝트처럼 동작한다.

캔버스의 크기는 사각 트랜스폼(Rect Transform)을 사용하여 수동으로 설정할 수 있으며,

(위 두 개는 수동 설정 불가)

UI 요소는 3D 배치에 기반하여 씬의 다른 오브젝트의 앞 또는 뒤에 렌더링된다.

이 방식은 월드의 일부를 이루도록 의도된 UI에 유용하다. 

그래서 이 방식을 “서사적 인터페이스”라고도 부르기도 한다.