UI Builder를 활용한 Inspector 제작 / UI Builderを使用したInspector制作#

Editor 스크립팅보다 UI Builder가 더 좋은 선택지가 될 수 있음
EditorスクリプトよりUI Builderの方が良い選択肢となる可能性あり

문제점 / 問題点#

스타일시트 관리의 어려움
スタイルシート管理の難しさ
패턴화 되어있거나 재사용해야 하는 형식이 나오면 고민 필요 (디자인 시스템)
パターン化されていたり、再利用しなければならない形式が出てきたら、悩みの必要（デザインシステム）

해결법 / 解決法#

UI Toolkit 핵심은 웹개발 접근법
UI Toolkitの核心はウェブ開発アプローチ
uxml을 컴포넌트 단위로 쪼개서 재사용
uxmlをコンポーネント単位に分けて再使用

DefaultUss 예시 / DefaultUss例#

1
.unity-foldout__checkmark {
2
    background-image: url("project://database/Assets/Scripts/Editor/Icons/Lock.png?fileID=2800000&guid=0589837adb4686a4183efa8cc07bde31&type=3#Lock");
3
}
4

5
Foldout > Toggle:checked .unity-foldout__checkmark {
6
    background-image: url("project://database/Assets/Scripts/Editor/Icons/LockOpen.png?fileID=2800000&guid=7d185f72de3ccbe4f8fb6f9d9d1ff77e&type=3#LockOpen");
7
}
8

9
Toggle > VisualElement {
10
    justify-content: flex-end;
11
}
12

13
.default-foldout {
14
    background-color: rgb(4, 184, 238);
15
    align-items: center;
16
    -unity-font-definition: resource('Font/Editor/GalmuriMono9');
17
    font-size: 14px;
18
    color: rgb(255, 255, 255);
19
    -unity-font-style: bold;
20
    text-shadow: 35px 35px 0 rgba(0, 0, 0, 0.47);
21
    display: flex;
22
    justify-content: space-between;
23
}
24

25
Label {
26
    color: rgb(230, 230, 230);
27
    margin-right: 40px;
28
}

TurnManager_Inspector 예시 / TurnManager_Inspector例#

1
using UnityEditor;
2
using UnityEngine;
3
using UnityEngine.UIElements;
4

5
[CustomEditor(typeof(TurnManager))]
6
public class TurnManager_Inspector : Editor
7
{
8
    public VisualTreeAsset m_InspectorXML;
9

10
    public override VisualElement CreateInspectorGUI()
11
    {
12
        // Create a new VisualElement to be the root of our inspector UI
13
        VisualElement myInspector = new VisualElement();
14

15
        // Load from default reference
16
        m_InspectorXML.CloneTree(myInspector);
17

18
        // Find the Foldout and Visual Elements
19
        var foldout = myInspector.Q<Foldout>("myFoldout");
20
        var visualElements = myInspector.Q<VisualElement>("myVisualElements");
21

22
        // Set initial state to false
23
        visualElements.style.display = DisplayStyle.None;
24

25
        // Register callback for Foldout state change
26
        foldout.RegisterValueChangedCallback(evt =>
27
        {
28
            visualElements.style.display = evt.newValue ? DisplayStyle.Flex : DisplayStyle.None;
29
        });
30

31
        // 버튼 가져오기 / ボタン取得
32
        Button myButton = myInspector.Q<Button>("StartButton");
33
        myButton.clicked += OnMyButtonClicked;
34

35
        // Return the finished inspector UI
36
        return myInspector;
37
    }
38

39
    public override bool UseDefaultMargins() => false;
40

41
    private void OnMyButtonClicked() {
42
        TurnManager myComponent = (TurnManager)target;
43
        myComponent.StartGame();
44
    }
45
}

핵심 포인트 / 重要ポイント

UI Builder를 사용하면 Inspector UI 제작이 편리하고 직관적
UI Builderを使用するとInspector UI制作が便利で直感的
UXML/USS를 재사용할 수 있으므로 디자인 시스템 구축 가능
UXML/USSを再利用できるのでデザインシステム構築が可能