【Unity】いきなりはじめる「UIElements」①

はじめに

今回はUIElementsについての記事になります！

unity2019から正式な機能になったUIElementsですが、これはエディタ拡張に用いられたIMGUIというUIフレームワークに代替するものとして作られたものです。

ただ「どうせエディタ拡張なんてほとんどしないし、また新しく覚えるのがめんどくさい」と思う方もいらっしゃるのではないでしょうか。

しかし公式で

Unity で UI を作成する方法としては、UIElements が最も幅広くサポートされることになる

Unity 2019.1 の UIElements の新機能 - Unity Technologies Blog

と宣言をしていて、どんどんUIElementsの活用が広がり、いずれはuGUIも以降していく流れのようです。

そんなこんなで将来的にみても学ぶのは悪くないように思えます。

またタイトルに”いきなりはじめる”と書かせていただいたのですが、最初から小難しいことは説明せずにまず実際に動かしてみることを最優先してやりたいと思います。

ある程度使いこなせるようになったら細かいところを見ていきましょう。

環境

Unity 2019.2.11f1

ファイルを作成する

UIElementsを使うためには.uxml，.uss，.csの３つのファイルが必要になります。

自分で作成しても良いのですが、Unityには自動でこの３つを生成してくれる機能が備わっているのでそちらを用いましょう。

またこれら3つのファイルは必ずEditorフォルダの中に入れる必要がありますので、まずは「Editor」という名前のフォルダを作成します。

その中に右クリックをしてUIElements Editor Windowを選択。

すると下の画像のようなウィンドウが立ち上がると思うので、名前を付けて（自動で3つ同じ名前になる）Confirmを押せば3つのファイルが作成されます。

最小限のコードにする

生成した3つのファイルを見ると、既にコードが書いてあります。こちらを利用してもいいのですが、まずは最小限のコードにしてスッキリ整理をしちゃいましょう（頭の中的にも）。

Test.uxml

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <!-- これはコメントです。なにもないのはさみしいのでラベルを一つ配置。 -->
    <Label text="UIElements入門!!  ((｀･∀･´))" />
</UXML>

Test.uss

/* これはコメントです。今回は白紙のスタイルシートでＯＫです。 */

Test.cs

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


public class Test : EditorWindow
{
    // エディタに独自ウィンドウを作成する
    [MenuItem("Window/UIElements/Test")]
    public static void Open()
    {
        // メニューの「window -> UIElements -> Test」を選択するとOpenメソッドが呼ばれる
        // GetWindow()にてウィンドウを表示させる
        Test wnd = GetWindow<Test>();
        wnd.titleContent = new GUIContent("Test");
    }

    // アクティブになったときに実行される
    public void OnEnable()
    {
        VisualElement root = rootVisualElement;

        // UXMLを取得
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/Test.uxml");
        
        // USSを取得
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/Test.uss");
        
        VisualElement UXML = visualTree.CloneTree();
        
        // スタイルシートを適応
        UXML.styleSheets.Add(styleSheet);
        
        root.Add(UXML);
    }
}

最初の内はこれがテンプレートだと思っていて良いかもしれません。

こうして最小限にしたウィンドウを実際にみたいときは、Test.csのOpenメソッドの属性にて指定したように、Window -> UIElements -> Testをクリックします。

見た目を盛る

先程のコードをみるとText.uxmlからラベルを配置していて、画面の設計を担当していることが分かります。そしてTest.csはロジック面といえるでしょうか。

最後の一つであるText.ussは見た目を整えることが役割です。

このように3つのファイルがそれぞれ仕事を分担することが大きな特徴になります。

というわけでまだ試していないText.ussを用いて実際に見た目を盛ってみましょう。

Text.uss

Label {
    font-size: 20px;
    -unity-font-style: bold;
    color: rgba(255, 255, 0, 0.5)
}

今回はLabelというC#の型をもとにした「Type」にて対象を決め、フォントサイズ，フォントの種類（太く），色を指定しています。

ここの詳細はまた後日書けたらと思います。
USS selectors - Unity マニュアル

さいごに

とりあえず実際に使ってみるところまで紹介したのですが、まだまだ書きたいことが山ほどあるので今後も更新していけたらと思います。

自動で生成されたコードはある意味丁寧なんですが、本当の初心者としては結構あきらめたくなるポイントのような気がするんですよね。今回のような最小限なコードならさほど抵抗なくいけたらいいなーと思ってます。

もしよろしければ次はもう少し実用的なものを扱いたいと思っているので是非！
www.hanachiru-blog.com

追記）最近もう少しだけ詳しくなった気がするので、新しく書き直すかも（しない可能性も）。

参考

Unity 2019.1 の UIElements の新機能 - Unity Technologies Blog
まだ人類には早すぎるUIElements事始め - Qiita