Unity 사용자 매뉴얼: 커스텀 인스펙터와 데이터 바인딩

이 문서는 Unity에서 커스텀 인스펙터를 생성하고 데이터 바인딩을 사용하는 방법에 대해 설명합니다. 이 예제는 게임 오브젝트의 이름과 스케일을 변경할 수 있는 UI를 만듭니다.

개요

이 예제에서는 다음을 수행합니다:

• 게임 오브젝트의 이름과 스케일을 바인딩하는 커스텀 인스펙터 UI 생성
• UXML 및 C#을 사용하여 바인딩 설정
• GitHub 저장소에서 완성된 파일 확인

선행 조건

Unity 에디터, UI 툴킷, C# 스크립팅에 대한 기본적인 이해가 필요합니다.

1단계: C# 스크립트 생성

1. 프로젝트 창에서 create-a-binding-inspector라는 폴더를 만듭니다.
2. TankScript.cs라는 이름의 C# 스크립트를 생성하고 다음 내용을 추가합니다.

using UnityEngine;

[ExecuteInEditMode]
public class TankScript : MonoBehaviour
{
    public string tankName = "Tank";
    public float tankSize = 1;

    private void Update()
    {
        gameObject.name = tankName;
        gameObject.transform.localScale = new Vector3(tankSize, tankSize, tankSize);
    }
}

2단계: UI 스타일과 UXML 설정

1. Editor라는 이름의 폴더를 create-a-binding-inspector 폴더 내에 만듭니다.
2. tank_inspector_styles.uss라는 이름의 USS 파일을 생성하고 다음 내용을 추가합니다.

.container {
    background-color: rgb(80, 80, 80);
    flex-direction: column;
}
Label {
    background-color: rgb(80, 80, 80);
}
TextField:hover {
    background-color: rgb(255, 255, 0);
}
FloatField {
    background-color: rgb(0, 0, 255);
}

1. tank_inspector_uxml.uxml라는 이름의 UXML 파일을 생성하고 다음 내용을 추가합니다.

<UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
    <Style src="tank_inspector_styles.uss" />
    <VisualElement name="row" class="container">
        <Label text="Tank Script - Custom Inspector" />
        <ue:PropertyField binding-path="tankName" name="tank-name-field" />
        <ue:PropertyField binding-path="tankSize" name="tank-size-field" />
    </VisualElement>
</UXML>

3단계: 커스텀 인스펙터 등록

1. TankEditor.cs라는 이름의 C# 스크립트를 생성하고 다음 내용을 추가합니다.

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

[CustomEditor(typeof(TankScript))]
public class TankEditor : Editor
{
    [SerializeField]
    VisualTreeAsset visualTree;

    public override VisualElement CreateInspectorGUI()
    {
        var uxmlVE = visualTree.CloneTree();
        return uxmlVE;
    }
}

1. Unity 에디터에서 TankEditor.cs를 선택하고 인스펙터에서 tank_inspector_uxml.uxml을 Visual Tree로 드래그합니다.
2. tank_inspector_styles.uss를 인스펙터의 Style Sheet로 드래그합니다.

4단계: 바인딩 테스트

1. Unity에서 빈 게임 오브젝트를 생성하고 TankScript를 추가합니다.
2. 인스펙터에서 Tank Name과 Tank Size를 수정해 보십시오.

5단계: 추가 인스펙터 창 만들기

1. SimpleBindingExampleInspectorElement.cs라는 이름의 C# 파일을 생성하고 다음 내용을 추가합니다.

using UnityEditor;
using UnityEngine;
using UnityEditor.UIElements;

namespace UIToolkitExamples
{
    public class SimpleBindingExampleInspectorElement : EditorWindow
    {
        [MenuItem("Window/UIToolkitExamples/Simple Binding Example Inspector Element")]
        public static void ShowDefaultWindow()
        {
            var wnd = GetWindow<SimpleBindingExampleInspectorElement>();
            wnd.titleContent = new GUIContent("Simple Binding with Inspector Element");
        }

        TankScript m_Tank;

        public void OnEnable()
        {
            m_Tank = FindObjectOfType<TankScript>();
            if (m_Tank == null)
                return;

            var inspector = new InspectorElement(m_Tank);
            rootVisualElement.Add(inspector);
        }
    }
}

1. Unity 에디터에서 Window > UIToolkitExamples > Simple Binding Example Inspector Element를 선택합니다.

필드의 값을 변경하면 서로 연결된 값을 공유하여 실시간으로 업데이트되는 것을 확인할 수 있습니다.

결론

이 가이드를 통해 Unity에서 커스텀 인스펙터와 데이터 바인딩을 설정하는 방법을 배웠습니다. 각 단계에 따라 실행하면 간단한 UI를 통해 게임 오브젝트의 값을 조정할 수 있게 됩니다. 추가 리소스 및 공식 문서는 Unity 사용자 매뉴얼을 참조하세요.

저작권 © 2022 Unity Technologies.