Version: 2022.2
언어: 한국어
런타임용 탭 메뉴 생성
토글을 사용하여 조건부 UI 만들기

팝업 창 만들기

버전:2021.3+

이 예제에서는 UnityEditor.PopupWindow를 사용하여 팝업 창을 생성하는 방법을 보여 줍니다.

개요 예시

이 예제는 커스텀 에디터 창의 버튼을 통해 표시되는 팝업 창을 생성합니다.팝업 창에는 세 가지 토글이 있으며 초점이 맞지 않으면 팝업 창이 닫힙니다.

이 버튼을 선택하면 팝업 창이 표시됩니다.
이 버튼을 선택하면 팝업 창이 표시됩니다.

이 예제에서 생성한 완성된 파일은 GitHub 저장소에서 확인할 수 있습니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자용입니다.시작하기 전에 먼저 다음을 숙지하십시오.

커스텀 에디터 창 생성

버튼이 있는 커스텀 에디터 창을 만듭니다.UI 문서(UXML 파일)에서 버튼을 정의하고 USS 파일에서 스타일을 지정합니다.마지막으로 버튼을 클릭할 때 팝업 창이 표시되도록 C# 스크립트에서 버튼 로직을 정의합니다.

  1. 임의의 템플릿을 사용하여 Unity 프로젝트를 생성합니다.

  2. 프로젝트(Project) 창을 오른쪽 클릭하고 Create > UI Toolkit > Editor Window를 선택합니다.

  3. UI Toolkit Editor Window Creator 창의 C# 상자에 PopupExample을 입력합니다.

  4. Confirm을 선택합니다.그러면 다음 3개의 파일이 생성됩니다.PopupExample.cs, PopupExample.uxml, PopupExample.uss.

  5. 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>
    
  6. PopupExample.cs를 다음 콘텐츠로 바꿉니다.

    using UnityEditor;
    using UnityEngine.UIElements;
    using PopupWindow = UnityEditor.PopupWindow;
    
    public class PopupExample :EditorWindow
    {
        // Add menu item
        [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());
        }
    }
    
  7. PopupExample.uss를 다음 콘텐츠로 바꿉니다.

        .popup-button {
                width:200px;
            }
    

팝업 창 콘텐츠 만들기

팝업 창의 콘텐츠를 정의하는 UI 문서(UXML 파일)를 생성합니다.창 크기를 설정하고 창을 표시하는 C# 클래스를 만듭니다.

  1. Editor 폴더에 다음 콘텐츠로 PopupWindowContent.uxml이라는 이름의 UI 문서를 생성합니다.

    <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>
    
  2. Editor 폴더에 다음 콘텐츠로 PopupContentExample.cs라는 이름의 C# 파일을 생성합니다.

    using UnityEditor;
    using UnityEngine;
    using UnityEngine.UIElements;
    
    public class PopupContentExample :PopupWindowContent
    {
        //Set the window size
        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);
        }
    }
    
  3. 팝업 창을 테스트하려면 메뉴에서 Example > Popup Example > Popup Options를 선택합니다.

런타임용 탭 메뉴 생성
토글을 사용하여 조건부 UI 만들기