【Unity】App UIをエディター拡張のUIとして使用する【App UI】

自己紹介

App UIでエディター拡張作ってる大学生。

今回の記事

App UIでエディター拡張を作る際に中々反映されないという事態に至りました。
App UIの記事に見えて実はUI Toolkitの記事ですね完全に。

ちなみに、公式ドキュメントには特にこれに関する記述がない…！

前提条件

使用したUXML

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:appui="Unity.AppUI.UI" xsi="http://www.w3.org/2001/XMLSchema-instance" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">

    <appui:Panel name="root-panel" >

        <appui:Button title="Button" />

    </appui:Panel>

</ui:UXML>

適当なエディターウィンドウ

using System.Collections;
using System.Collections.Generic;
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class TestEditorWindow : EditorWindow
{
    [SerializeField] private VisualTreeAsset _document;
    [SerializeField] private ThemeStyleSheet _theme;
    [MenuItem("Examples/My Editor Window")]
    public static void ShowExample()
    {
        var wnd = GetWindow<TestEditorWindow>();
        wnd.titleContent = new GUIContent("MyEditorWindow");
    }

    public void CreateGUI()
    {
        // Each editor window contains a root VisualElement object
        VisualElement root = rootVisualElement;

        root.styleSheets.Add(_theme);
        //MainContainerをテンプレートからコピー
        var defaultContainer = _document.Instantiate();
        root.Add(defaultContainer);
    }
}

やり方

実は上のC#がほぼ答えなのですが、Themeファイルを作って追加してあげるだけです。

1. テーマファイルを作成する

Project Window上で右クリック [create] --> [UI Toolkit] --> [TSS Theme File]

2. テーマファイルにApp UIのテーマを指定

Inspector
ここだけひっかけがあります。

なんとApp UIが一覧に表示されません。ﾅﾝﾃﾞﾔ

ということで、Packages/com.unity.dt.app-ui/PackageResources/Styles/Themes/にあるテーマを手動でドラッグアンドドロップして設定しましょう。

3. C#からテーマファイルを指定して追加。

ここはUXMLに指定しても良いのですが、好きにやっていただいて大丈夫です。

4. 完成

ここまでで反映されたと思います。
これで好きにApp UIを使えますね。

と思ったのですが、GraphViewでは使えないっぽい（GraphViewのテーマに上書きされちゃう）

おわりに

今開発してるエディター拡張でGraphViewを使う気まんまんだったのになぁ…（）