Unity 사용자 매뉴얼 - 팝업 창 만들기

이 문서에서는 Unity의 PopupWindow를 사용하여 커스텀 팝업 창을 생성하는 방법에 대해 설명합니다. 이 예제는 Unity 에디터와 UI 툴킷을 사용하여 보다 직관적인 사용자 인터페이스를 만드는 데 도움이 됩니다.

개요

이 예제에서는 커스텀 에디터 창의 버튼을 클릭하여 표시되는 팝업 창을 만들며, 팝업 창 안에는 세 개의 토글이 포함됩니다. 초점이 맞지 않으면 팝업 창이 자동으로 닫힙니다. 이 예제의 코드는 GitHub 저장소에서 확인할 수 있습니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷 및 C# 스크립팅에 익숙한 개발자를 위한 것입니다. 시작하기 전에 다음에 대한 이해가 필요합니다:

• UXML
• USS
• UnityEditor.PopupWindow

단계별 가이드

1. 커스텀 에디터 창 생성

1. Unity 프로젝트 생성: 임의의 템플릿을 사용하여 Unity 프로젝트를 생성합니다.
2. UI Toolkit Editor Window 만들기: 프로젝트 창에서 오른쪽 클릭하고 Create > UI Toolkit > Editor Window를 선택합니다.
3. 창 이름 지정: PopupExample이라는 이름을 입력한 후 Confirm을 선택합니다.

이제 다음 세 개의 파일이 생성됩니다:

• PopupExample.cs
• PopupExample.uxml
• PopupExample.uss

2. UXML 파일 수정

PopupExample.uxml을 다음과 같이 수정합니다:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="True">
    <Style src="PopupExample.uss" />
    <ui:Button text="Popup Options" display-tooltip-when-elided="true" class="popup-button" />
</ui:UXML>

3. C# 스크립트 수정

PopupExample.cs을 다음과 같이 수정합니다:

using UnityEditor;
using UnityEngine.UIElements;
using PopupWindow = UnityEditor.PopupWindow;

public class PopupExample : EditorWindow
{
    [MenuItem("Example/Popup Example")]
    static void Init()
    {
        EditorWindow window = EditorWindow.CreateInstance<PopupExample>();
        window.Show();
    }

    private void CreateGUI()
    {
        var visualTreeAsset = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/PopupExample.uxml");
        visualTreeAsset.CloneTree(rootVisualElement);

        var button = rootVisualElement.Q<Button>();
        button.clicked += () => PopupWindow.Show(button.worldBound, new PopupContentExample());
    }
}

4. USS 파일 수정

PopupExample.uss를 다음과 같이 수정합니다:

.popup-button {
    width: 200px;
}

5. 팝업 창 콘텐츠 만들기

팝업 창의 콘텐츠를 정의하는 UI 문서(UXML 파일)를 생성합니다.

1. 새 UXML 파일 만들기: PopupWindowContent.uxml이라는 이름으로 Editor 폴더에 생성합니다.
2. UXML 파일 내용 추가:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="True">
    <ui:Toggle label="Toggle 1" name="Toggle1"/>
    <ui:Toggle label="Toggle 2" />
    <ui:Toggle label="Toggle 3" />
</ui:UXML>

1. C# 스크립트 생성: PopupContentExample.cs라는 이름의 C# 파일을 Editor 폴더에 생성합니다.

PopupContentExample.cs 내용 추가:

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class PopupContentExample : PopupWindowContent
{
    public override Vector2 GetWindowSize()
    {
        return new Vector2(200, 100);
    }

    public override void OnGUI(Rect rect)
    {
        // Intentionally left empty
    }

    public override void OnOpen()
    {
        Debug.Log("Popup opened:" + this);

        var visualTreeAsset = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/PopupWindowContent.uxml");
        visualTreeAsset.CloneTree(editorWindow.rootVisualElement);
    }

    public override void OnClose()
    {
        Debug.Log("Popup closed:" + this);
    }
}

6. 팝업 창 테스트

메뉴에서 Example > Popup Example > Popup Options를 선택하여 팝업 창을 테스트합니다.

기타 활용 및 응용 예제

• 사용자 설정을 저장하는 팝업 창 추가
• 여러 탭을 가진 팝업 창 구현
• 사용자 피드백을 받기 위한 설문 조사 디자인

이러한 예제들을 통해 Unity에서 UI 툴킷을 활용하여 더욱 유용한 기능을 개발할 수 있습니다.