Unity 사용자 매뉴얼: UI 툴킷을 사용한 리스트 바인딩

이 문서에서는 Unity의 UI 툴킷을 사용하여 리스트를 바인딩하는 방법에 대해 설명합니다. 전반적인 내용은 Unity 2021.3 이상 버전을 기준으로 하며, 특히 ListView를 사용하지 않고도 리스트에 직접 바인딩하는 방법을 다룹니다.

개요와 선행 조건

이 가이드는 Unity 에디터, UI 툴킷 및 C# 스크립팅에 익숙한 개발자를 위한 것입니다. 시작하기 전에 아래의 절차를 숙지하십시오:

1. 시각적 트리: Unity의 UI 구성 요소를 트리 구조로 이해합니다.
2. UXML: Unity에서 UI 레이아웃을 정의하는 XML 포맷입니다.
3. BindProperty(): 프로퍼티에 바인딩하여 UI 요소와 스크립트 간의 데이터 통신을 설정합니다.
4. TrackPropertyValue(): 프로퍼티의 변화를 추적하여 UI를 갱신합니다.

샘플 코드 구조

이 예제에서는 TexturePackAsset이라는 이름의 스크립터블 오브젝트를 생성하고, 이를 기반으로 UI 요소를 설정하여 리스트의 2D 텍스처를 바인딩합니다.

1. TexturePackAsset.cs

아래의 C# 스크립트는 2D 텍스처 리스트를 관리합니다.

using System.Collections.Generic;
using UnityEngine;

namespace UIToolkitExamples
{
    [CreateAssetMenu(menuName = "UIToolkitExamples/TexturePackAsset")]
    public class TexturePackAsset : ScriptableObject
    {
        public List<Texture2D> textures;

        public void Reset()
        {
            textures = new() { null, null, null, null };
        }
    }
}

2. TexturePreviewElement.cs

이 스크립트는 UI의 각 요소를 나타냅니다. 사용자가 텍스처를 선택할 수 있는 ObjectField와 미리보기를 표시할 Image를 포함합니다.

using System;
using UnityEditor.UIElements;
using UnityEngine;
using UnityEngine.UIElements;
using Object = UnityEngine.Object;

namespace UIToolkitExamples
{
    public class TexturePreviewElement : BindableElement, INotifyValueChanged<Object>
    {
        public new class UxmlTraits : BindableElement.UxmlTraits { }
        public new class UxmlFactory : UxmlFactory<TexturePreviewElement, UxmlTraits> { }

        public static readonly string ussClassName = "texture-preview-element";

        Image m_Preview;
        ObjectField m_ObjectField;
        Texture2D m_Value;

        public TexturePreviewElement()
        {
            AddToClassList(ussClassName);

            m_Preview = new Image();
            Add(m_Preview);

            m_ObjectField = new ObjectField();
            m_ObjectField.objectType = typeof(Texture2D);
            m_ObjectField.RegisterValueChangedCallback(OnObjectFieldValueChanged);
            Add(m_ObjectField);

            styleSheets.Add(Resources.Load<StyleSheet>("texture_preview_element"));
        }

        void OnObjectFieldValueChanged(ChangeEvent<Object> evt)
        {
            value = evt.newValue;
        }

        public Object value
        {
            get => m_Value;
            set
            {
                // 구현 생략
            }
        }
    }
}

3. TexturePackEditor.cs

이 스크립트는 Unity 에디터에서 TexturePackAsset을 검사하는 역할을 하며, 리스트가 변할 때마다 UI를 갱신합니다.

using UnityEditor;
using UnityEditor.UIElements;
using UnityEngine;
using UnityEngine.UIElements;

namespace UIToolkitExamples
{
    [CustomEditor(typeof(TexturePackAsset))]
    public class TexturePackEditor : Editor
    {
        public override VisualElement CreateInspectorGUI()
        {
            var editor = m_VisualTreeAsset.CloneTree();
            var container = editor.Q(className: "preview-container");
            SetupList(container);
            // 구현 생략
        }

        void SetupList(VisualElement container)
        {
            // 구현 생략
        }
    }
}

UI 구성 (UXML)

UI의 레이아웃은 UXML을 통해 정의됩니다. texture_pack_editor.uxml이라는 파일을 생성하여 아래와 같이 구성합니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xmlns="UnityEngine.UIElements" example="UIToolkitExamples" editor-extension-mode="True">
    <ui:ScrollView>
        <ui:VisualElement class="preview-container" style="flex-wrap: wrap; flex-direction: row; justify-content: space-around;" />
    </ui:ScrollView>
    <ui:Button name="add-button" text="Add" />
</ui:UXML>

결론 및 추가 리소스

이 예제는 Unity 에디터 내에서 리스트를 효율적으로 관리할 수 있도록 돕습니다. UI 툴킷을 활용해 다양한 텍스처를 리스팅하고 선택할 수 있는 커스텀 에디터를 구축할 수 있습니다.

추가적으로 다음 리소스를 활용하여 더 깊이 있는 학습을 할 수 있습니다: - SerializeObject 데이터 바인딩: 데이터 바인딩의 원리 - Binding Elements: 바인딩 가능한 UI 요소들 - Implementation Details: 구현 세부 사항 및 예제

이 문서는 Unity Technologies의 저작권 하에 있으며, 2022.3 버전에 기초하여 작성되었습니다.