Unity UI Toolkit을 사용한 커스텀 에디터 창 생성

이 문서는 Unity의 UI Toolkit을 사용하여 커스텀 에디터 창을 만드는 방법을 설명합니다. 이 가이드를 통해 UI 툴킷을 사용하는 기본적인 방법부터 추가적인 UI 컨트롤을 다루는 방법까지 배울 수 있습니다.

시작하기

1. Unity 에디터에서 새로운 프로젝트를 생성합니다.
2. 프로젝트 뷰에서 Assets 폴더를 오른쪽 클릭한 후 Create > UI Toolkit > Editor Window를 선택합니다.

이후 아래와 같이 설정합니다.

좌측 메뉴의 Window > UI Toolkit > MyCustomEditor를 통해 에디터 창을 엽니다.

UI 컨트롤 추가하기

여러 방법을 사용하여 UI 컨트롤을 추가할 수 있습니다. 이 예제에서는 UI 빌더, UXML, C# 스크립트를 조합해서 사용할 것입니다.

1. UI 빌더를 사용하여 UI 컨트롤 추가하기

1. Assets/Editor 폴더에서 MyCustomEditor.uxml 파일을 더블 클릭하여 UI 빌더를 엽니다.
2. Library > Controls에서 Button과 Toggle을 Hierarchy 또는 Viewport로 드래그하여 추가합니다.
3. Hierarchy 창에서 Label을 선택한 후, 인스펙터의 Text 필드에서 기본 텍스트를 변경합니다.
4. Button과 Toggle 각각에 대해 주요 특성을 설정합니다.
5. 변경 후 저장하고 UI 빌더 창을 닫습니다.

변경이 완료되면 다시 Window > UI Toolkit > MyCustomEditor를 선택하여 추가한 UI 컨트롤을 확인합니다.

2. UXML을 사용하여 UI 컨트롤 추가하기

UXML을 사용하여 UI를 정의하고 추가할 수 있습니다. 다음 단계에 따라 진행합니다:

1. Assets > Create > UI Toolkit > UI Document를 통해 MyCustomEditor_UXML.uxml 생성.
2. 생성한 UXML 파일을 텍스트 에디터로 열고 내용 변경합니다.

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
    xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
>
    <engine:Label text="These controls were created with UXML." />
    <engine:Button text="This is button2" name="button2"/>
    <engine:Toggle label="Number?" name="toggle2"/>
</engine:UXML>

1. MyCustomEditor.cs 파일에서 UXML을 시각적으로 추가하는 코드를 작성합니다.

추가 후 다시 Window > UI Toolkit > MyCustomEditor를 선택하여 UI 컨트롤을 확인합니다.

3. C# 스크립트를 사용하여 UI 컨트롤 추가하기

C# 스크립트를 통해 UI 컨트롤을 직접 추가할 수도 있습니다. MyCustomEditor.cs 파일에서 다음 코드를 작성합니다.

public void CreateGUI()
{
    VisualElement root = rootVisualElement;

    Label label = new Label("These controls were created using C# code.");
    root.Add(label);

    Button button = new Button();
    button.name = "button3";
    button.text = "This is button3.";
    root.Add(button);

    Toggle toggle = new Toggle();
    toggle.name = "toggle3";
    toggle.label = "Number?";
    root.Add(toggle);

    var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/MyCustomEditor.uxml");
    VisualElement labelFromUXML = visualTree.Instantiate();
    root.Add(labelFromUXML);
}

버튼과 토글의 설정도 추가해주어야 합니다.

UI 컨트롤의 동작 정의하기

버튼 클릭 및 토글 선택/해제 시 이벤트 핸들러를 설정할 수 있습니다.

private void SetupButtonHandler()
{
    VisualElement root = rootVisualElement;
    var buttons = root.Query<Button>();
    buttons.ForEach(RegisterHandler);
}

private void RegisterHandler(Button button)
{
    button.RegisterCallback<ClickEvent>(PrintClickMessage);
}

private void PrintClickMessage(ClickEvent evt)
{
    VisualElement root = rootVisualElement;

    ++m_ClickCount;

    Button button = evt.currentTarget as Button;
    string buttonNumber = button.name.Substring(m_ButtonPrefix.Length);
    string toggleName = "toggle" + buttonNumber;
    Toggle toggle = root.Q<Toggle>(toggleName);

    Debug.Log("Button was clicked!" + (toggle.value ? " Count:" + m_ClickCount : ""));
}

결과 확인하기

이 모든 과정을 따른 후에는 Window > UI Toolkit > MyCustomEditor를 선택하여 레이블, 버튼, 토글의 동작을 테스트할 수 있습니다.

추가 리소스

• Unity UI Toolkit 공식 문서
• GitHub 저장소
• Unity Technologies 웹사이트

이 가이드가 유용하게 사용되길 바랍니다! 솔직하게 질문이 있으시면 언제든 언제든지 도와드리겠습니다.