[Unity] uGUI

## 개요

Unity UI(uGUI)는 built-in으로 탑재된 GameObject기반의 UI 관련 패키지이다.

GameObject기반이니 당연히 컴포넌트 기반으로 동작한다.

핵심은 "제공되는 각기 다른 특성을 지닌 컴포넌트들을 사용해 Canvas게임오브젝트 아래에 자식 UI게임오브젝트들을 구성하면, Canvas 게임오브젝트는 자식까지 포함해 C++ 엔진과 연동해서 UI로 각 프레임에 그려주겠다"이다. (C++로 작성된 핵심 컴포넌트는 Canvas, RectTransform, CanvasRenderer, CanvasGroup)

 

UI Toolkit이라는 신규 UI시스템을 유니티에서 밀고는 있지만 아직은 uGUI가 지원범위도 넓고 안정적이라 실무 도입은 이른것 같다. UI Toolkit으로 완전히 전환되는 시점은 모르겠지만 내부적으로 아래와 같이 진행되는 중인듯했다.

모듈 참조 관계

 

## Graphic(C#)

- Unity UI C# 라이브러리에서 제공하는 기본 클래스(UnityEngine.UI.Graphic)

  - UnityEngine.Graphics 와는 별개임

- Canvas 시스템에서 렌더링 가능한 모든 Unity UI C# 클래스의 기본 클래스 (CanvasRenderer와 연동)

  - Image, Text, TMP_Text, etc

  - Button의 경우 Selectable에서 파생되며 내부에 Image와 Text를 통해 화면을 그림

- DoMeshGeneration() : UI는 Mesh로 이루어짐

- 그래픽적 요소들을 설정 및 저장 (Canvas를 통해 계산되고 그려지기 위해)

 

아래와 같이 주요 클래스 관계도를 보면 Unity UI가 어떻게 동작하는지 대략적으로 이해 가능하다.

주요 클래스 관계도

 

  - UnityEngine : Canvas, RectTansform, CanvasRenderer와 같이 요소들을 계산하고 그려주는 핵심모듈(C++ interop)

  - UnityEngine.EventSystem : UI상호작용 관련모듈

  - UnityEngine.UI : UI요소 관련모듈

 

즉, 화면표시나 레이아웃 구성, 사용자인터랙션이 필요한 UI컴포넌트(게임오브젝트)들을 Canvas로 모아서 C++ 엔진측에서 받아서 처리하는 시스템이다. UIBehaviour를 상속받아 Custom UI 컴포넌트도 제작이 가능할거라 예상된다.

 

## Canvas(C++)

- 메시를 구성하여 렌더링 명령을 생성(Re-batch, Batch build)

  - 배치된 UI 요소를 나타내는 메시를 생성하고, UI 요소가 변경되면 메시를 재생성하고, UI가 실제로 표시되도록 GPU에 draw call을 실행

- Canvas 단위로 배칭(batching)

  - 하위 Graphic 요소들을 하나의 버퍼로 만들어서 GPU에게 draw call

  - 그렇기 때문에 하위 요소들에 변경이 발생시 Canvas 단위로 batch가 필요

  - UI의 정적요소와 동적요소에 대해 캔버스를 분할하여 최적화 가능

- Canvas가 리배칭이 필요한 Geometry를 포함하면 Canvas는 dirty flag 처리

- DrawRawMesh()

  - NestedCanvas 리스트가 있다면 재귀로 이터레이트 돌면서 각각 DrawRawMesh()

### Nested Canvas

- 캔버스가 캔버스를 소유 가능

- 자식은 부모의 속성을 상속 여부 선택

- 각 자식 캔버스간에는 재구성 영향을 미치지 않음 (부모의 크기가 변경되는 경우는 예외)

### Dirty flag

- 계층구조 시스템에서 하위 요소들의 업데이트 필요여부 체크에 주로 사용됨

- LayoutDirty, VericesDirty, MaterialDirty

- Dirty -> Rebuild

### Rebuild

- C# Graphics 컴포넌트의 레이아웃과 메시가 다시 계산되는 행위

- dirty에 따라 계층구조 깊이별로 정렬, 메시 재빌드, Canvas Renderer의 Material 업데이트

- 모든 enabled 요소들의 메시를 재생성 : 완전 투명(alpha가 0)이라도 생성함에 유의

- Batching을 기준으로 Material 재생성

### Batch building (Canvas)

- Unity의 그래픽 파이프라인으로 보낼 적절한 렌더링 명령을 생성

- 캔버스가 dirty로 표시될 때까지 캐시되고 재사용

- 멀티스레드 연산(코어가 적은 모바일 SoC와 코어가 많은 데스크톱간 성능이 매우 다름)

### Batching

- 동일한 캔버스

- 동일한 material 및 sprite에셋 (atlas)

- 동일한 Z 깊이의 RectTransform

- 동일한 마스크 적용

 

## RectTransform(C++)

- Transform 파생클래스 (Transform과 마찬가지로 계층구조)

  - 모든 GameObject 및 Component는 Transform이 기본포함

  - 모든 UI object는 RectTransform이 기본포함

- 계층구조(Hierarchy)

  - object의 변경이 계층적으로 영향

  - Re-parenting 비용 (부모 변경에 주의)

    - `OnBeforeTransformParentChanged`, `OnTransformParentChanged`, `OnTransformChildrenChanged`

 

## 최적화 팁

- 중요한건 UI의 내부동작을 이해하고 그에맞게 최적화해서 매 프레임 업데이트시 비용을 최소화 시키는것

- UI프로파일러 활용("Window > Analysis > Profiler > Profiler Modules > UI, UI Details") : batching 깨지는거 확인 등

- 정적 Canvas와 동적 Canvas를 분리 (갱신비용 vs drawcall 비용 사이에 상황에 맞는 최적화 필요)

  - 편의상 Nested canvas 활용 가능. 단, 부모는 정적이어야함(부모에 변경 발생시 nested canvas에 대해 갱신 발생)

- 계층구조 depth 낮게 유지

  - Unity GameObject 및 UI는 모두 계층구조로 이루어짐 (Transform, RectTransform)

  - dirty flag 계산 및 여러 처리시 계층이 깊고 복잡할수록 비용이 커짐

- Re-parenting 주의 (e.g. 런타임에 부모 옮겨다니는 행위)

- `LayoutGroup`에서 파생되는 컴포넌트들 사용시 요소들이 동적인 경우 비용이 많이 발생하니 주의필요(e.g. 스크롤 내부에 GridLayoutGroup 사용)

- Event 처리가 필요없는 Canvas는 raycast같은 유저입력 관련 옵션 끄기(or 관련 컴포넌트 제거)

- 기타 자세한 사항들은 참조링크 참고

 

## References

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

사용자 인터페이스(UI) 생성 - Unity 매뉴얼

https://learn.unity.com/tutorial/nested-canvas-optimization-2019-3

Nested Canvas Optimization - 2019.3 - Unity Learn

https://create.unity.com/Unity-UI-optimization-tips

Unity

https://unity.com/how-to/unity-ui-optimization-tips

Unity UI optimization tips

https://www.youtube.com/watch?v=1e2mSCS7o1A