소개
이번 시간에 우리가 알아볼 내용은 커스텀 툴바 입니다.
유니티 2022.3LTS부터 유니티의 툴바는 Visual Element 기반으로 전환되었습니다.
그렇기에 기존 IMGUI로 UI를 올렸던 환경보다 더 자유롭게 커스텀 에디터를 구성할 수 있게되었습니다.
기존에 저는 smkplus-CustomToolbar를 사용하여 프로젝트를 진행했었습니다.
이 플러그인은 IMGUI기반으로 되어있어서 Unity6의 UI와 매치되지 않습니다.
그래서 저는 Unity6의 UI와 매치되도록 Visual Element기반으로 플러그인을 간단하게 만들어 보았습니다.
호환
- Unity 6
- Unity 2022.3 LTS
GUI
Toolbar에서 사용할 수 있는 GUI는 제한적입니다.
사용 가능한 Element는 다음과 같습니다.
- ToolbarButton
- Toggle
- EditorToolbarDropdown
- Slider (부분 가능)
사용 불가 Element는 다음과 같습니다.
- TextField가 포함되는 모든 Element. (입력박스가 흰색으로 처리되는 문제 있음)
- TextField에 입력을 하여 처리하는 의도가 담긴 Element. (UITK 및 IMGUI는 툴바에서 텍스트 입력이 불가하도록 설계되어있음)
버그 처럼 느껴지는 제약 사항
기본적으로 Unity6에서는 왼쪽/오른쪽 레이아웃에 ToolbarButton을 그릴 때 의도적으로 투명한 버튼이 아닌 버튼 스타일의 GUI를 생성할 수 없습니다.
이는 유니티가 USS를 강제로 변경해도 적용되지 않도록 막아놨습니다.
버튼 스타일 버튼을 구성하고 싶다면 중앙 Layout 계층으로부터 왼쪽/오른쪽으로 추가해야 버튼 스타일의 버튼을 생성할 수 있습니다.
TextField는 전부 렌더링이 안되며, Slider의 경우 showInputField을 false로 하여금 사용하시는 것을 권장드립니다.
주의사항
현재 2022.3LTS 및 Unity6-Preview(6000.0.19f)에서는 TextField 렌더링 오류가 있습니다.
그래서 TextField가 사용되는 FloatField, IntField, TextField, ToolbarSearchField 현재 사용할 수 없습니다.
설치
플러그인은 *.unitypackage로 배포하며 GitHub Release에서 다운로드 받을 수 있습니다.
다운로드 링크 :
https://github.com/NK-Studio/Custom-Toolbar/releases
사용해요
무엇을 좋아할지 몰라서 준비해봤어
이 플러그인은 기본적으로 4개의 묘듈을 기본 제공합니다.
해당 묘듈들은 CustomToolbar/Editor/Modules에서 확인할 수 있습니다.
지원하는 묘듈의 기능은 다음과 같습니다 :
- EnterPlayOption : EnterPlay모드를 On/Off할 수 있는 기능
- Localization : Local을 드롭다운으로 선택할 수 있는 기능
- SceneSwitcher : Scene을 드롭다운으로 선택할 수 있는 기능
- Unity6Catption : Unity6 Preview 캡션을 제거하는 기능
Toolbar Register에 등록하기
제작한 기능을 유니티 툴바에 등록하기 위해선 ToolbarRegister에 등록해야 합니다.
CustomToolbar/Editor/ToolbarRegister/ToolbarRegister.cs에서 코드 파일을 확인할 수 있습니다.
public static class ToolbarRegister
{
public static void OnDrawToolbarLeft(VisualElement element)
{
// 왼쪽 레이아웃에 추가됩니다.
}
public static void OnDrawToolbarRight(VisualElement element)
{
// 오른쪽 레이아웃에 추가됩니다.
}
public static void OnDrawToolbarCenterLeft(VisualElement element)
{
// 중앙 왼쪽 레이아웃에 추가됩니다.
}
public static void OnDrawToolbarCenterRight(VisualElement element)
{
// 중앙 오른쪽 레이아웃에 추가됩니다.
}
}예시로 EnterPlayOption을 추가해보겠습니다.
다음과 같이 작성하여 EnterPlayModeOption을 추가할 수 있습니다.
public static void OnDrawToolbarLeft(VisualElement element)
{
EnterPlayModeGUI.OnGUI(element);
}
기본 묘듈을 전부 추가할 경우
다음과 같이 작성하여 제공한 묘듈을 전부 사용한 예시 입니다.
public static void OnDrawToolbarLeft(VisualElement element)
{
#if UNITY_6000
// Unity Preview 캡션 지우기
Unity6CaptionGUI.OnGUI(element);
#endif
// Enter Play Mode Option
EnterPlayModeGUI.OnGUI(element);
#if USE_LOCALIZATION
// Localization
LocalizationGUI.OnGUI(element);
#endif
}
public static void OnDrawToolbarRight(VisualElement element)
{
}
public static void OnDrawToolbarCenterLeft(VisualElement element)
{
// 0번째 씬에 이동
SceneSwitchFirstSceneGUI.OnGUI(element);
}
public static void OnDrawToolbarCenterRight(VisualElement element)
{
// 씬 메뉴를 통해 이동
SceneSwitchListMoveGUI.OnGUI(element);
}서드파티 묘듈
FMOD Debug 묘듈
FMOD Debug 묘듈은 FMOD를 사용하는 프로젝트에서 사용할 수 있습니다.
이 묘듈은 FMOD 플러그인 배포 프로세스로 인하여 별도의 unitypackage로 제공됩니다.
CustomToolbar/ThirdParty에서 확인할 수 있습니다.
다음과 같이 작성하여 FMOD Debug 묘듈을 추가할 수 있습니다.
public static void OnDrawToolbarLeft(VisualElement element)
{
FMODDebugGUI.OnGUI(element);
}후원
이 내용이 맛있었다면 저에게 맛있는 커피를 후원해주세요! ☕
토스 익명 송금 : 후원하기
계좌 송금 : 토스뱅크 1000-0586-4766 (김한용)
참고
NK Style의 커스텀 툴바는 심플한 형태로 코드를 뜯어서 여러분들의 스타일로 변조 및 학습 목표가 포함되어있어서 다른 에셋보다 사용성이 다소 떨어질 순 있습니다.
실제 사용성은 다음 에셋이 더 좋을 수 있습니다.
https://github.com/Sammmte/unity-toolbar-extender-ui-toolkit?tab=readme-ov-file#via-git-url
Toolbar에서 TextField 렌더링에 대한 포럼에 오류 제보
https://discussions.unity.com/t/rendering-error-in-toolbar-textfield-on-unity6/1519048
