Unity 커스텀 에디터 창 만들기 가이드

이 문서에서는 Unity 에디터 내에서 스프라이트를 관리하기 위한 커스텀 에디터 창을 만드는 방법을 설명합니다. 이 가이드를 통해 에디터 UI를 사용자 정의하고, 스프라이트를 목록으로 표시하며 사용자가 선택한 스프라이트를 이미지로 표시하는 기능을 구현할 수 있습니다.

전제 조건

• Unity와 C# 스크립팅에 대한 기본적인 이해가 필요합니다.
• UI Toolkit에 대한 이해도 도움이 됩니다.

주요 개념

• 시각적 트리: UI 요소의 계층 구조.
• 컨트롤: UI 요소를 구성하는 다양한 컴포넌트입니다. (예: ListView, Label, Image 등)

단계별 가이드

1. 에디터 창 스크립트 만들기

에디터 창을 만들기 위해 C# 스크립트를 생성합니다. Assets/Editor 폴더에 MyCustomEditor.cs 파일을 생성합니다.

using System.Collections.Generic;
using System.Linq;
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class MyCustomEditor : EditorWindow
{
}

2. 메뉴 항목 추가하기

사용자가 에디터 메뉴를 통해 창을 열 수 있도록 메뉴 항목을 추가합니다.

[MenuItem("Tools/My Custom Editor")]
public static void ShowMyEditor()
{
    EditorWindow wnd = GetWindow<MyCustomEditor>();
    wnd.titleContent = new GUIContent("My Custom Editor");
}

3. UI 컨트롤 추가하기

UI Toolkit의 CreateGUI 메서드를 사용하여 에디터 UI에 컨트롤을 추가합니다. 시작으로 'Hello' 레이블을 추가해 봅시다.

public void CreateGUI()
{
    rootVisualElement.Add(new Label("Hello"));
}

4. 스프라이트 목록 만들기

프로젝트 내 모든 스프라이트의 리스트를 만들고 이를 표시합니다.

public void CreateGUI()
{
    var allObjectGuids = AssetDatabase.FindAssets("t:Sprite");
    var allObjects = new List<Sprite>();

    foreach (var guid in allObjectGuids)
    {
        allObjects.Add(AssetDatabase.LoadAssetAtPath<Sprite>(AssetDatabase.GUIDToAssetPath(guid)));
    }
}

5. ListView 구성하기

ListView를 사용하여 스프라이트의 이름을 표시합니다.

var leftPane = new ListView();
leftPane.makeItem = () => new Label();
leftPane.bindItem = (item, index) => { (item as Label).text = allObjects[index].name; };
leftPane.itemsSource = allObjects;

6. 스프라이트 선택 시 이미지 표시하기

사용자가 스프라이트를 선택할 때 해당 이미지를 오른쪽 패널에 표시하는 기능을 추가합니다.

private void OnSpriteSelectionChange(IEnumerable<object> selectedItems)
{
    m_RightPane.Clear();

    var selectedSprite = selectedItems.First() as Sprite;
    if (selectedSprite == null) return;

    var spriteImage = new Image();
    spriteImage.scaleMode = ScaleMode.ScaleToFit;
    spriteImage.sprite = selectedSprite;

    m_RightPane.Add(spriteImage);
}

7. 핫 리로드 지원하기

Unity 에디터의 핫 리로드와 함께 작동하도록 설정합니다. 이를 통해 에디터 창의 상태를 유지할 수 있습니다.

[SerializeField] private int m_SelectedIndex = -1;

leftPane.onSelectionChange += (items) => { m_SelectedIndex = leftPane.selectedIndex; };
leftPane.selectedIndex = m_SelectedIndex;

8. 최종 코드 구현하기

모든 단계를 통합한 최종 코드는 다음과 같습니다.

using System.Collections.Generic;
using System.Linq;
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class MyCustomEditor : EditorWindow
{
    [SerializeField] private int m_SelectedIndex = -1;
    private VisualElement m_RightPane;

    [MenuItem("Tools/My Custom Editor")]
    public static void ShowMyEditor()
    {
        EditorWindow wnd = GetWindow<MyCustomEditor>();
        wnd.titleContent = new GUIContent("My Custom Editor");
    }

    public void CreateGUI()
    {
        var allObjectGuids = AssetDatabase.FindAssets("t:Sprite");
        var allObjects = new List<Sprite>();

        foreach (var guid in allObjectGuids)
        {
            allObjects.Add(AssetDatabase.LoadAssetAtPath<Sprite>(AssetDatabase.GUIDToAssetPath(guid)));
        }

        var splitView = new TwoPaneSplitView(0, 250, TwoPaneSplitViewOrientation.Horizontal);
        rootVisualElement.Add(splitView);

        var leftPane = new ListView();
        splitView.Add(leftPane);
        m_RightPane = new ScrollView(ScrollViewMode.VerticalAndHorizontal);
        splitView.Add(m_RightPane);

        leftPane.makeItem = () => new Label();
        leftPane.bindItem = (item, index) => { (item as Label).text = allObjects[index].name; };
        leftPane.itemsSource = allObjects;

        leftPane.onSelectionChange += OnSpriteSelectionChange;
        leftPane.selectedIndex = m_SelectedIndex;
        leftPane.onSelectionChange += (items) => { m_SelectedIndex = leftPane.selectedIndex; };
    }

    private void OnSpriteSelectionChange(IEnumerable<object> selectedItems)
    {
        m_RightPane.Clear();
        var selectedSprite = selectedItems.First() as Sprite;
        if (selectedSprite == null) return;

        var spriteImage = new Image { scaleMode = ScaleMode.ScaleToFit, sprite = selectedSprite };
        m_RightPane.Add(spriteImage);
    }
}

활용 예제

• 비교: 여러 스프라이트를 비교할 수 있는 기능 추가하기.
• 편집: 스프라이트의 속성을 편집할 수 있는 폼 제작하기.
• 검색: 스프라이트를 키워드로 검색할 수 있는 검색 기능 구현하기.

이 가이드를 통해 Unity 에디터의 커스텀 UI를 만들고 활용하는 방법을 배웠습니다. 다양한 기능을 추가하여 더욱 발전된 에디터 설계를 시도해보세요!