Canvas

Canvas

Canvas는 UI요소들이 존재하는 공간이다. Canvas는 Canvas 컴포넌트를 가지는 게임 오브젝트인데, UI의 모든 요소는 반드시 Canvas의 자식으로 포함되어 있어야 한다. 

GameObject -> UI -> Image를 통해 Image를 만들 경우, Canvas가 존재하지 않는다면 Canvas는 자동으로 추가 된다.

모든 UI요소는 Canvas의 자식으로 생성 된다.

요소가 그려지는 순서

Canvas에 있는 UI요소는 Hierarchy에 나타나는 순서대로 그려진다. 첫번째 자식이 먼저 그려지고, 두번째 자식이 그 다음, 그 다음 자식도 마찬가지 순서로 그려진다.

두개의 UI요소가 겹쳐지면, Hierarchy에서 위에 있는 UI가 먼저 그려지고, 그 위에 그 다음 UI가 겹쳐져서 나타난다.

만약 순서를 변경하고 싶으면, Hierarchy창에서 마우스로 드래그해서 UI요소의 순서를 바꾸면 된다. 스크립트를 사용해서 변경하고 싶다면,

Transform 컴포넌트에 있는 SetAsFirstSibling, SetAsLastSibling, SetSiblingIndex같은 메소드를 사용하면 된다.

렌더러 모드

Canvas는 3가지(Screen Space - Overlay, Screen Space - Camera, World Space)의 렌더러 모드를 포함하고 있다.

Screen Space - Overlay

이 모드는 카메라 또는 씬에 대한 참조없이 직접 화면의 맨 위에 UI요소가 그려진다.

(심지어 씬에 카메라게 없어도 UI 화면에 그려진다)

만약 화면의 크기나 해상도가 변경될 경우, Canvas도 마찬가지로 자동으로 같은 크기의 사이즈로 변경된다.

ㅇㅇ

▲ 무조건 화면의 맨 앞에 UI가 그려진다.

Screen Space  - Camera

이 모드는 위의 Screen Space - Overlay와 비슷하지만, Canvas를 특정 카메라와 미리 설정된 거리만큼 떨어진 곳에 위치시킨다. 마치 카메라와 일정 거리 떨어진 위치에 있는 평면 오브젝트 위에 그려진다고 생각하면 이해하기 쉽다.

하지만 화면의 그려지는 UI의 크기는 거리와 무관하게 동일한 크기로 그려진다. 왜냐하면 카메라 프로스트럼에 맞게 정확하게 크기가 재조정되기 때문이다.

만약 어떤 특정 물체가 UI 평면보다 카메라에 더 가깝에 위치해 있다면, UI 보다 더 앞에 렌더되게 된다.

▲ 물체가 UI보다 카메라에 더 가깝다면, UI앞에 물체가 그려진다.

WorldSpace

이 모드는 Canvas를 씬에 있는 평면 객체처럼 렌더되게 해준다. Scene Space - Camera모드와 달리 카메라를 바라보고 있을 필요가 없으며, 자신이 원하는 방향으로 Canvas를 회전시킬 수 있다. 

Canvas의 크기는 Rect Transform을 이용해서 직접 설정할 수 있지만, 보여지는 각도 또는 카메라와의 거리에 따라 크기가 달라질 수 있다.

다른 물체들이 Canvas를 관통하거나 앞에 위치하는 것 또한 가능하다.

▲ Canvas가 일반 물체와 동등하게 다뤄진다고 이해하면 쉽다.

---

참조

- Unity 공식 사이트 Canvas 설명서