はじめに

こんにちは、のんびりエンジニアのたっつーです。
ブログを運営しているのでよろしければ見てください。

今回はUnity 2019の新機能、UIElements の使い方を解説してみようと思います。
ぜひ、お付き合いいただければと思います。

UIElementsとは？

従来のエディタ拡張システムの ImGui を置き換える新しいGUIシステムになります。また、将来的にはランタイムのUI（uGUI）もこの UIElements に置き換わるとされています。

開発者がUIレイアウトおよびスタイル設定をすばやく作成および編集できるようにする新しい保持モードのGUIシステムです。
新しいGUIシステムは、UnityのUIの作成と最適化を容易にするために、WebのCSS、jQuery、HTML DOM、およびEventsシステムから概念を借りています。

また、パフォーマンスが向上し、スタイルシートや動的/コンテキストイベント処理などの多くの新機能も提供されます。

パフォーマンスとスケーラビリティを念頭に置いて新しいシステムを構築したので、開発者がUIを構築、変更、および対話することを可能にする従来の包括的なC＃APIがあります。
使い慣れたC＃API、イベントシステム、CSS、およびXMLのインポート形式により、ユーザーインターフェイスを簡単に構築できます。
UI Elementsは、エディタUIを拡張および作成するためのIMGUIに代わるものであり、将来のリリースではランタイムUIを作成するためにuGUIに代わるものとなるでしょう。
https://blogs.unity3d.com/jp/2019/04/16/introducing-unity-2019-1/#uielements

つまり何が言いたいかと、、、

こうゆう事風にエディタを拡張できます。（今）

こうゆう事がuGUIが将来的にUIElementsでできるようになります。（未来）

UIElements はどんな事に使える？

Unity：UIElements の使い方（Unity2019新機能）をご参照ください。

使い方

ウィンドウの新規作成

非常に簡単に作成できます、まずはEditorフォルダを作成してください。
次に、右クリックから Create > UIElements Editor Window を選択してください。

UIElements のウィンドウ作成ウィザードが表示されるので、今回は「TestWindows」と入力しました。
次に、「Open file 〜」をオンにして、「Confirm」ボタンを選択してください。

おめでとうございます。
もう新規ウィンドウが作成できました！！

作成ウィザードのおかげで、以下の３ファイルがすでに作成されています。

ウィンドウを間違えて閉じてしまった場合は、メニューのWindow > UIElements > TestWindows を選択すれば再度表示が行えます。

ソースコードを確認してみる。

Unity：UIElements の使い方（Unity2019新機能）をご参照ください。

個別のスクリプトにUIElementsを使う

最後にサンプルで、個別のスクリプトにUIElementsを使ってみようと思います。

上記のサンプルのC#ソースコードを以下のように変更しました、内容としては AAA スクリプトに UIElements を適用するって感じの内容です。

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

[CustomEditor(typeof(AAA))]
public class TestWindows : Editor
{
    public override VisualElement CreateInspectorGUI()
    {
        var root = new VisualElement();

        // VisualElements objects can contain other VisualElement following a tree hierarchy.
        VisualElement label = new Label("Hello World! From C#");
        root.Add(label);

        // Import UXML
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/TestWindows.uxml");
        VisualElement labelFromUXML = visualTree.CloneTree();
        root.Add(labelFromUXML);

        // A stylesheet can be added to a VisualElement.
        // The style will be applied to the VisualElement and all of its children.
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/TestWindows.uss");
        VisualElement labelWithStyle = new Label("Hello World! With Style");
        labelWithStyle.styleSheets.Add(styleSheet);
        root.Add(labelWithStyle);

        return root;
    }
}

すごく簡単にAAAスクリプトに UIElements を適用できました。
これでリッチなテキスト・ボタンを設定したり画像を表示したりといろいろできそうですね。

以前書いた記事で、インスペクターに画像を表示するをやりましたが。
UIElementsバージョンだともっと簡単に記述できそうですね、時間があれば試してみたいと思います！

懸念点

表現力が高いUIが氾濫して、UIの統一感がなくなるのでは？と思っています。

終わりに

よければブログ「初心者向けUnity情報サイト」の方にも色々記載しているのでぜひご参照いただければと思います。