https://www.youtube.com/watch?v=KrjclAb5XvU&t=1317s
유니티 UI
유니티에서 UI를 만드는 방식은 크게 2가지다.
1. IMGUI
OnGUI 함수와 GUI 관련 라이브러리를 활용해 스크립트로만 작성하는 방식
(약간 java fx랑 비슷한 느낌..? 유니티에서 Custom Editor만들 때 사용해봤는데 layout 등등 직접 코드로 ui 배치하는 방식)
2. Unity UI (UGUI)
유니티에서 제공하는 UI 패키지를 활용하는 방식. UI Canvas 위에 UI 오브젝트들을 배치하고 컴포넌트와 인스펙터를 활용해 좀 더 직관적으로 UI를 다룰 수 있는 방식
3. UI Toolkit
오늘 소개할 UI Toolkit은 현재 WEB 프론트 엔드에서 널리 사용되는 방식으로 UI를 만든다.
WEB 개발에서는 크게 3가지의 스크립트로 구성되는데 UI Toolkit도 이와 유사한 동작을 하는 스크립트를 제공한다.
-
레이아웃 (HTML etc.) -> UXML
-
스타일 (CSS etc.) -> USS
-
로직 (JavaScript etc.) -> C#
(어떻게 게임 내에서 사용하는 지는 다른 포스트에서 자세히 나눠서 볼 예정이다.)
UI Toolkit의 장점
👍 Texture를 건너뛴 UI 렌더링으로 효율적인 제작 가능
- WEB 기반으로 USS (Stylesheet)로 그리는 스타일 요청 (그림 확대 등으로 깨지는 현상 없이 곡선이 깔끔한 편!)
👍 손쉬운 커스텀 에디터 개발 가능
- 이전에는 IMGUI 기반으로 커스텀 에디터를 만들어서 상당히 불편한 점이 많았는데 UI Builder로도 Custom Edtior UI를 만들 수 있다.
👍 동적 텍스트 렌더링
- TextMesh Pro의 글꼴 렌더링 기술을 통합하였다.
👍 UI 애니메이션
- 외부 라이브러리 없이도 단순 전용 UI 애니메이션을 사용할 수 있다. (기존에 DoTween처럼 외부 라이브러리를 가져와서 사용하는 부분들을 좀 더 간단하게 처리할 수 있을 것으로 보임)
UI Toolkit의 특징
기존에는 Custom Editor를 만들 때 주로 사용되다가 최근에는 개발 측면에서도 사용되고 있다.
인게임 UI에서도 사용 가능한가?
예를 들어 건물 클릭했을 때 구매 버튼 뜨거나 3D 게임에서 몬스터 위에 hp bar 보이는 것 등에도 사용 가능한지 궁금할법하다. 우선 인게임 UI는 UGUI로 처리가 필요하다. UI Builder로 제작한 UI의 경우 따로 렌더링 되며 overlay 방식으로 이루어진다. 그래서 주로 화면에 있는 것을 만들 때 활용한다.
아무래도 웹 프론트를 다뤄본 경험이 있다면 쉽게 익숙해질 것같다. 씬에 올라가는 오브젝트도 많이 줄고 위에 언급한 것들 등 장점이 많은데 웹 경험 없이 UGUI만 다뤄봤다면 적응하는데 시간이 좀 걸릴 수 있을 것 같다. UI Toolkit은 위에 유튜브 링크에서도 언급하듯이 WEB 프론트 개발자와 게임 UI 개발자들 사이의 간극을 좁히는 기회가 될 것으로 보인다.
