Unity 공식 가이드: 커스텀 컨트롤 만들기 (UI 툴킷)

개요

이 문서에서는 Unity에서 바인딩 가능한 커스텀 컨트롤을 만드는 방법에 대해 설명합니다. 이 예제는 이중 데이터 타입을 사용하여 프로퍼티에 바인딩된 커스텀 컨트롤을 만드는 방법을 보여줍니다. 이 예제를 통해 문자열이나 정수와 같은 다른 데이터 타입에도 쉽게 적용할 수 있습니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자를 위한 것입니다. 시작하기 전에 다음을 숙지해야 합니다:

• UI 빌더
• 시각적 트리
• UXML
• SerializedObject 데이터 바인딩

커스텀 컨트롤 클래스 만들기

1. Unity 프로젝트를 생성합니다. 원하는 템플릿을 사용할 수 있습니다.
2. ExampleField라는 폴더를 만들어 파일을 저장합니다.

C# 스크립트 생성

ExampleField 폴더에서 ExampleField.cs라는 이름의 C# 스크립트를 생성하고 아래와 같이 변경합니다.

using UnityEngine.UIElements;

namespace UIToolkitExamples
{
    public class ExampleField : BaseField<double>
    {
        public new class UxmlFactory :
            UxmlFactory<ExampleField, BaseFieldTraits<double, UxmlDoubleAttributeDescription>> { }

        Label m_Input;

        public ExampleField() : this(null) { }

        public ExampleField(string label) : base(label, new Label() { })
        {
            m_Input = this.Q<Label>(className: inputUssClassName);
        }

        public override void SetValueWithoutNotify(double newValue)
        {
            base.SetValueWithoutNotify(newValue);
            m_Input.text = value.ToString("N");
        }
    }
}

UXML 파일에서 커스텀 컨트롤 사용

ExampleField 폴더에 ExampleField.uxml이라는 이름의 UI 문서를 생성합니다. 텍스트 에디터에서 ExampleField.uxml을 열고 다음과 같이 변경합니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:example="UIToolkitExamples">
    <example:ExampleField label="Binding Target" binding-path="m_Value" />
</ui:UXML>

Unity에서 ExampleField.uxml 파일을 더블 클릭하여 UI 빌더에서 엽니다. 예제 필드가 Hierarchy 창에 표시되고, 뷰포트에 시각화됩니다. Hierarchy 창에서 예제 필드를 선택하면 Inspector 창에 Binding Path 및 Label 상자에 할당된 값이 표시됩니다.

바인딩 타겟에 대한 클래스 및 커스텀 에디터 만들기

1. ExampleField 폴더에서 ExampleFieldComponent.cs라는 이름의 C# 스크립트를 생성합니다.

using UnityEngine;

namespace UIToolkitExamples
{
    public class ExampleFieldComponent : MonoBehaviour
    {
        [SerializeField]
        double m_Value;
    }
}

1. ExampleField 폴더에서 Editor라는 이름의 폴더를 만들고, Editor 폴더에서 ExampleFieldCustomEditor.cs라는 이름의 C# 스크립트를 생성합니다.

using UnityEditor;
using UnityEngine.UIElements;
using UnityEngine;

namespace UIToolkitExamples
{
    [CustomEditor(typeof(ExampleFieldComponent))]
    public class ExampleFieldCustomEditor : Editor
    {
        [SerializeField]
        VisualTreeAsset m_Uxml;

        public override VisualElement CreateInspectorGUI()
        {
            var parent = new VisualElement();
            m_Uxml?.CloneTree(parent);
            return parent;
        }
    }
}

예제 테스트

1. Unity의 프로젝트 창에서 ExampleFieldCustomEditor.cs를 선택합니다.
2. ExampleField.uxml을 인스펙터 창의 Uxml 상자로 드래그합니다.
3. 빈 게임 오브젝트를 씬에 추가하고 ExampleFieldComponent 컴포넌트를 추가합니다.

이제 커스텀 컨트롤은 인스펙터에서 바인딩 타겟에 대한 기본값으로 ‘0’을 표시합니다. 기본 이중 프로퍼티의 값을 변경하면 UI에 해당 변경 사항이 반영됩니다.

추가 리소스

• 커스텀 컨트롤
• 슬라이드 토글 커스텀 컨트롤 만들기
• 커스텀 컨트롤에 대한 커스텀 스타일 생성

Copyright © 2022 Unity Technologies. Publication 2022.3

위 문서를 통해 Unity에서 UI 툴킷을 사용하여 커스텀 컨트롤을 만드는 방법을 이해하고 활용할 수 있습니다. 다양한 데이터 타입을 바인딩할 수 있으므로, 필요에 따라 코드를 수정하여 사용하시면 됩니다.