2024.06.14 TIL - UGUI(Unity's User Interface)

UGUI (Unity의 User Interface)

Unity의 기본 UI 시스템으로 게임 내의 사용자 인터페이스를 구축하는 데 사용된다.

 

Canvas

`UGUI`에서 모든 UI 요소는 `Canvas`라는 컴포넌트 내에 배치된다.

`Canvas`는 스크린 오버레이, 카메라 오버레이, 월드 공간의 3가지 렌더 모드를 지원한다.

 

세 가지 렌더링 모드

Screen Space - Screen Overlay

카메라 설정이나 월드의 변화에 상관없이 독립적으로 화면 위에 렌더링한다.

즉, 무조건 UI를 제일 위에 평면으로 그리는 모드이다.

Screen Space - Camera Overlay

특정한 카메라가 실제 평면을 찍고 있는 것처럼 그린다.

Order in Layer에 따라 그려지지 않을 수도 있다.

World Space

몬스터의 HP처럼 실제 게임 오브젝트처럼 UI를 올릴 수 있다.

 

Rect Transform

Unity의 기본 Transform 대신 UI 요소에는 `Rect Transform`이 사용된다.

위치, 크기, 회전, 스케일을 지정하는 데 사용되며, 앵커 및 피벗을 사용하여 부모와의 상대적인 위치를 지정한다.

 

앵커와 피벗

앵커

UI 요소의 위치가 어떻게 부모 요소에 대해 정의되는지를 결정한다. 이는 UI 요소가 화면의 다양한 해상도와 크기에 동적으로 적응할 수 있도록 해준다.

위치 지정

부모의 좌하단을 (0, 0), 우상단을 (1, 1)로 하는 것을 기준으로 하고 있으므로 비율이 달라지면서 어떻게 처리해야 할지를 예상하고 설계해야 한다.

스트레치 모드

스트레치 모드를 사용하면 UI 요소가 부모의 특정 방향(가로, 세로 또는 둘 다)으로 꽉 차도록 확장된다. 예를 들어, 화면의 상단 바나 배경 이미지 등이 이에 해당한다. 스트레치 모드는 앵커 포인트를 사용하여, UI 요소가 화면의 다양한 크기에 맞게 유연하게 조정되도록 한다.

 

피벗

오브젝트 자체가 크기가 변하거나 회전할 때 어떻게 변화해야 할지를 정의한다.

크기 변화

피벗은 UI가 변형될 때 (예: 확장, 축소) 중심이 되는 점을 정의한다. 체력바가 0에서 100%로 증가할 때 왼쪽에서 오른쪽으로 확장되길 원한다면, 피벗의 X 값을 0으로 설정한다. 기본 X값인 0.5라면 바가 양쪽으로 늘어나고 줄어들 것이다.

 

UI Components

UGUI는 다양한 UI 요소들을 제공한다: 버튼, 이미지, 텍스트, 슬라이더, 스크롤 바 등.

 

Event System

UGUI의 이벤트 시스템은 UI 상호작용을 관리한다.

마우스 클릭, 드래그, 키보드 입력 등 다양한 입력 이벤트를 처리한다.

 

TextMeshPro

`TextMeshPro`는 원래 에셋 스토어에 있던 인기 있는 Unity 에셋에서 시작했다. 이후 Unity Technologies에 인수되어(거의 모든 사람들이 쓰다 보니) Unity의 기본 기능으로 포함되었다.

`TextMeshPro`는 Unity에서 제공하는 고급 텍스트 렌더링 시스템이다. 줄간격 등 다양한 고급 텍스트 기능을 제공한다. 다만, 텍스트 에셋을 만드는 것이 다소 불편한 부분들도 있어 학습이 필요하다.