UGUI

유니티 사용자 인터페이스 ( Unity Graphical User Interface )

게임 컨텐츠는 대부분 유저의 눈에 들어오는 정보량이 많은 컨텐츠 중 하나이다.

단순히 게임 내에서 돌아다니는 플레이어 , 몬스터 등의 위치나 모션에 대한 정보 뿐 아니라 간단한 도형과 텍스트를 통해 플레이어가 선택해야 할 선택지와 인지하고 있어야 할 정보를 전달해야 한다.

그렇기 때문에 UI 는 게임에 없어서는 안 될 중요한 포인트 중 하나이다.

UGUI 는 유니티에서 사용자 인터페이스를 만들기 위한 2D UI 시스템이다.

게임 내에서 보이는 버튼 , 체력바 , 점수표시 , 미니맵 같은 화면 위의 그래픽 요소를 만드는 시스템이다.

구성요소	설명
Canvas	모든 UI 의 기준 좌표 공간. 모든 UI 는 반드시 Canvas 아래에 존재해야 한다.
RectTransform	UI 전용 Transform , 크기와 위치를 비율 ( Anchor ) 로 지정 가능하다
EventSystem	버튼 클릭 , 드래그 , 포인트 이벤트 등을 관리하는 시스템이다
Graphic Raycaster	마우스 / 터치 이벤트가 UI 에 닿았는지를 감지하는 레이캐스트 시스템이다

 

 

기본 동작

1. Canvas 가 화면 전체를 기준으로 한다 ( UI 의 부모 오브젝트 )
2. 각 UI 요소 ( Button , Image , Text 등 ) 는 RectTransform 으로 위치 , 크기 , 정렬을 제어한다
3. EventSystem 과 Raycaster 가 입력 이벤트를 전달한다
4. CanvasScaler 를 이용해 화면 해상도에 따라 자동으로 크기를 보정한다

 

 

Canvas 의 Render Mode

Render Mode	설명	사용 상황
Screen Space - Overlay	화면 위에 바로 그려진다 ( 카메라 독립적 )	대부분의 일반 UI
Screen Space - Camera	특정 카메라를 통해 렌더링	3D 카메라 연동 UI
World Space	3D 공간 속 오브젝트처럼 존재	VR / AR , 3D 월드 내 UI

 

 

 

주요 컴포넌트

컴포넌트	기능
Text / TextMeshPro	글자 출력
Image	스프라이트나 배경 이미지 표시
Button	클릭 이벤트 처리 ( OnClick( ) )
Slider / Scrollbar / Toggle	입력 UI 요소
Layout Group	UI 정렬 및 자동 배치
Content Size Fitter	텍스트 길이에 맞춰 자동 크기 조정

 

 

 

화면 해상도 대응 ( Canvas Scaler )

Canvas 에 있는 Canvas Scaler 는 화면 해상도에 맞게 UI 를 자동으로 확대 / 축소 시켜준다.

• UI Scale Mode → Scale with Screen Size
• Reference Resolution : 1920 x 1080 등
• Match Width Or Height : 비율 맞추기 옵션 ( 0 = 가로 , 1 = 세로 )

 

 

정리

UGUI 는 Unity의 화면 UI 시스템이다

Canvas 와 RectTransform 그리고 EventSystem 이 3요소가 핵심이다

스크린 공간 또는 월드 공간에 UI 를 배치한다

해상도별 자동 스케일링을 지원한다

 

 

 

참고 자료

https://docs.unity3d.com/kr/2019.4/Manual/UIToolkits.html