Unity：UIElements の使い方（Unity2019新機能）

# はじめに

*こんにちは、のんびりエンジニアのたっつーです。*
*[ブログ](https://www.fast-system.jp/)を運営しているのでよろしければ見てください。*

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

# UIElementsとは？

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

![aaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/61d1930e-9e9c-ddad-88eb-646f465c90e7.png)

> 開発者が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

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

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

![image-217.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/ce27896e-9553-07fb-d316-642710343fdf.png)

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

![8420_main.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/e803a7d0-c05b-0671-5fdf-bf1388a894ea.jpeg)


# UIElements はどんな事に使える？

[Unity：UIElements の使い方（Unity2019新機能）](https://www.fast-system.jp/unity-uielements-howto/)をご参照ください。

# 使い方

## ウィンドウの新規作成

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

![uielements-001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/bbf071df-90dc-48aa-2285-333a4eb4de15.png)

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

![uielements-002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/e1258e7d-d5ce-a9ea-3d8d-c66e22e53dcc.png)

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

![uielements-003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/dfb76850-1ef3-2a6d-7ff2-3d43256887d2.png)

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

![uielements-004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/fcf9c1ea-1d35-cc20-117d-c77b464830e7.png)

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

![uielements-005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/ec8eda79-288f-ce96-3626-2b2c0d95005c.png)

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

[Unity：UIElements の使い方（Unity2019新機能）](https://www.fast-system.jp/unity-uielements-howto/)をご参照ください。

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

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

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

```C#
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-006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/11b3f122-ae7d-2c57-e6d3-a2601839095a.png)

以前書いた記事で、[インスペクターに画像](https://www.fast-system.jp/unity-inspector-script-image/)を表示するをやりましたが。
***UIElementsバージョンだともっと簡単***に記述できそうですね、時間があれば試してみたいと思います！

# 懸念点

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

# 終わりに

*よければ ブログ「[初心者向けUnity情報サイト](https://www.fast-system.jp/)」の方にも色々記載しているのでぜひご参照いただければと思います。*