Canvas

서론

    유니티의 캔버스(Canvas)는 게임 또는 애플리케이션에서 2D 그래픽 요소를 표시하는 데 사용되는 컴포넌트이다. 캔버스는 유니티의 UI 시스템의 일부로, UI 요소를 그리고 상호 작용하기 위한 기본적인 컨테이너이다. 캔버스를 사용하여 버튼, 텍스트, 이미지, 슬라이더, 패널 등과 같은 UI 요소를 배치하고 제어할 수 있다. 캔버스는 일반적으로 화면에 하나만 존재하며, 게임 또는 애플리케이션의 UI의 루트 역할을 한다. 여러 UI 요소를 하위 계층에 배치하고 조직화하기 위해 캔버스 내에 패널이나 그리드와 같은 다른 요소들을 사용할 수 있다.

---

캔버스(Canvas)

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

요소 그리기 순서

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

---

렌더 모드(Render Mode)

    캔버스에는 스크린 공간 또는 월드 공간에 렌더링하도록 하기 위해 사용되는 Render Mode 설정이 있다.

스크린 공간 - 오버레이(Screen Space - Overlay)

    이 렌더 모드에서는 UI 요소가 화면에서 씬의 위에 렌더링된다. 스크린의 크기가 조절되거나 해상도가 변경되면 캔버스는 여기에 맞춰 자동으로 크기를 변경한다.

프로퍼티

• Pixel Perfect: 선택하면 UI 엘리먼트는 렌더링될 때 가장 가까운 픽셀로 조정된다.
• Sort Order: 렌더링 되는 순서를 수치로 설정한다.(값이 작을수록 안쪽에 렌더링 됨)
• Target Display: 해당 캔버스를 어 디스플레이로 렌더링할 지 지정한다. 지원되는 보조 디스플레이(예: 모니터)의 최대 수는 8이다.
• Additional Shader Channels: 캔버스 메시를 만들 경우 이곳에서 사용할 추가 셰이더 채널의 마스크를 불러오거나 설정할 수 있다.

스크린 공간 - 카메라(Screen Space - Camera)

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

프로퍼티

• Pixel Perfect: 선택하면 UI 엘리먼트는 렌더링될 때 가장 가까운 픽셀로 조정된다.
• Render Camera: 캔버스를 렌더링할 카메라를 지정한다.
• Order in Layer: 어떤 UI 요소가 다른 UI 요소들 위에 그려질지를 결정할 수 있다. 값이 낮을수록 더 높은 레이어에 그려집니다.
• Additional Shader Channels: 캔버스 메시를 만들 경우 이곳에서 사용할 추가 셰이더 채널의 마스크를 불러오거나 설정할 수 있다.

월드 공간(World Space)

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

프로퍼티

• Event Camera: 이벤트를 처리하기 위한 카메라를 지정한다.
• Sorting Layer: 캔버스의 소팅 레이어(Sorting Layer)를 지정한다.(소팅 레이어란 2D 스프라이트를 포함한 2D 그래픽을 렌더링하는 순서를 제어하는 기능)
• Order in Layer: 어떤 UI 요소가 다른 UI 요소들 위에 그려질지를 결정할 수 있다. 값이 낮을수록 더 높은 레이어에 그려집니다.
• Additional Shader Channels: 캔버스 메시를 만들 경우 이곳에서 사용할 추가 셰이더 채널의 마스크를 불러오거나 설정할 수 있다.

---

켄버스 스케일러

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

프로퍼티

• UI Scale Mode: 캔버스에서 UI 요소가 스케일되는 방법을 결정한다.
  • Constant Pixel Size: UI 요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지된다.(UI 요소의 포지션과 크기가 화면에서 픽셀로 지정하여 일정한 스케일을 적용할 수 있다.)
    • Scale Factor: 캔버스의 모든 UI 요소를 이 배율로 스케일한다.
    • Reference Pixels Per Unit: 스프라이트에 이 ‘Pixels Per Unit’ 설정이 적용된 경우 스프라이트의 1픽셀이 UI의 유닛 하나에 해당한다.
  • Scale With Screen Size: 화면이 커질수록 UI 요소도 커진다.(레퍼런스 해상도의 픽셀 수에 따라 포지션과 크기를 지정할 수 있다.)
    • Reference Resolution: UI 레이아웃에 적합한 해상도이다. 화면 해상도가 크면 UI가 더 크게 스케일되고 작으면 UI가 더 작게 스케일된다.
    • Screen Match Mode: 현재 해상도의 종횡비가 레퍼런스 해상도에 맞지 않는 경우 캔버스 영역을 스케일하는 데 사용되는 모드이다.
      • Match Width or Height: 캔버스 영역의 너비 또는 높이를 레퍼런스로 사용하여 스케일하거나 그 사이로 스케일한다.
      • Expand: 캔버스 크기가 레퍼런스보다 더 작아지지 않도록 캔버스 영역을 수평 또는 수직으로 확장한다.
      • Shrink: 캔버스 크기가 레퍼런스보다 커지지 않도록 캔버스를 수평 또는 수직으로 자른다.
    • Match: 스케일링 레퍼런스로 너비 또는 높이를 사용할지, 아니면 둘 사이의 배합을 사용할지 결정한다.
    • Reference Pixels Per Unit: 스프라이트에 이 ‘Pixels Per Unit’ 설정이 적용된 경우 스프라이트의 1픽셀이 UI의 유닛 하나에 해당한다.
  • Constant Physical Size: 화면 크기와 해상도에 관계없이 UI 요소가 동일한 물리적인 크기로 유지된다.(DPI 보고 필수, 보고하지 않을 경우 fallback DPI를 사용)
    • Physical Unit: 포지션 및 크기를 지정하는 물리적 단위이다.
    • Fallback Screen DPI: 화면 DPI를 알 수 없는 경우 가정되는 DPI이다.
    • Default Sprite DPI: ‘Pixels Per Unit’ 설정이 ‘Reference Pixels Per Unit’ 설정과 일치하는 스프라이트에 사용할 인치당 픽셀(DPI)이다.
    • Reference Pixels Per Unit: 스프라이트에 ‘Pixels Per Unit’ 설정이 있는 경우 DPI는 ‘Default Sprite DPI’ 설정과 일치하다.
•  World Space Canvas 설정일 경우에만 해당 프로퍼티(픽셀 밀도를 제어) 등장
  • Dynamic Pixels Per Unit: UI에서 동적으로 생성되는 비트맵(예: 텍스트)에 사용할 단위당 픽셀의 양이다.
  • Reference Pixels Per Unit: 스프라이트에 ‘Pixels Per Unit’ 설정이 있는 경우 스프라이트의 픽셀 하나가 월드의 유닛 하나에 해당한다. ’Reference Pixels Per Unit’을 1로 설정하면 스프라이트의 ‘Pixels Per Unit’ 설정이 그대로 사용된다.

---

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

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

프로퍼티

• Ignore Reversed Graphics: 레이캐스터가 후면 그래픽스를 무시할지 여부를 지정한다.
• Blocked Objects: 그래픽 레이캐스트를 막을 오브젝트 타입을 지정한다.
• Blocking Mask: 그래픽 레이캐스트를 막을 오브젝트 타입을 지정한다.

---

주섬주섬

    만약 UI의 이벤트가 발생하지 않는다면, EventSystem이 있는 지 확인해보자.

참고

캔버스 - Unity 매뉴얼

캔버스 스케일러 - Unity 매뉴얼

그래픽 레이캐스터 - Unity 매뉴얼