[유니티 기초] Canvas 란 무엇인가(Canvas, Canvas Scaler, Graphic Raycaster 컴포넌트)

Heirachy window 우클릭 목록

 UI 는 User Interface의 약자로 사용자가 Camera 영역에 비춰지는 역영이 아닌 Canvas에 배치되어 사용되는 오브젝트들을 말한다. 위의 "Heirachy Window 우클릭 목록" 그림에서 UI의 하위 목록을 모면 모든 오브젝트가 Canvas 안에 만들어 지지만 Event System만은 따로 만들어 진다. 그도 그럴 것이 Event System은 기본적인 UI 오브젝트와는 다르기 때문이다.

 

UI 우클릭 목록의 모든 오브젝트

UI 우클릭 목록에 있는 Canvas를 제외한 모든 오브젝트를 생성했고 EventSystem 만이 Canvas 밖에 생성이 되었다. 그리고 EventSystem 오브젝트가 화면에 렌더링 된 이미지가 없다. EventSystem 에 관한 문서를 이 링크(아직 없음)를 따라 가면 된다. 결국, UI는 Canvas 위에 올라오는 오브젝트이고, Canvas는 카메라 영역과 무관하게 디스플레이 전체를 의미한다는 걸 알 수있다. 다만, 컴포넌트의 속성을 통해 이 설정도 바꿀 수 있다.

 

 

Canvas를 생성하고 Inspector 창을 살펴보면 4개의 컴포넌트가 보인다.

Rect Transform은 2D 영역에서 사용하는 Transform 이라 보면 된다. 일반적으로 화면 크기에 고정되어 값을 변경할 수 없으며, 직관적으로 그 사용법을 이해할 수 있으니 나머지 세 컴포넌트를 살펴보자.

 

• Canvas(컴포넌트)
  • Render Mode
    1.  Render Mode 에는 "Screen Space - Overlay", "Screen Space - Camera", "World Space" 가 있다.
    2. Screen Space - Overlay : 크기가 화면(디스플레이)에 맞게 고정이 되고 "Pixel Perfect", "Sort Order", "Target Display" 속성이 표시된다.
       
       • Pixel Perfect : 요소의 픽셀을 선명하게 유지하고 블러(Blur)를 방지하는 효과를 볼 수 있다.
       • Sort Order : 캔버스의 정렬 순서이다. 숫자가 작을 수록 먼저 렌더링 된다.
       • Target Display : 다중모니터를 사용할 경우 표시할 모니터를 지정한다.
    3.  Screen Space - Camera : 아래의 "Screen Space - Camera 예시" 이미지는 카메라가 캔버스를 비추고 있는 모습이다. 카메라가 있는 위치에서 일정 거리에 자동으로 위치시킬 수 있다. Screen Space- Camera를 선택하면 하위 속성으로 "PIxel Perfect", "Render Camera", "Plance Distance", "Sorting Layer", "Order in Layer" 가 나타난다.
       • Pixel Perfect : 요소의 픽셀을 선명하게 유지하고 블러(Blur)를 방지하는 효과를 볼 수 있다.
       • Render Camera : Canvas를 비출 카메라를 지정한다.
       • Plance Distance : 카메라로 부터 거리를 지정한다. 크기는 카메라 영역에 꽉 차게 조절된다.
       • Sorting Layer : 정렬 레이어를 지정한다.
       • Order in Layer : 레이어에서 렌더링 될 우선 순위를 지정한다.
    4. World Space : 지정된 카메라가 비추는 역역을 렌더링한다. 아래의 "World Space 예시" 이미지는 카메라가 캔버스를 비추고 있는 모습니다. 일반적으로 카메라는 캔버스를 렌더링하지 않지만 Canvas 컴포넌트에서 지정된 카메라는 Canvas를 렌더링 한다. 하위 속성으로 "Pixel Perfect", "Event Camera", "Sortng Layer", "Order in Layer" 가 있다.
       • Pixel Perfect : 요소의 픽셀을 선명하게 유지하고 블러(Blur)를 방지하는 효과를 볼 수 있다.
       • Event Camera : Canvas를 비출 카메라를 지정한다.
       • Sorting Layer : 정렬 레이어를 지정한다.
       • Order in Layer : 레이어에서 렌더링 될 우선 순위를 지정한다. 

 

Screen Space - Camera 예시

World Space 예시

• Canvas Scaler
  • UI Scale Mode 속성. 캔버스에서 UI 요소가 스케일되는 방법을 결정합니다. 하위 속성으로 "Constant Pixel Size", "Scale With Screen Size", "Constant Physical Size"가 있다.
  • Constant Pixel Size : UI 요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지된다. Canvas Scaler 컴포넌트의 속성이 "Scale Factor", "Reference Pixels Per Unit"으로 변경됩니다. 픽셀 기준으로 UI크기가 정해지기 때문에 화면 해상도가 커지면 UI가 작아보인다.
    
    1. Scale Factor : 캔버스의 모든 UI 요소를 이 배율로 스케일한다.
    2. Reference Pixels Per Unit : 스프라이트에 이 ‘Pixels Per Unit’ 설정이 적용된 경우 스프라이트의 1픽셀이 UI의 유닛 하나에 해당한다.
  • Scale With Screen Size : UI 레이아웃에 적합한 해상도다. 화면 해상도가 크면 UI가 더 크게 스케일되고 작으면 UI가 더 작게 스케일된다. Canvas Scaler 컴포넌트의 속성이 "Reference Resolution", "Screen Match Mode", "Match Width or Height", "Match"로 변경된다.
    1. Reference Resolution :  UI 레이아웃에 적합한 해상도입니다. 화면 해상도가 크면 UI가 더 크게 스케일되고 작으면 UI가 더 작게 스케일된다.(해상도와 UI 크기의 비율이 일정)
    2. Screen Match Mode : 현재 해상도의 종횡비가 레퍼런스 해상도에 맞지 않는 경우 캔버스 영역을 스케일하는 데 사용되는 모드이다.
       • Match Width or Height : 캔버스 영역의 너비 또는 높이를 레퍼런스로 사용하여 스케일하거나 그 사이로 스케일한다.(가상의 디스플레이 크기에 맞춰서 UI크기를 조정함), 하위 속성으로 Match가 나타난다.
         • Match : 스케일링 레퍼런스로 너비 또는 높이를 사용할지, 아니면 둘 사이의 배합을 사용할지 결정한다.
       • Expand : 캔버스 크기가 레퍼런스보다 더 작아지지 않도록 캔버스 영역을 수평 또는 수직으로 확장한다.
       • Shirk : 캔버스 크기가 레퍼런스보다 커지지 않도록 캔버스를 수평 또는 수직으로 자른다.
  • Constant Physical Size : 화면 크기와 해상도에 관계없이 UI 요소가 동일한 물리적인 크기로 유지된다. 실제 길이를 사용한다.
    1. Physical Unit : 현재 디스플레이의 길이를 계산한 실제 단위를 사용한다.
    2. Fallback Screen DPI : 화면 DPI를 알 수 없는 경우 가정되는 DPI다.
    3. Default Sprite DPI : ‘Pixels Per Unit’ 설정이 ‘Reference Pixels Per Unit’ 설정과 일치하는 스프라이트에 사용할 인치당 픽셀(DPI)다.
    4. Reference Pixels Per Unit : 스프라이트에 ‘Pixels Per Unit’ 설정이 있는 경우 DPI는 ‘Default Sprite DPI’ 설정과 일치한다.

 

유니티 - 메뉴얼 : 캔버스 스케일러 / Canvas Scaler 문서에 동일한 설명이 나와있다.

유니티 - 매뉴얼: 캔버스 스케일러 / Canvas Scaler

• Graphic Raycaster
  • 레이캐스터는 캔버스의 모든 그래픽스를 감시하여 그 중 하나에 충돌하였는지 여부를 결정한다다
  • Ignore Reversed Graphics : 레이캐스터가 후면 그래픽스를 무시할지 여부다.
  • Blocked Objects : 그래픽 레이캐스트를 막을 오브젝트 타입이다.
  • Blocking Mask : 그래픽 레이캐스트를 막을 오브젝트 타입이다.

 

그래픽 레이캐스터 - Unity 매뉴얼 문서에 동일한 설명이 나와있다.

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

 

캔버스 - Unity 매뉴얼 문서에서 전체적인 설명을 읽어 볼 수 있다.

캔버스 - Unity 매뉴얼