Unity UI 툴킷을 사용한 데이터 바인딩 예제

이 문서에서는 Unity의 UI 툴킷을 사용하여 데이터 바인딩을 구현하는 방법에 대해 설명하고, 다양한 활용 예제를 포함합니다.

개요

본 예제에서는 GameSwitch라는 구조체의 세 개의 프로퍼티를 UI에 바인딩하는 방법을 다룹니다. 이러한 프로퍼티는 Unity 에디터에서 사용자가 확인할 수 있고 수정할 수 있는 항목으로 구성됩니다.

준비 사항

• Unity 에디터에 대한 이해
• UI 툴킷에 대한 기본적인 이해
• C# 스크립팅에 대한 기본적인 지식

GameSwitch 구조체 생성

먼저, GameSwitch 구조체를 정의하는 스크립트와 이를 저장할 커스텀 에셋을 생성합니다.

1. bind-uxml-template라는 이름의 폴더를 생성합니다.
2. GameSwitch.cs라는 이름의 C# 스크립트를 만들고 다음 내용을 추가합니다:

using System;

[Serializable]
public struct GameSwitch
{
    public string name;
    public bool enabled;
}

1. GameSwitchesAsset.cs라는 C# 스크립트를 만들고 다음 내용을 추가합니다:

using UnityEngine;

[CreateAssetMenu(menuName = "UIToolkitExamples/GameSwitches")]
public class GameSwitchesAsset : ScriptableObject
{
    public GameSwitch useLocalServer;
    public GameSwitch showDebugMenu;
    public GameSwitch showFPSCounter;

    // 기본값 제공을 위한 Reset 함수
    public void Reset()
    {
        useLocalServer = new GameSwitch() { name = "Use Local Server", enabled = false };
        showDebugMenu = new GameSwitch() { name = "Show Debug Menu", enabled = false };
        showFPSCounter = new GameSwitch() { name = "Show FPS Counter", enabled = true };
    }
}

UXML 템플릿 및 파일 생성

UI에 사용할 UXML 템플릿과 이를 바인딩하는 UXML 파일을 생성합니다.

1. Game_switch.uxml이라는 이름의 UI 문서를 생성하고 다음 내용을 추가합니다:

<UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
    <Box style="flex-direction: row;">
        <Toggle binding-path="enabled" />
        <TextField binding-path="name" readonly="true" style="flex-grow:1;"/>
    </Box>
</UXML>

1. bind-uxml-template 폴더 내에 Editor라는 폴더를 만들고, 그 안에 game_switches_editor.uxml을 다음 내용으로 생성합니다:

<UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
    <Template name="switch" src="../game_switch.uxml"/>
    <Instance template="switch" binding-path="useLocalServer" />
    <Instance template="switch" binding-path="showDebugMenu" />
    <Instance template="switch" binding-path="showFPSCounter" />
</UXML>

커스텀 에디터 등록

GameSwitchesAsset을 사용할 수 있는 커스텀 에디터를 등록합니다.

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

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

namespace UIToolkitExamples
{
    [CustomEditor(typeof(GameSwitchesAsset))]
    public class GameSwitchesEditor : Editor
    {
        [SerializeField]
        VisualTreeAsset visualTreeAsset;

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

바인딩 테스트

1. Unity 에디터에서 Assets -> Create -> UIToolkitExamples -> GameSwitches를 선택하여 새로운 에셋을 생성합니다.
2. 새로 생성한 에셋을 선택하면 인스펙터에 GameSwitchesAsset의 프로퍼티가 바인딩된 토글과 텍스트 필드가 표시됩니다.

추가 활용 예제

• UI 요소에 다양한 데이터 타입을 바인딩하여 유연한 UI 설계 가능
• 커스텀 에디터를 통해 유저의 편의성을 향상시킬 수 있으며, 빠른 prototyping에 도움을 줄 수 있습니다.
• 에셋을 게임의 설정 또는 상태 데이터를 저장하는 방법으로 활용 가능

마무리

이 문서는 Unity UI 툴킷을 이용한 데이터 바인딩의 기본적인 개념과 실제 구현 방법을 다루었습니다. 추가적으로, 더 다양한 예제를 통해 실력을 쌓아 나가는 것이 중요합니다.

Copyright © 2022 Unity Technologies. Publication 2022.3