Unity - Canvas

 

Canvas는 UGUI에서 모든 UI 요소를 그리기 위한 컴퍼넌트다.
NGUI로 치면 Panel과 같으나 사용방법이 약간 다르다.
Canvas의 영역은 SceneView에서 사각형 영역으로 표시된다.
모든 UI 요소들은 Canvas의 하위 요소여야 만약 Canvas 없이 UI 요소인 Image 등의 컴포넌트를 새로 생성하면
Canvas가 자동으로 생성되고 그 하위에 Image 컴포넌트가 생성된다.

Canvas의 그리기 순서
1. Canvas 하위 오브젝트들의 순서
NGUI는 편하게 Depth를 조정하면 됬지만 UGUI는 그렇지 않다.
Canvas안에서 그리는 순서는 하이락키 순서에 따라 결정된다.
첫번째 자식 오브젝트가 먼저 그려지고 두번째 자식 오브젝트가 나중에 그려진다.
즉, 첫번째보다 두번째 자식 오브젝트가 시각적으로는 앞에 나온다.
계층구조이기 때문에 드래그 드롭으로 간단히 뎁스를 바꿀 수 있으며
SetAsFirstSibling, SetAsLastSibling, SetSiblingIndex 등을 사용하여 그리기 순서를 제어할 수 있다.

2. Canvas간의 순서
Canvas간의 순서는 다양한 요소들로 인해 달라질 수 있다.
첫번째, 'Order in Layer'로 Canvas간의 뎁스를 제어할 수 있다.
두번째, 'Sorting Layer'로 Layer를 부여하여 뎁스를 제어할 수 있다.
세번째, 'Render Mode'가 'World Space'일 때 Z 값에 의해 제어될 수 있다.
(World Space는 UI를 3D 오브젝트로 취급하기 때문에 일반 3D오브젝트와 UI오브젝트간의 뎁스를 제어할 때 사용한다.)
네번째, 설정 값들이 모두 같다면 하위 오브젝트들이랑 마찬가지로 계층구조에 따라 우선순위가 달라진다.

3. Canvas의 옵션들
렌더링 모드
'Render Mode'라고 설정 가능한 메뉴가 있다. 종류에 따라 Canvas의 렌더링 방식이 달라진다.
Screen Space - Overlay
- UI 요소들을 화면에 배치한다. 화면의 크기와 해상도가 변경될 시 자동으로 스크린에 맞춰준다.

출처 : 유니티 메뉴얼 : 캔버스

Screen Space - Camera
'Render Camera'라는 필드가 나타는데 여기에 Camera를 연결하면 해당 Camera 앞에 배치된다.
UI요소는 이 카메라에 의해 그려지고 Camera의 옵션에 따라 영향을 받게 된다.
예를 들면 Camera의 Perspective로 설정되어 있는 경우 UI 요소는 원근법으로 그려진다.

출처 : 유니티 메뉴얼 : 캔버스

World Space
UI를 3D 오브젝트로 취급한다. Canvas의 크기를 RectTransform을 사용하여 수동으로 설정할 수 있으며
UI요소는 3D오브젝트들처럼 Z값의 영향을 받게 된다.

출처 : 유니티 메뉴얼 : 캔버스

4. 기타 옵션들
Pixel Perfect
- 화면이 렌더링 될 때 픽셀을 정수형으로 표현하여 좀 더 정밀하게 한다.
(UI가 날카롭게 표현될 수 있다고 한다.)
Sort Order
렌더링 순서를 제어한다.
Plance Distance
Camera와 Canvas의 거리를 조절하는데 UI의 크기는 절두체에 맞게 자동으로 조정한다.
Sorting Layer
레이어를 지정하여 렌더의 우선순위를 제어한다.
'Add Sorting Layer'를 누르면 레이어를 지정할 수 있는 Window가 나타난다.
Event Camera
연결된 Camera에서 일어나는 UI 이벤트를 검출한다. 
(예를들면 화면상에서 UI 버튼을 클릭했는지를 판단한다던지)

 

 

다람쥐와 포동포동이

 

 

RememberCook 9월 28일 정식 출시!