[Unity][UI Toolkit] 커스텀 인스펙터 만들어봄

UI Builder

어쩌다보니 퇴사를 하고 Unity로 개발을 하고 있다.
만들고 있는 것은 별 건 없고 어떤 게임의 템플릿과 같은 것을 만들려고 한다.
비전공자에 개발을 배운 적이 없으니... ChatGPT를 열심히 두들기려 했다.
안한 이유는 명확한데 레퍼런스가 없어서인지 제대로 나오지도 않는다.

그러던 와중에

 

Unity 6가 출시되었습니다. Unity 6 다운로드 | Unity

유니티6가 잘 나왔다고 하기도 하고...
UI Toolkit을 밀려는 것 같다. 그래서 UI Toolkit으로 커스텀 인스펙터를 만들고자 했다.

 

그래픽 사용자 인터페이스 개발 | Unity UI 툴킷

---

UI Toolkit 자체는 나온지가 좀 됐다.
UI Toolkit은 게임 내 UI 뿐만 아니라 인스펙터나 에디터윈도우도 커스터마이징이 가능하기 때문에 좋다고 한다.
근데 사실 혼자 만든다 치면 위 두가지는 그렇게 커스터마이징을 할 필요는 없을 것 같았고
그래서 이번에 처음 사용해봤다.

개발은 아래 유튜브를 참고하여 진행했다.

제대로 알지 못해서인지 처음에는 UI Toolkit으로 모든 것이 다 되는 줄 알았다...
근데 스크립트도 써야하더라.

---

처음부터 엄청난 것을 만들기에는 혼자 개발하다보니 시간이 촉박하다.
우선 특정 경로 지정과 파일 삽입, bool값에 따른 필드 출력을 해보려고 한다.

UI Builder

유니티6에는 UI Toolkit이 기본 패키지로 깔려있다.
메뉴에서 UI Builder를 실행하면 위와 같은 창이 기본으로 나온다.
에디터 환경에서는 여러 탭들을 움직여가며 본인만의 레이아웃을 만들 수 있는데
여기서는 안된다. 그냥 넓이 높이만 조절 가능하다.

Hierachy창에 .uxml이라는 녀석을 누르면 inspector에서 위와 같은 녀석이 보인다.

체크를 하면 위와 같이 라이브러리에서 Editor Only 항목들이 출력된다.
Editor Only 항목 중에는 Inspectors항목 2가지를 사용했다.

드래그를 해서 추가할수도있고 그런데 일단 Visual Element로 영역 구분을 지어주는 것이 좋을 것 같다.

Section

영역은 일단 저렇게 구분 지어줬다.

이건 최종적으로 만든 인스펙터의 모습이다. (영어 못하니 번역 틀려도 이해 좀)
대부분 Inspectors의 Property Field를 사용했다. Object Field의 경우 FontAsset에 사용했다.

위와 같이 체크 시 나올 때만 사용하기 위함이다.

Property Field를 쓰니 Label이 공란일 경우 변수명이 출력되었다.
그거 해결 방법 모르겠어서 그냥 Object Field로 했다.

Object Field의 Attributes에는 Type이라는 항목이 있다. 여기서 타입을 설정해주면 되는데...

FontAsset과 TMP_FontAsset은 다른거다. 그러니 유의하면 된다.

이놈은 Property Field와 라벨만 넣은 곳이다.
즉 Property Field는 UI Builder에서는 보이지 않는다.

어찌 되었던 나는 개발자가 아니라 만드는 튜토리얼은 위 참고 영상 보는게 더 낫다.

---

좀 불편한 경우가 많이 있긴 했는데

데이터를 바인딩 하는 값을 일단 직접 때려넣어야 한다.
이때부터 cs 파일과 UI Builder를 왔다갔다 해야한다.

딱 봐도 문자를 그냥 때려넣고 있는 모습이 보인다.
이거 오타 나면 그냥 개작살이다.

즉 여기도 맞춰야 한다는 것.

이 옵션을 켜놔서인지 매우 많은 로딩이 있었다.
코드를 저장할 때마다 계속 로딩 되었는데...
객체를 안만들어놨어서 계속 터졌다.

---

추 후 UI Builder로 또 작업 할 것 같긴 한데
일단 객체들 (UI의 목업)을 다 짜놓고 연결에 들어가야 할 것 같다.

그래도 불편한게 사실
코드 상 Property 가 할당이 되어 있어야 바인딩을 할 것인데...
결국 코드 → UI Builder → 코드 순서로 돌아갈 것 같다.