Создание всплывающего окна

В этом примере показано, как использовать UnityEditor.PopupWindow для создания всплывающего окна.

Примерный обзор

Этот пример создает всплывающее окно, которое отображается через кнопку в окне пользовательского редактора. Всплывающее окно имеет три переключателя и закрывается, когда оно не находится в фокусе.

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

• UXML
• USS
• UnityEditor.PopupWindow

Создание настраиваемого окна редактора

Создайте пользовательское окно Редактора с кнопкой. Определите кнопку в Документе UI (файл UXML) и стилизируйте ее в файле USS. Наконец, определите логику кнопки в скрипте C# так, чтобы при нажатии на кнопку открывалось всплывающее окно.

1. Создайте проект Unity с любым шаблоном.

2. В окне Projectперейдите в папку Assets и создайте в ней папку Editor.

3. Щелкните правой кнопкой мыши в папке Editor и выберите Создать > UI Toolkit > Окно редактора.

4. Включите параметры UXML и USS в окне UI Toolkit Создатель Окна Редактора.

5. Введите PopupExample в поле C#.

6. Выберите Подтвердите. Это создаст три файла: PopupExample.cs, PopupExample.uxmlи PopupExample.uss.

7. Заменить 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>
        
   

8. Заменить 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());
        }
   }
   

9. Заменить PopupExample.uss следующим текстом:

   .popup-button {
       width: 200px;
   }
   

Создание содержимого всплывающего окна

Создайте UI Document (файл UXML), задающий содержимое всплывающего окна. Создайте класс C#, чтобы задать размер окна и отобразить его.

1. В папке Editor создайте Документ UI с именем PopupWindowContent.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>
   

2. В папке Editor создайте файл C# с именем PopupContentExample.cs со следующим содержимым:

   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. Чтобы проверить всплывающее окно, в меню выберите Примеры > Пример всплывающего окна, чтобы открыть окно Редактора. Затем выберите Настройки всплывающего окна в окне, чтобы отобразить всплывающее окно.