topazの遊び場

いろいろやってみる

トップ > 【Unity】ツールバー( プレイボタンなど )に、独自のボタンを置く。

【Unity】ツールバー( プレイボタンなど )に、独自のボタンを置く。

はじめに

Unityはエディタ拡張などを用いてさまざまなカスタマイズを加えることができます。 今回は、ツールバーにはさまざまな要素を追加することができますが、ボタンを追加する方法を紹介します。 (ref : https://github.com/smkplus/CustomToolbar)

環境

Unity 2021.3.15f1

下準備

まず、Assets/Editor/CustomToolbarとなるように、EditorとToolbarフォルダを作成します。( Assets直下以外やToolbarのフォルダ名は変更しても大丈夫です。)
次にAssemlyDefinitionを準備します。
Create/Assembly Definitionで作成することができます。今回はCustomToolbarという名前で作成しましたが、なんでも大丈夫です。
Inspectorで見てみるとNameのところに、作成した時の名前が入っているためこれを変更します。 Unity.InternalAPIEditorBridge.020と変更しておきましょう。

Scriptの作成

先ほど作成したAssets/Editor/CustomToolbarに、CustomToolbar.csを用意します。

using UnityEditor;
using UnityEditor.Toolbars;
using UnityEngine;
using UnityEngine.UIElements;

[InitializeOnLoad]
public static class CustomToolbar
{
    static CustomToolbar()
    {
        EditorApplication.update += Init;
    }
    private static void Init()
    {
        EditorApplication.update -= Init;
        InitElements();
    }
    private static void InitElements()
    {
        var toolbar = Toolbar.get;
        if (toolbar.windowBackend?.visualTree is not VisualElement visualTree) return;
        if (visualTree.Q("PlayMode") is not { } playButtonZone) return;
        var testButton = new EditorToolbarButton("CustomButton", () => { Debug.LogWarning("Button is clicked"); });
        playButtonZone.Add(testButton);
    }
}

すると以下のようにボタンが追加されます。

他の場所に要素を追加

上の例では、visualTree.Q("PlayMode")で要素の取得をしており、別の要素を取得することで他の場所に独自のボタンなどを追加することができます。

要素名を確認するには、UI Toolkit Debuggerを使用します。
Window/UI Toolkit/Debuggerから開くことができます。

Select a Panelの部分からToolbarを選ぶと左側に要素がTree上に表示されます。

先ほど作成したEditorToolbrButton(図の下から二番目の要素)は"PlayMode"の要素を取得して追加したため、取得した要素の子要素として追加されています。

取得する要素をAccoutDropdownに変更してみましょう。

- visualTree.Q("PlayMode")
+ visualTree.Q("AccountDropdown")

ボタンがアカウントの左に配置され、UI Toolkit Debugger上でも要素の位置が変わったことがわかります。

UI Toolkit Debuggerを使って好きな場所に好きな機能をつけていきましょう。

参考記事