【Unity】UIElements機能を使ってエディタ拡張

こんにちは！制作部の中田です。
今回はUnity2019から新機能として追加されたUIElementsを使用し、お試しレベルのエディタ拡張をやってみました！

※環境はWindows10、バージョンはUnity2019.1.14f1です。

そもそもUIElementsとは？

一言で表すとリテインドモードGUI(RMGUI)フレームワークで、Unityのエディター拡張が容易に出来るツールです。今まではイミディエイトモードGUI(IMGUI)を使用していましたが、今回紹介するUIElementsはIMGUIに代わる新しい拡張システムというわけです。

では早速作成してみましょう！

まずは作成

Asset作成

①右クリック→Create→Folderを選択し、フォルダを1つ作成します。
　フォルダ名は「Editor」です。重要！
②作成したEditorフォルダ内で右クリック→Create→UIElements Editor Windowを選択します。
　するとUIElements Editor Window Create画面が表示されます。
③アセット名を入力してください(自由に)。
④Confirm!

注意

Editorフォルダ以外でAssetを作成しようとするとエラーになります。

ファイル確認

3つのファイルが生成されました！

uxmlファイル…構造定義ファイル。表示するものを設定します。 (XMLみたいなもの)
ussファイル… スタイルシート。見た目を変更します。(CSSみたいなもの)
csファイル…スクリプト。判定処理等を設定します。

作成

今回はお試しということで、トグルがON状態の時にボタンを押したらログを出力するUIを作成してみました！

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"

xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
xsi:schemaLocation="
                        UnityEngine.UIElements ../../UIElementsSchema/UnityEngine.UIElements.xsd
                        UnityEditor.UIElements ../../UIElementsSchema/UnityEditor.UIElements.xsd
                        UnityEditor.PackageManager.UI ../../UIElementsSchema/UnityEditor.PackageManager.UI.xsd
"
>
    <engine:Label class="ButtonInfo" text="Create Test"/>
    <engine:Box>
      <engine:Toggle class="ButtonCheck" name="cloak" label="check" value="false"/>
      <engine:Button class="CreateButton" name="cancel" text="Create" />
    </engine:Box>
</engine:UXML>

.ButtonInfo {
    font-size: 20;
    font-weight: bold;
    text-color: rgb(180, 60, 60);
}

.ButtonCheck {
    font-size: 10;
    font-weight: bold;
    text-color: rgb(255, 255, 255);
}

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class logicalbeat : EditorWindow
{
	// Window表示
    [MenuItem("Window/UIElements/logicalbeat")]
    public static void ShowExample()
    {
        logicalbeat wnd = GetWindow<logicalbeat>();
        wnd.titleContent = new GUIContent("logicalbeat");
    }

    public void OnEnable()
    {
		VisualElement root = rootVisualElement;

		// UXMLインポート
		VisualTreeAsset visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/logicalbeat.uxml");
		VisualElement labelFromUXML = visualTree.CloneTree();
		root.Add(labelFromUXML);
		// USSインポート
		StyleSheet styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/logicalbeat.uss");
		root.styleSheets.Add(styleSheet);

		// UI取得
		Toggle ButtonCheck = root.Q<Toggle>(className: "ButtonCheck");
		Button CreateButton = root.Q<Button>(className: "CreateButton");

		// ボタンアクション
		CreateButton.clickable.clicked += () =>
		{
			// Toggleチェック時のみ反応する
			if (ButtonCheck.value == true)
			{
				Debug.Log("Create");
			}
		};
	}
}

出来上がったウィンドウがこちら！

チェックを入れてCreateボタンを押すと、ログが出力されていますね！

まとめ

今回はお試しなのでそんな凝ったものは作成してないですが…。
Inspectorへの対応も可能なので、開発効率を上げるためにエディタ拡張を行うのであれば、UIElementsはオススメです！
また、HTML/CSSに慣れている方は、UXML/USSを使用してスタイルを作成しやすいのも大きなポイントになりそうです！
有難うございました！

【免責事項】

本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。