Help us understand the problem. What is going on with this article?

Unity:UIElements の使い方(Unity2019新機能)

はじめに

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

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

UIElementsとは?

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

aaa.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

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

8420_main.jpg

UIElements はどんな事に使える?

Unity:UIElements の使い方(Unity2019新機能)をご参照ください。

使い方

ウィンドウの新規作成

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

uielements-001.png

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

uielements-002.png

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

uielements-003.png

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

uielements-004.png

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

uielements-005.png

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

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-006.png

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

懸念点

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

終わりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away