はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

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

はじめに

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

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

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

しかし公式で

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

Unity 2019.1 の UIElements の新機能 – Unity Blog

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

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


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

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

環境

Unity 2019.2.11f1

ファイルを作成する

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

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

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

f:id:hanaaaaaachiru:20191102000719p:plain

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

f:id:hanaaaaaachiru:20191102000940p:plain

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

f:id:hanaaaaaachiru:20191102001216p:plain

f:id:hanaaaaaachiru:20191102001313p:plain

最小限のコードにする

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

Test.uxml
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <!-- これはコメントです。なにもないのはさみしいのでラベルを一つ配置。 -->
    <Label text="UIElements入門!!  ((`・∀・´))" />
</UXML>
Test.uss
/* これはコメントです。今回は白紙のスタイルシートでOKです。 */
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.csOpenメソッドの属性にて指定したように、Window -> UIElements -> Testをクリックします。

f:id:hanaaaaaachiru:20191102003810p:plain

f:id:hanaaaaaachiru:20191102004702p:plain

見た目を盛る

先程のコードをみると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)
}

f:id:hanaaaaaachiru:20191102010203p:plain

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

f:id:hanaaaaaachiru:20191102013639p:plain

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

さいごに

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

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

もしよろしければ次はもう少し実用的なものを扱いたいと思っているので是非!