개-발

유니티에서 캔버스(Canvas)를 생성하면 다음과 같이 여러 컴포넌트가 기본적으로 생성된다.

-> Rect Transform, Canvas, Canvas Scaler, Graphic Raycaster

그 중에서,

Canvas Scaler 컴포넌트는 캔버스 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하는 데 사용된다. 

스케일은 글꼴 크기와 이미지 경계 등 캔버스 아래의 모든 요소에 영향을 미친다.

쉽게 말해 화면의 크기 변화에 따른 UI크기 변화를 조절할 수 있다.

Constant Pixel Size를 사용할 경우 

유니티상에 개발 화면과 실제 디바이스 폰 화면 해상도가 크게 차이가 난다면, 폰에서 깨알만하게 보이게 된다.

따라서, Scale With Screen Size 모드를 통해 화면이 커지면 UI 요소들도 커지도록 설정하는 것이 좋다.

여기서 Match로, 스케일링 레퍼런스로 너비 또는 높이를 사용할지, 아니면 둘 사이의 배합을 사용할지 결정한다.

이 차이는 분명하다.

이 사진은 Constant Pixel Size을 적용한 것을 스마트폰에서 실행한 결과이다.

왼쪽 상단 버튼의 경우 손가락 작은 사람이 새끼손가락으로 눌러야 터치 될 정도로 매우 작다.

이 글을 쓰게 된 이유이다.

Scale With Screen Size 모드를 사용하게 되면, 화면이 커지게 되면 UI도 커지게 할 수 있다.

이렇게 큼지막하게 나와 버튼 조작이 쉬워지고, 가운데 이미지도 시원시원하게 크게 나오게 된다.

[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)

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

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

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

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

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

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