UI와 canvas

I. UI (User Interface)

 : 게임에서 플레이어에게 게임 내 정보를 전달하는 매개체

 

 1. UGUI (Unity Graphic User Interface)

 

 : 유니티에서 제공하는 게임 내 정보를 이미지 혹은 문자로 유저에게 전달하고, 마우스를 이용해서 상호작용할 수 있게 하는 매개체.

 

 : 유니티에서는 UI 요소를 게임 월드 속의 게임 오브젝트로 취급함.

 

 : UI 요소를 생성하는 순간, Canvas와 EventSystem 게임 오브젝트가 함께 생성된다.

 

 2. 캔버스 (Canvas)

 

 : 유니티에서 UI 오브젝트를 배치하기 위한 영역

 

 UI 오브젝트는 생성할 때에 자동으로 Canvas 오브젝트의 자식 오브젝트로서 생성된다.

 

  : 반드시, UI 요소는 캔버스의 자식이여야만 한다.

 

  UI 요소가 캔버스의 자식이 아니라면, 게임 화면에 보이지 않는다.

 

 UI 요소는 Hierarchy 상의 순서대로 화면에 출력된다.

 

  : 뒤에 있는 요소가 앞에 있는 요소를 덮는다.

 

 

  3. 캔버스의 컴포넌트

 

 

      A. 사각 트랜스폼 (Rect Transform)

 

 Anchor

 

: 동일한 게임 오브젝트에 있는 Transform 컴포넌트의 포지션과 방향을 오버라이드하는 특수 컴포넌트

 

: 드래그 혹은, Inspector의 Anchor Preset을 활용하여, 다른 해상도일 때, 위치나 길이의 비율을 그대로 나타낼 수 있다.

 

 

 : 따로 지정하지 않은 경우, 그림처럼 다른 해상도일 때, 다른 결과가 나타나게 된다.

 

 

 

  : Anchor Presets 에서 위치에 따라 stretch를 선택하면, 선택한 위치에 따라, Rect Transform 컴포넌트의 위치를 지정하는 포지션 필드에 새로운 값을 입력할 수 있는 칸 (Top, Bottom, Left, Right) 이 생김.

 

  : stretch는 해당 위치에서 요소를 가리키는 방향의 끝과 끝까지 anchor을 자동으로 늘려준다.

   ex) bottom 에서 가로방향 stretch를 선택할 경우, anchor은 canvas의 하단 끝에서 끝까지 위치하게 됨.

 

 

   : 각 값은 얼마만큼의 간격을 해당 칸의 방향에서 공백으로 둘 것인가를 정함.

     ex) Left가 100이라면, 어떤 해상도의 화면이던지, 해당 캔버스의 왼쪽 끝에서 100만큼 떨어진 곳에서 해당 요소를 출력하기 시작한다.

 

 

Pivot

 

 : 회전, 크기, 스케일 수정을 피벗의 위치를 이동함으로써 조절할 수 있다.

 

 

      B. Canvas

 

 Render Mode - 1. Screen Space - Overlay

 

  : 모든 UI 요소가 화면에서 게임 씬 전체를 오버레이(모든 UI 요소는 해당 씬에서 렌더링 되는 다른 모든 것 위에 노출됨.)

 ** 렌더링 :  3차원 공간에 객체(Object)를 2차원 화면인 하나의 장면(Scene)에 바꾸어 표현하는 것

 

  : 스크린의 크기가 조절되거나 해상도가 변경되면 캔버스 또한, 자동으로 크기를 변경함.

 

  : Default 렌더 모드

 

  : 월드 좌표계를 쓰지 않고, 유저의 게임 화면 상의 좌표를 사용함.

     => 캔버스의 크기는 게임 화면 해상도에 고정됨

     => 캔버스의 Rect Transform 컴포넌트는 조절할 수 없음. (자식인 UI 요소는 가능)

 

 

Render Mode - 2. Screen Space - Camera

 

  : 지정한 카메라가 UI 요소를 렌더링

  : 지정한 카메라가 이동시, 캔버스 또한 따라서 이동함.

 

 

  : plane distance 항목만큼 카메라와 UI의 거리를 유지한다.

   => 지정한 카메라가 회전한다면, 캔버스 또한 plane distance 항목만큼의 거리를 유지하며 따라간다.

 

 

Render Mode - 3. World Space

 

  : 해당 모드에서는, 캔버스가 씬에 있는 다른 오브젝트처럼 동작함.

   => 캔버스를 오브젝트로 취급함.