Canvas

캔버스(Canvas)

모든 UI 요소는 Canvas 안에 위치해야 한다. 캔버스는 Canvas 컴포넌트가 있는 게임 오브젝트이며 모든 UI 요소는 반드시 어떤 캔버스의 자식이어야 한다. Canvas는 UI 요소 중 무엇이든 생성할 때 같이 생성된다.(중복 생성되지 않음) 예를 들어, GameObject > UI > Image 메뉴를 사용하여 이미지를 생성하면 (씬에 아직 캔버스가 없을 경우)자동으로 캔버스를 생성한다. 이 때 이 UI 요소는 이 캔버스의 자식으로서 생성된다. 캔버스 영역은 씬 뷰에서 사각형으로 나타나므로 매번 게임 뷰가 보이게 하지 않고도 UI 요소를 배치하기 용이하다. Canvas 는 메시징 시스템을 돕기 위해 EventSystem 오브젝트를 사용한다.

요소 그리기 순서

캔버스에 있는 UI 요소는 계층 구조에 나타나는 것과 동일 순서로 그려진다. 첫 번째 자식이 처음으로 그려지고, 두 번째 자식이 그 다음으로 그려진다. 두 UI 요소가 겹쳐지면 나중에 그려지는 것이 먼저 그려진 것의 위에 나타나게 된다. 어떤 요소가 다른 요소의 위에 겹쳐지는지 여부를 변경하고 싶으면 간단히 드래그하여 계층 구조에서 요소의 순서를 변경하면 된다. 이 순서는 Transform 컴포넌트에서 SetAsFirstSibling, SetAsLastSibling, SetSiblingIndex 메서드를 사용하여 스크립팅을 통해 제어할 수도 있다.

렌더 모드(Render Mode)

• 스크린 공간 - 오버레이(Screen Space - Overlay): 이 렌더 모드에서는 UI 요소가 화면에서 씬의 위에 렌더링된다. 스크린의 크기가 조절되거나 해상도가 변경되면 캔버스는 여기에 맞춰 자동으로 크기를 변경한다.

• 스크린 공간 - 카메라(Screen Space - Camera): 이는 화면 공간 - 오버레이와 유사하지만 이 렌더링 모드에서 캔버스는 지정된 카메라 앞에 지정된 거리에 배치된다. UI 요소는 이 카메라에 의해 렌더링된다. 즉, 카메라 설정이 UI 모양에 영향을 미친다. 카메라가 원근으로 설정된 경우 UI 요소는 원근감으로 렌더링되며 원근 왜곡의 양은 카메라 시야각으로 제어할 수 있다. 화면 크기가 조정되거나 해상도가 변경되거나 카메라 프러스트럼이 변경되면 캔버스도 크기에 맞게 자동으로 변경된다.

-월드 공간(World Space): 이 렌더 모드에서는 캔버스는 씬에 있는 다른 오브젝트처럼 동작한다. 캔버스의 크기는 사각 트랜스폼을 사용하여 수동으로 설정할 수 있으며 UI 요소는 3D 배치에 기반하여 씬의 다른 오브젝트의 앞 또는 뒤에 렌더링된다. 이 방식은 월드의 일부를 이루도록 의도된 UI에 유용합니다. 이 방식은 “서사적 인터페이스”라고도 한다.

켄버스 스케일러

캔버스 스케일러(Canvas Scaler) 컴포넌트는 캔버스 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하는 데 사용된다. 스케일은 글꼴 크기와 이미지 경계 등 캔버스 아래의 모든 요소에 영향을 미친다.

• UI Scale Mode: 캔버스에서 UI 요소가 스케일되는 방법을 결정한다.
  • Constant Pixel Size: UI 요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지된다.(UI 요소의 포지션과 크기가 화면에서 픽셀로 지정하여 일정한 스케일을 적용할 수 있다.)
  • Scale With Screen Size: 화면이 커질수록 UI 요소도 커진다.(레퍼런스 해상도의 픽셀 수에 따라 포지션과 크기를 지정할 수 있다.)
  • Constant Physical Size: 화면 크기와 해상도에 관계없이 UI 요소가 동일한 물리적인 크기로 유지된다.(DPI 보고 필수, 보고하지 않을 경우 fallback DPI를 사용)

그래픽 레이캐스터(Graphic Raycaster)

그래픽스 레이캐스터는 캔버스에 레이캐스트를 하는 데 사용한다. 레이캐스터는 캔버스의 모든 그래픽스를 감시하여 그 중 하나에 충돌하였는지 여부를 결정한다. 그래픽 레이캐스터를 설정하여 후면 그래픽스를 무시하거나 그 앞에 있는 2D 또는 3D 오브젝트에 의해 가려지도록 설정할 수 있다. 이 요소의 처리 순서를 레이캐스팅의 앞이나 뒤로 변경하고 싶은 경우, 수동으로 우선 순위를 지정할 수도 있다.

19 오성혁

[참고]

• 블로그