2020/08/11

Unity UIElementsとUIBuilder

WRITER: y.harada

UIElementsとはUnity2019から追加された新機能

従来のエディタ拡張でUIを構築する際に用いるIMGUIに置き換わるUIシステムです。

IMGUIがC#コードでUIを構築していたのに対して、

UIElementsはUXML(XMLベースのマークアップ言語)で要素を定義し、

USS(CSSベースのスタイルシート)でスタイリング、UQuery(jQueryライクなC#メソッド)でイベントを処理というようにUIを構築していきます。

具体的な使い方は公式のブログを見れば大体理解できると思います。

https://blogs.unity3d.com/jp/2019/04/23/whats-new-with-uielements-in-2019-1/

将来的にはランタイムUIシステムにも対応する予定みたいなので、今のうちに学んでおいて損はないと思います。

作ってみる

Create > UIElements > Editor Window を選択

作成するエディタの名前を入力してConfirmを押すとuxml,uss,csファイルが作成されます

作成時点でサンプルの要素が追加されているので取り除いていきます

UIElementsを動作させる最小単位がこちらになります

ボタンを追加

まずはuxmlButtonタグを追加し、uQuery でクリックイベントの登録をします

uQuerynamebuttonButton要素を取得して

RegisterCallbackMouseUpEventを登録します

jQueryっぽいですね

テキストフィールドを追加

TextFieldタグを追加、イベントの登録にはボタンと同じように

nametextTextFieldを取得してChangeEventを登録します

選択項目の追加

HTMLで言うところのSelectタグですが

UIElementsにはありません、代わりにPopupFieldというものを使用します

しかもこれはUXMLではサポートされていないのでC#で記述する必要があります

選択項目にEnumを指定するEnumFieldというものもあります

Flexレイアウトについて

Webでレイアウトを組む際に多用するflexスタイルですが、

UIElementsにも用意されています

使い方はCSSと同じで、親要素にflexを指定して、flexの向きを決めます

子要素のflexプロパティに数値を指定することで

親要素内の子要素の大きさの比率を決めることが出来ます

オーサリングツール

プレビュー版ですが、XMLを書くのが辛い人向けに

UIBuilderというオーサリングツールが出ています

PackageManagerのプレビュー版を有効にしてインストールします

UIBuilderがインストールされている状態でxmlファイルをダブルクリックするとUIBuilderが開きます

Libraryに表示されているコンポーネントをダブルクリックか、HierarchyにD&Dで追加できます

Hierarchyの階層構造がそのままxmlのツリー構造になります

追加したコンポーネントを選択することでクラス名の追加やインラインスタイルの指定が出来ます。

またussファイルを選択することでUSSセレクタの追加とスタイルの指定が行えます。

お世辞にも使いやすいとは言えませんが、xmlを書くよりはましといった感じでしょうか。

しかしHTMLのオーサリングツールがあまり流行っていない現状を鑑みると

複雑なエディタ拡張をUIBuilderで開発することは難しいような気がします。

またPopupFieldのようにそもそもxmlがサポートしていないコンポーネントもありますし、

UIBuilderで大まかにレイアウトを決めてコードで細かく編集していくといったやり方が良いかもしれません。

y.harada

y.harada

Unityエンジニア
Reactが好き