[Unity UI Toolkit] 공식 문서 읽기

참고한 공식 문서

UI 툴킷 - Unity 매뉴얼 (unity3d.com)

UI 툴킷 - Unity 매뉴얼

---

[공식 문서 읽기] 언리얼 엔진 Behavior Tree (tistory.com)

[공식 문서 읽기] 언리얼 엔진 Behavior Tree

이 글에서 이어지는 내용이다.

여기서 포인트는 '와중에 언리얼의 - 에디터 창을 그대로 유니티로 가져왔다.'

저 부분이 궁금했다.

대체 어떻게?

'커스텀 에디터'라는게 있는 것은 알고 있었는데 어떻게 쓰는걸까?

요새 개발 화두 중 하나가

'하드 코딩 ㄴㄴ; 그렇다고 CSV 이것도 ㄴㄴ; 에디터 창이 있어야 해!' 였기 때문에 기회가 된 김에 공부를 해보았다.

참고할 코드를 짜 둔 지환이형 사랑합니다.

---

※ 상기한 공식 문서를 읽고 저 나름대로 이해하기 편한 순서, 방식대로 재구성한겁니다. 내용은 많이 다르니 참고해주십쇼.

 

우선 기본적으로, 유니티의 UI는 3 종류가 있다.

 

Unity UI : 유니티를 잡아본 사람이라면 익숙한 그 UI다. Rect Transform 쓰는 그것.

컴포넌트 기반으로 이뤄진 유니티와 어울리게 컴포넌트를 기반으로 짜여있다.

다만, 상기한 커스텀 에디터를 만들 수는 없음. 컴포넌트가 뛰어놀 게임 씬을 벗어나니 당연한걸지도.

 

IMGUI : 나도 이번에 처음 안 UI 시스템이다. 개발자들 디버깅용 UI로 딱 공머스러운 디자인으로 동작한다.

 

UI 툴킷 : 현재 유니티에서 개발 중인 UI 시스템이다. 한편 계획상으로는 이쪽을 더 밀것으로 보이는데...

실제 구현하는 코드를 짜보면 웹 개발하는 느낌이다. 그 HTML(정확히는 XML)이랑 CSS 갖고 노는 그거.

실제로 그것에 대응되도록 UXML과 USS가 존재한다. 기능은 앞서 말한 애들과 딱 똑같다.

그리고 JS가 이제 CS가 되는 것이지. (실제로 C#은 유니티의 '스크립트' 언어다. 빌드하면 C++ 거침)

그래서... 기존 코드 짜던 느낌과는 꽤 괴리감이 있다. 아마도 웹/앱 개발 경험과 동일하게 가기 위함인듯.

대신, 밀어주기 때문인지 상기한 커스텀 에디터 뿐만 아니라 커스텀 인스펙터-그러니까 인스펙터창도 조작이 UI 툴킷을 사용하면 조작이 가능하다-게임 내 UI까지 UI 툴킷으로 개발 가능하다.

기능 자체는 아직 Unity UI에 비해 미구현된게 많지만 커버하는 범위는 가장 넓음.

 

이만큼 UI 툴킷을 어필을 했으니... 배워보자.

---

Visual Tree

공식 문서에는 이것을 '시각적 트리'라고 번역을 하는 바람에 글이 진짜 안 읽힌다.

그냥 Visual Tree, 그대로 받아들이는게 낫다. 실제 코드에서도 Visual Tree Asset- 이런식으로 단어 그대로 사용한다.

어쩌다보니 이전 글 Behavior Tree와 연결됐는데-우연이다- 구조는 동일하다.

 

Root가 있고 그 밑에 노드-노드-노드

어찌보면 Canvas 밑에 UI 요소를 붙여두는 기존 Unity UI와 비슷한 면도 있긴 하지만,

이 Visual Tree는 Canvas처럼 꼭 무엇이 Root여야 한다는 것은 없다.

아니 정확히는 Root를 포함한 모든 노드가 Visual Element라는 녀석이다.

어찌보면 기존 유니티의 GameObject랑 비슷하다. 씬 내에 있는 모든 것은 GameObject이고, 그 GameObject 밑에 다시 오브젝트를 자식으로 삼고, 또 자식으로 삼고... 그런 구조.

참고로 Root에 붙이지 않는다면-Add 함수가 있다- UI 상으로 나타나지 않는다.

 

또 다른 차이점은 Event System도 없음. 대신 Callback 등록 / 등록 취소 과정이 있음.

 

일단, 저 구조, Visual Element로 이뤄진 Visual Tree라는 것을 기본으로... 나머지는 사실 웹 개발이다...

 

UI 툴킷을 사용해서 UI를 구성하는 방법에는 3 가지가 있는데

1. UI Builder

이런식의 UI 에디터 창이 있다. 그 안드로이드 스튜디오에서 화면 UI 구성하는거랑 정말 동일하다.

밑에 있는 UI 요소 화면에 끌어놓고, 크기 조정하고, 정렬하고...

왼쪽에 있는 것이 하이어라키(화면 상에 있는 UI 요소들 쭉 나열) / 밑에 있는게 UI 요소들 (Libarary라고 한다.)

가운데에 있는 것이 화면

오른쪽에 있는 것이 선택한 UI 요소의 크기, 배치, 색 등등등이다. (Detail이라고 한다.)

 

2. UXML

사실 UI Builder에서 결국 만들어내는게 이 UXML이다.

UI Builder 작업 끝나고 저장을 하면 이런 UXML이 생성된다.

딱 봐도 HTML.

당연히 저것을 꾸며줄 CSS, 아니 USS도 있다.

 

3. C# 코드

상기 Visual Tree - Visual Element 구조를 이해했다면 문제 없다.

Visual Tree Asset, Visual Element도 다 클래스다.

위에 UXML 코드에 적혀있는 Label, Button 이런 것들은 이제 Visual Element를 상속 받은 자식 클래스.

결국 코드에선 Root가 될 Visual Element 하나 만들고 (실제 코드에선 기본적으로 준다. 애초에 필수니까)

그 Label이나 Button 등 Visual Element를 Instantiate하고-그냥 게임 오브젝트 Instantiate랑 동일-Root에 Add하면 된다.

속성도 코드로 접근 다 가능함.

 

근데 기존 Unity UI도 1인 개발일지라 하더라도 코드로 UI를 만들진 않는다.

따라서 실제로는 위에 UI Builder나 능력이 된다면 UXML로 대충 눈에 보이게 만든 후,

C# 코드는 이 각 요소들을 연결 짓고 동작을 부여하는 식으로 코드를 짜게 됨. JS...

 

다만, UI 툴킷의 좋은 점은 Bind 기능이 있다.

그러니까, UI가 클래스의 특정 프로퍼티를 자동으로 연결하게 만들 수 있음.

그러함. 이 장점 하나만 보고 UI 툴킷 써야겠다! 할 것 같진 않넹ㅎㅎㅎㅎ

 

일단 UI 툴킷 이해는 이 정도면 시작할 수 있다.  끗.

---

그래서 Behavior Tree는 언제 짜냐...