유니티 UI - Canvas

GUI(Graphical User Interface)이다. 본 글에서는 UI로 통합하여 표현한다.

1. 유니티 캔버스 ( Canvas )와 UI (User Interface)

UI(User Interface)는 사용자에게 데이터를 보여주는데 최적화되어 있다. 우리가 접하는 인터넷, 애플리케이션들은 수많은 정보를 UI를 사용하여 표시한다.  그림, 글자, 표, 차트와 같은 것을 사용하여, 데이터를 직관적으로 표현해준다. 이처럼 UI는 애플리케이션을 구성하는데 없어서는 안 되는 중요한 요소이다. 

유니티 UI는 캔버스 상에서 동작한다. Scene View에 UI 요소를 생성하면, 캔버스가 생성되고 자식으로 UI 요소가 생성된다. UI 요소들은 캔버스 안에 위치하도록 설정되어 있기 때문이다. UI 요소에는 Button, Image, Text 등이 있다.    

캔버스도 컴포넌트 중의 하나이다. 캔버스는 항상 최상위 요소에 위치하지 않아도 된다. 게임 오브젝트는 하위 요소로 캔버스를 가질 수 있다. 이를 이용해, 몬스터의 체력을 이미지로 표시하거나, 남은 체력을 숫자로 표시할 수 있다.  

 

2 캔버스 렌더 모드 ( Canvas Render Mode )

 몬스터와 같은 게임 오브젝트의 하위 요소로 캔버스를 위치시킬 수 있다. 캔버스 랜더 모드는 캔버스를 어떠한 방식으로 사용할지를 결정하게 된다. 대부분의 게임들은 메인 UI를 가지고 있다. 항상 사용자에게 정보를 제공하거나, Button과 같은 입력을 언제든 사용자로부터 받을 수 있는 메뉴들을 제공한다. 사용자의 골드와 같은 재화가 이에 해당하며, 인벤토리를 오픈하기 위한, 인터페이스가 있다. 

 

2.1 Screen Space - Overlay

캔버스의 렌더 모드는 Screen Space - Overlay가 기본이다. 실제 캔버스를 생성해 보면, 예상과는 다른 위치에 존재하며, 게임 오브젝트가 있는 월드보다 거대하다. 실제 이미지 컴포넌트를 등록하고 Play를 해보면 화면에 출력된 이미지를 확인할 수 있다.  Screen Space - Overlay 모드에서는 카메라는 캔버스를 보여주고, 그 뒤에 게임 오브젝트를 보여준다.

Screen Space - Overlay 모드는 앞서 언급한 메인 UI를 구성하는데 주로 사용된다.

 

Target Display : Game play 화면의 Display를 나타낸다. 

 

Target Display

2.2 Screen Space - Camera 

대상 카메라를 기준으로 지정한 거리만큼 떨어져서 캔버스가 위치한다. Screen Space - Camera 모드는 특정 이벤트를 발생시켜, Text를 보여주거나, 이미지 등을 보여줄 때 사용될 수 있다.

 

• Render Camera : UI를 표시할 기준이 되는 카메라이다. Render Camera 설정을 하지 않으면, UI를 표시하지 않는다.
• Plane Distance : 대상 카메라와의 거리이다. 카메라와 같은 위치에 있을 때는 0이다.

아래의 이미지는 Screen Space - Camera를 적용하였다.  Plane Distance를 1로 설정한 것이다. 

Scene View에서의 캔버스의 위치, Play 상의 캔버스를 참고하자. 

 

Screen Space - Camera

2.3 World Space

 

캔버스를 월드상에 존재하도록 한다. 캔버스가 월드상에 있는 게임오브젝트처럼 동작한다. 캔버스를 게임오브젝트의 차일드로 사용할 수 있다. 하지만 Screen Space- Overlay와 다르게 캔버스가 게임오브젝트보다 뒤에 있다면, 보이지 않는다. 

 

아래의 이미지는 Canvas World Space 모드에서 이미지를 사용한 것이다. World Space에 이미지 컴포넌트를 위치시켜, 몬스터의 체력바를 구현한 이미지이다. 

Canvas World Space

3. Canvas Scaler

안드로이드를 예로들어, 스마트폰들은 스크린 해상도가 다르다. 캔버스 스캐일러를 활용하여 다양한 스크린 해상도를 지원할 수 있다. 스마트폰은 1024 * 768, 2560* 1440의 16 :9 비율의 해상도를 많이 사용한다.  이에 Scale With Screen Size 모드를 설정하고, Reference Resolution은 2560 * 1440 설정을 추천한다. 

 

UI Scale Mode는UI 요소가 스캐일되는 방법을 나타낸다.

3.1 Constant Pixel Size

동일한 픽셀 크기를 사용한다. 

 

Scale Factor : UI 요소의 스케일 값을 설정한다. 값을 증가시키면 UI 요소의 크기가 커진다.

Reference Pixels Per Unit :  유닛당 픽셀 표시 숫자이다. 100일 경우 1 * 1의 영역에 100 * 100 픽셀을 표시한다. 예를 들어 256 * 256 크기의 이미지를 1유닛에 맞도록 설정하려면 256 값을 사용하면 된다.  

 

3.2 Scale With Screen Size

해상도를 설정하여, UI 요소의 스캐일 값을 설정한다. 

Reference Resolution : 해상도를 설정한다. 

Screen Match Mode : 캔버스의 크기를 Math Width Or Height(너비나 높이에 맞춘다), Expand (늘리다.), Shrink(자르다.) 

Match : UI 요소의 스캐일을 Width, Height에 크기를 맞출지를 설정한다. 0.0~1.0의 값을 가지며, 0.0은 Width에 맞추어 캔버스의 크기를 설정하고, 1.0은 Height에 맞추어 캔버스의 크기를 스크린에 맞게 설정한다. 0.5로 설정하면, Width와 Height의 배합에 맞추어 캔버스의 크기를 스크린에 맞게 설정한다. 

 

3.3 Constrant physical Size

 UI 요소의 위치와 크기를 밀리미터, 포인트, 피카 등의 물리적인 단위로 설정합니다. 고정 물리 크기를 사용하려면 기기의 화면 DPI가 정확하게 보고되어야하며, 기기에서 DPi를 보고하지 않는 경우에는 Fallback Screen DPI를 지정하여야 한다.(Unity documents)

 

4. 카메라와 캔버스

  캔버스의 Target Display가 카메라의 Target Display와 일치해야 화면에 캔버스를 렌더링한다. 

캔버스 스캐일러에 따라 실제 화면에 렌더링 되는 캔버스의 위치는 일치하지 않을 수 있다. 최근 스마트폰의 다양한 해상도를 지원하기 위해서는 캔버스 스캐일러의 UI Scale Mode를 적절히 활용하여야 한다. 추가적으로, 렉트 트랜스폼의 앵커드 포지션을 사용하여 레이아웃을 구성하면, 다양한 해상도를 지원한는 캔버스를 설정할 수 있다.       

 

 

참조

유니티 문서 캔버스

docs.unity3d.com/kr/2019.4/Manual/UICanvas.html

캔버스 - Unity 매뉴얼