팝업 창 만들기

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

개요 예시

이 예시에서는 커스텀 에디터 창의 버튼을 통해 표시되는 팝업 창을 생성합니다. 팝업 창에는 세 개의 토글이 있으며 포커스를 받지 않으면 닫힙니다.

이 예시에서 만든 완성된 파일은 이 GitHub 저장소에서 찾을 수 있습니다.

선행 조건

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

• UXML
• USS
• UnityEditor.PopupWindow

커스텀 에디터 창 생성

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

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

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

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

4. Confirm을 선택합니다. 이렇게 하면 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("Examples/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__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 문서(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
   { 
       public override void OnOpen()
       {
           Debug.Log("Popup opened: " + this);
       }
       
       public override VisualElement CreateGUI()
       {
           var visualTreeAsset = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/PopupWindowContent.uxml");
           return visualTreeAsset.CloneTree();
       }
       
       public override void OnClose()
       {
           Debug.Log("Popup closed: " + this);
       }
   }
   

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