Unity 사용자 매뉴얼: 커스텀 컨트롤 바인딩 예제

이 문서는 Unity의 UI 툴킷을 사용하여 커스텀 컨트롤을 생성하고, 이를 새로운 데이터 타입에 바인딩하는 방법을 설명합니다. 또한, 예제를 통해 실습과 응용을 도와드립니다.

개요

이 예제에서는 2D 이미지를 표시하는 커스텀 컨트롤을 만들고, 커스텀 에디터 창에서 새로운 에셋 타입의 필드에 바인딩합니다. 완성된 파일은 GitHub 저장소에서 확인할 수 있습니다.

선행 조건

• Unity 에디터, UI 툴킷, C# 스크립팅에 대한 기본 지식이 필요합니다.
• 다음 항목을 이해하고 있어야 합니다.
• 시각적 트리
• UXML
• USS
• BindableElement
• INotifyValueChanged
• 직렬화된 오브젝트 생성

시작하기

1. 직렬화된 오브젝트 생성
2. Texture2D가 포함된 직렬화된 오브젝트를 생성합니다.
3. Unity 프로젝트를 생성하고 "bind-custom-control"이라는 이름의 폴더를 만듭니다.
4. C# 스크립트 생성
5. "TextureAsset.cs"라는 이름의 C# 스크립트를 만들고 다음 내용을 추가합니다.

```csharp using UnityEngine;

namespace UIToolkitExamples { [CreateAssetMenu(menuName = "UIToolkitExamples/TextureAsset")] public class TextureAsset : ScriptableObject { public Texture2D texture;

       public void Reset()
       {
           texture = null;
       }
   }

} ```

커스텀 컨트롤 생성 및 스타일 지정

1. Editor 폴더 생성
2. 에셋 폴더 안에 "Editor"라는 이름의 폴더를 만듭니다.
3. 커스텀 컨트롤 작성
4. "TexturePreviewElement.cs"라는 C# 스크립트를 생성하고 다음과 같이 수정합니다.

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

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

       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 void SetValueWithoutNotify(Object newValue)
       {

|| |---| { m_Value = newValue as Texture2D; m_Preview.image = m_Value; m_ObjectField.SetValueWithoutNotify(m_Value); } else throw new ArgumentException($"Expected object of type {typeof(Texture2D)}"); }

       public Object value
       {
           get => m_Value;
           set
           {
               if (value == this.value)
                   return;

               var previous = this.value;
               SetValueWithoutNotify(value);

               using (var evt = ChangeEvent<Object>.GetPooled(previous, value))
               {
                   evt.target = this;
                   SendEvent(evt);
               }
           }
       }
   }

} ```

1. 스타일시트 작성
2. "Resources"라는 이름의 폴더를 만들고 "texture_preview_element.uss"라는 스타일시트를 생성하여 다음 내용을 추가합니다.

``` .texture-preview-element { width:200px; height:200px; }

.texture-preview-element > .unity-image { flex-grow:1; } ```

인스펙터 UI 만들기

1. 인스펙터 UI 생성
2. Editor 폴더에서 "TextureAssetEditor.cs"라는 이름의 C# 스크립트를 생성하고 아래와 같이 수정합니다.

```csharp using UnityEditor; using UnityEngine.UIElements; using UnityEngine;

namespace UIToolkitExamples { [CustomEditor(typeof(TextureAsset))] public class TextureAssetEditor : Editor { [SerializeField] VisualTreeAsset m_VisualTree;

       public override VisualElement CreateInspectorGUI()
       {
           return m_VisualTree.CloneTree();
       }
   }

} ```

1. UXML 파일 생성
2. TexturePreviewElement를 사용하여 "texture_asset_editor.uxml"이라는 이름의 UI 문서를 생성하고 아래와 같이 수정합니다.

xml <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:example="UIToolkitExamples" editor-extension-mode="True"> <example:TexturePreviewElement binding-path="texture" /> </ui:UXML>

바인딩 테스트

1. TextureAsset 생성
2. 메뉴에서 Assets > Create > UIToolkitExamples > TextureAsset를 선택하여 TextureAsset 인스턴스를 생성합니다.
3. 인스펙터에서 확인
4. 새로 생성된 TextureAsset 오브젝트를 선택하였을 때 인스펙터에서 텍스처 프리뷰 요소를 확인할 수 있습니다. 필드에 텍스처 에셋 레퍼런스를 넣으면 해당 필드 위에서 프리뷰를 확인할 수 있습니다.

추가 리소스

• SerializedObject 데이터 바인딩
• 바인딩 가능한 요소
• 바인딩 데이터 타입 전환

이 문서는 Unity UI 툴킷을 사용하여 커스텀 컨트롤을 구현하는 데 도움이 되는 가이드입니다. 각 단계별로 따라가면 자신의 프로젝트에서 커스텀 UI 요소를 바인딩하고 사용할 수 있습니다.