Relative UI Layout - cheona-thousand-man/Unity-myBasics-Wiki GitHub Wiki

Canvas Scaler 설정

Canvas Scaler는 UI의 크기와 해상도를 조정하는 데 사용

• Canvas GameObject 선택 Hierarchy 창에서 UI의 Canvas GameObject 선택
• Canvas Scaler 컴포넌트 설정
  • Inspector 창에서 Canvas Scaler 컴포넌트 선택
  • UI Scale Mode를 Scale With Screen Size로 설정
• 기준 해상도 설정 Reference Resolution 필드에 기준 해상도 설정 (예: 1080x1920).
  • 기본 화면 비율에 맞춰 UI를 설계한 해상도
• Screen Match Mode 설정
  • Screen Match Mode를 Match Width Or Height로 설정 (화면의 가로와 세로 비율 중 어떤 것을 더 중요시 할지 결정)
• Match 슬라이더를 조정하여 가로와 세로의 비율을 어떻게 맞출지 설정 (0은 가로 우선, 1은 세로 우선)

Anchors (앵커) 설정

앵커를 사용하면 UI 요소가 화면 크기에 따라 위치/크기가 조정

• UI 요소 선택
  • Hierarchy 창에서 조정하려는 UI 요소 선택
• RectTransform 설정
  • Inspector 창에서 RectTransform 컴포넌트 선택
• 앵커 설정
  • Anchor Presets 버튼 (사각형 아이콘)을 클릭하여 앵커 설정
  • 다양한 앵커 프리셋이 있으며, UI 요소가 부모 요소(캔버스)에 대해 어떻게 위치할지 결정
    (예를 들어, UI 요소를 화면의 오른쪽 하단에 고정하려면 오른쪽 하단 앵커 설정)
• 앵커 조정
  • 앵커와 함께 Pos X, Pos Y, Width, Height 값을 설정하여 UI 요소가 앵커 위치에 따라 상대적으로 조정되도록 지정

Flexible Layouts 사용

Flexible Layouts (유연한 레이아웃) 시스템을 사용하여 UI 요소들이 부모 컨테이너에 따라 적절히 배치되도록 지원

• Layout Group 추가
  • UI 요소를 포함할 Empty GameObject를 만들고, 그 객체에 Horizontal Layout Group 또는 Vertical Layout Group 컴포넌트 추가
  • 이를 통해 자식 요소 자동으로 배치
• Content Size Fitter 사용
  • Content Size Fitter 컴포넌트를 추가하여 자식 요소들의 크기에 따라 부모 컨테이너의 크기가 조정되도록 설정
  • Horizontal Fit과 Vertical Fit 옵션을 사용하여 콘텐츠 크기에 따라 조정

Canvas의 Render Mode

Canvas의 Render Mode에 따라 UI가 화면에 어떻게 렌더링되는지 결정

• Screen Space - Overlay
  • UI가 화면에 오버레이
  • 화면 크기에 따라 자동으로 조정
• Screen Space - Camera
  • UI가 특정 카메라의 뷰에서 렌더링
  • 카메라의 속성에 따라 조정
• World Space
  • UI가 3D 월드 공간에 배치
  • UI의 크기와 위치는 카메라와의 거리, 크기 등을 고려하여 조정