ポップアップウィンドウの作成

この例では、UnityEditor.PopupWindow を使用してポップアップウィンドウを作成する方法を説明します。

例の概要

この例では、カスタムエディターウィンドウのボタンで表示されるポップアップウィンドウを作成します。ポップアップウィンドウには 3 つのトグルがあり、フォーカスがなくなると閉じます。

この例で作成する完成したファイルは、こちらの GitHub リポジトリ にあります。

必要な要件

このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下の点を理解しておいてください。

• UXML
• USS
• UnityEditor.PopupWindow

カスタムエディターウィンドウの作成

ボタン付きのカスタムエディターウィンドウを作成します。UI Document (UXMLファイル) でボタンを定義し、USS ファイルでスタイルを設定します。最後に C# スクリプトでボタンロジックを定義すると、ボタンをクリックするとポップアップウィンドウが表示されます。

1. 任意のテンプレートで Unity プロジェクトを作成します。

2. Project ウィンドウで右クリックし、Create > UI Toolkit > Editor Window を選択します。

3. UI Toolkit Editor Window Creator ウィンドウの C# ボックスに、PopupExample と入力します。

4. Confirm を選択します。これにより、PopupExample.cs、PopupExample.uxml、PopupExample.uss の 3 つのファイルが作成されます。

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 Document (UXMLファイル) を作成します。ウィンドウサイズを設定し、ウィンドウを表示する C# クラスを作成します。

1. Editor フォルダーに、以下の内容で、PopupWindowContent.uxml という名前の UI Document を作成します。

   <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 を選択します。