UGUI

• 유니티에서 2D UI 요소들을 배치하고 렌더링하기 위한 기본적인 컴포넌트
• UI 요소들은 캔버스 위에 배치
• 캔버스는 이러한 UI 요소들이 화면에 어떻게 보일지 결정하는 중요한 역할

Canvas

• Render Mode
  • Screen Space - Overlay
    • 캔버스가 씬 내부의 어느곳에 있더라도 화면 전체를 덮는 모습으로 렌더링된다.
    • 해상도에 따라 UI의 크기도 자동으로 맞춰서 조절
    • 화면의 최상단에 위치
      • 항상 최상단에 표시되야하는 HUD(Head Up Display) 요소들에 적합
      • 팝업도 최상단이기 때문에 Overlay로 해도 괜찮을 것 같음
    • Sort Order : 렌더링 순서 설정
    • Camera의 Culling Mask에 체크된 모든 레이어가 렌더링된다.
    • Camera 방식보다 약간 빠르다.
      • 카메라 공간이 거쳐야하는 모든 컬링 및 정렬에 사용되는 계산을 피하기 때문
      • 카메라 컬링(culling) : 카메라가 렌더링할 장면의 요소들을 선택할 때, 화면에 보이지 않는 요소들은 제외(컬링)된다. 이때 추가적인 계산을 필요
      • 정렬(sorting) : 카메라 공간에서 요소들을 렌더링 순서에 맞게 정렬. 이 정렬 작업은 CPU 자원을 소모
  • Screen Space - Camera
    • 지정된 카메라와 일정 거리만큼 떨어진 앞쪽에 위치
    • 카메라가 Perspective로 설정되어 있으면 UI 요소가 원근감 있게 렌더링된다.
    • Render Camera : 캔버스를 렌더링할 카메라를 지정(비워둘경우 Camera를 찾는과정에서 성능하락 발생
    • Plane Distance : 카메라에서 캔버스까지의 거리를 설정
    • Sorting Layer : 소팅 레이어 지정
    • Sort Order : 렌더링 순서 설정
    • Screen Space - Camera 모드에서 z값 관련 오류 글
      • http://1st.gamecodi.com/board/zboard.php?id=GAMECODI_Talkdev&no=4364
  • World Space
    • UI 요소들이 3D 오브젝트처럼 월드 공간에서 렌더링
    • 빌보드 구현할 때 사용하는 듯
    • VR/AR 등 3D 환경에서 많이 사용

Canvas Scaler

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

• UI Scale Mode

  • Constant Pixel Size
    • 해상도에 상관없이 동일한 픽셀 수 유지
    • 1920x1080에서 작업 후, 더 큰 해상도인 2560x1440에서 보면 더 작게 보임
  • Scale With Screen Size
    • 해상도에 맞춰 픽셀 사이즈를 변경
    • 1920x1080에서 작업 후, 더 큰 해상도인 2560x1440에서 봐도 동일함(같은 비율에선 해상도가 바뀌어도 픽셀 사이즈도 바뀌므로 티가 안남)
    • Screen Match Mode 설정
      • Screen Match Mode 설정은 해상도 대응이 아닌 비율을 맞춰주는 설정
      1. Match Width Or Height : 값이 0으로 갈수록 Expand, 1로 갈수록 Shrink가 된다.
      2. Expand : 캔버스 크기가 Reference Resolution에 설정한 값보다 더 작아지지 않도록 캔버스 영역을 수평 또는 수직으로 확장
      3. Shrink : 캔버스 크기가 Reference Resolution에 설정한 값보다 커지지 않도록 캔버스 영역을 수평 또는 수직으로 잘라냄

  

  Expand

  

  Shrink

  • Constant Physical Size
    • 물리적 사이즈 설정(cm, inch 등)

Graphic Raycaster

• UI 요소들이 사용자 입력(터치, 마우스 클릭)을 받을 수 있다.
• 모든 UI 요소에 대해 레이캐스트를 수행

성능 이슈

• 드로우콜
  • 가능한 같은 종류의 UI 요소들을 그룹화해서 배치
    • 이미지 → 텍스트 → 이미지 → 텍스트 순으로 배치되어있으면 드로우콜이 별도로 발생
  • 순서가 중요하지 않다면 같은 종류끼리 연속으로 배치
• 캔버스 리빌드
  • 캔버스에 변경이 발생할 때마다 전체 캔버스를 리빌드한다.
    • 매우 비용이 크기 때문에 불필요한 재빌드를 줄여야함
  • 레이아웃 그룹이나 마스크 컴포넌트 사용 시, 캔버스 리빌드가 자주 발생
  • 캔버스를 적절히 분할하는 것도 중요
    • 빈도에 따른 분리
• 레이아웃 그룹 비활성화
  • 레이아웃 그룹 사용을 최소화
  • 정렬이 끝난 레이아웃은 비활성화하고 필요 시, 동적으로 레이아웃을 변경
• 픽셀 퍼펙트 비활성화