Beginner UI 01. UI Canvas

원문 : http://unity3d.com/learn/tutorials/modules/beginner/ui/ui-canvas



여기서는 Unity UI를 구성하는 하나의 큰 단위, Canvas에 대해 설명한다.

Unity UI의 canvas란?

  • UI element를 컨트롤하는 component다.
  • 모든 UI element는 canvas의 자식이어야 한다.
  • 한 scene에 하나 이상의 canvas가 있을 수도 있다.
  • UI element를 사용하기 위해서는 scene에 적어도 하나의 canvas가 있어야 한다.
    • canvas가 없을 때 UI element를 만든다면, canvas가 자동으로 만들어지고 이 canvas 하위에 UI element가 놓이게 된다.

canvas의 Render Mode

  • Screen Space - Overlay (기본값)
    • 특징
      • scene 위에 overlay된다. 즉, scene에 포함된 다른 요소보다 위에 그려진다.
      • screen 크기에 맞게 자동으로 그려진다. 즉, screen 크기가 바뀌면 canvas 크기도 바뀐다.
        • "Rect transform" component를 수정할 수 없다. screen 크기에 맞게 값이 자동으로 설정된다.
    • 속성
      • Pixel Perfect
        • 가장 가까운 정수 픽셀 값으로 그린다.
        • UI가 좀 더 날카롭게 보인다.
      • Sort Order
        • 동일한 scene 안에 있는 서로 다른 canvas 사이 정렬 기준을 지정한다.
        • 값이 더 큰 canvas의 UI가 화면 앞쪽에 그려진다.
  • Screen Space - Camera
    • 특징
      • Screen Space - Overlay와 거의 같지만, camera를 지정할 수 있다는 점이 다르다.
      • scene 위에 놓인 game object와 같이 UI가 보인다.
      • camera 크기, camera와의 거리에 맞게 자동으로 그려진다.
        • "Rect transform" component를 수정할 수 없다.
      • scene 위에 놓은 다른 game object와 독립적으로 동작하려면, UI 전용 camera를 등록하고 clear flags, culling mask, depth를 조절하자.
    • 속성
      • Pixel Perfect
        • "Screen Space - Overlay"와 같다.
      • Render Camera
        • canvas의 UI element를 그릴 camera를 지정한다.
        • 지정할 수 있는 camera는 당연히 scene 안에 있는 camera다.
        • Perspective Camera를 지정할 수도 있다.
        • 없다면, Render Mode를 Screen Space - Overlay로 지정할 때와 같다.
      • Plane Distance
        • 지정한 Render camera와의 거리를 조절해 scene 위에 UI가 놓일 위치를 지정한다.
        • Game View 화면상의 UI 크기는 달라지지 않는다.
        • Render camera의 "Clipping Planes"에 포함된 near ~ far 범위 바깥의 값을 설정한다면 UI가 보이지 않는다.
      • Sorting Layer, Order in Layer
        • UI가 놓일 layer를 지정하고, 동일 layer 기준으로 canvas의 정렬 순서를 지정한다.
        • 값이 더 큰 canvas의 UI가 화면 앞쪽에 그려진다.
  • World Space
    • 특징
      • UI를 scene의 game object처럼 위치할 수 있다.
      • "Rect transform" component를 수정할 수 있다.
    • 속성
      • Event Camera
        • click, hover 등의 이벤트를 확인할 camera. 주로 scene을 그리고 있는 main camera를 지정한다.
      • Sorting Layer, Order in Layer
        • "Screen Space - Camera"와 같다.

Canvas Scaler

화면상의 UI 크기와 픽셀 밀도를 지정한다.
다양한 화면 크기를 어떻게 대응할 지 결정한다. 
  • Constant Pixel Size (기본값)
    • 실제 화면의 픽셀 크기를 UI의 가로*세로 크기로 정한다.
    • 이미지 1픽셀이 화면 1픽셀에 대응한다.
  • Scale With Screen Size
    • 기준값으로 입력한 가로/세로 크기를 UI의 가로*세로 크기로 정한다.
    • 가로 기준 / 세로 기준을 적당히 지정한다.
  • Constant Physical Size
    • 픽셀 단위와 관계없이 물리 장비의 크기와 픽셀 밀도 값(DPI 단위)를 바탕으로 한 크기를 UI의 가로*세로 크기로 정한다.


RSS :
Response
0 Trackbacks 0 Comments