UI Builderを活用したUnityのUI構築

Unityでは最近UI Toolkitと呼ばれる新しいUIシステムの開発が進んでいます。
今日はそのUI Toolkitの一つであるUI Builderの説明とその使い方について紹介します。

UI Toolkitの構成要素

UI ToolkitではUIの要素を分解したいくつかのファイルによって構成します。見た目をUSS、レイアウト構造をUXML、ロジックをUQueryとC#、といった形で責務を分解して実装を行うのが特徴です。名前からもそれとなくわかるのですが、USSがCSS、UXMLがXMLやHTML、UQueryがJQueryから着想を得ており、Webライクな設計となっています。責務が分かれていることによって、従来のエディタ拡張で使われていたIMGUIの難点だったロジックとUI構成が一つのC#に入り混じって煩雑になってしまうという点が解決されました。現在はエディタ上のUI実装でのみ正式リリースとなっていますが、将来的にはランタイムのUIの実装にもUI Toolkitを使うことが公式の展望として発表されています。

UI Builderによる要素の構成

UI Toolkitの要素の中でもUSSとUXMLは見た目の部分であり、C#とは別に実装を行います。もちろん自前でコードを書いてもいいのですが、そこで便利なのがUI Builderです。 UI BuilderはUI Toolkitにおける見た目の部分をGUI操作で作成することができるオーサリングツールになります。 Unity2020まではpreviewの機能でPackage Managerで提供されていましたが、Unity2021からは標準で使えるようになっています。 Package Managerから導入する場合はpreviewのpackageを有効にして以下の画像のpackageを入れてください。

f:id:myudon:20210107215102p:plain

導入するとメニューのWindow -> UI Toolkit -> UI BuilderからUI Builderの画面が開きます。

f:id:myudon:20210105005155p:plain — UI Builder

左のメニューでUIの要素の追加や選択をGUI操作で行い、右のインスペクターで選択したUIの編集を行います。中央のプレビューは即座に更新が反映されるようになっており、Prefabの編集のような感覚で扱うことが可能です。順にUI Builderの使い方について説明します。

UIの要素と階層構造（UXML）の作成

まずは要素の追加です。使うのは左下のLibraryです。

f:id:myudon:20210107003323p:plain

Libraryから追加したい要素を選んでクリック、または任意の追加したい場所にドラッグを行います。試しにButtonを追加します。選択してクリックします。

f:id:myudon:20210107003348p:plain

真ん中のプレビューを確認すると画像のようにButtonの要素が追加されます。

f:id:myudon:20210107003553p:plain

そして左のHierarchyにも追加した要素が反映されます。 Hierarchyはその名の通りでUXML上で定義される階層構造を調整できます。

f:id:myudon:20210107004341p:plain

基本的にはLibraryからContainerに分類されている親となる要素を敷いて、その子にControlsと分類されている要素を追加していくのがよくある工程かなと思います。また、Libraryには自分の作成したUIもひとつのパーツとして扱うことが可能です。LibraryのタブをProjectにするとAssets配下にあるUXMLを参照することができます。

f:id:myudon:20210107004851p:plain

似たようなUIや派生系のUIを量産したい時に、パーツごとにUXMLを制作してLibraryから参照することで制作の手間を省くことができるのはかなり嬉しい機能です。また、UIを選択すると右のInspectorで名前といったパラメータや使うUSSの編集を行うこともできます。インラインで埋め込む装飾もここで編集してプレビューで確認できるのでとても便利な機能です。

f:id:myudon:20210107013222p:plain

こうして制作したUIの階層構造はUXMLに変換されます。下のプレビュー表示で確認が可能です。

f:id:myudon:20210107005129p:plain

後はUXMLとして作ったUIを保存します。上部にあるFileメニューのsaveからもできますし、ctrl + sやcmd + sといったショートカットキーでも可能です。 UXMLの名前と保存場所を入力して保存しましょう。以上でUIの要素および階層構造の定義となるUXMLが作成できます。

UIの見た目（USS）の作成

次にUIの装飾となるUSSの作り方を説明します。基本的には参照するUSSの設定と、Inspectorによる要素ごとの見た目の操作になります。使用するUSSの設定は左上のStyleSheetsのメニューで行います。

f:id:myudon:20210107010514p:plain

左上の+ボタンから新しくUSSを作成したり、Assets配下にあるUSSを読み込むことができます。 USSの記述として装飾の効果の対象を表すセレクタの追加もGUIで行えます。対象のUSSを選択して右のInspectorからセレクタの名前を入力してボタン一つで追加されます。

f:id:myudon:20210107011530p:plain

追加したセレクタはStyleSheetのメニューに反映されます。それぞれのUSSの下に表示されるので分かりやすいです。セレクタごとの効果はInspectorで設定します。プレビューに即座に反映されるので見た目の試行錯誤はかなり捗ります。

f:id:myudon:20210107011950p:plain

そして、UXMLと同様に設定に合わせてUSSに変換されます。下のプレビュー表示で確認が可能です。

f:id:myudon:20210107220111p:plain

後はUXMLの時と同様に保存を行うとUSSが保存されます。以上がUI BuilderでUI構築を行う手順になります。

最後に

UI ToolkitによってUIの見た目とロジックの実装を分離できるようになり、UI Builderを活用することでその見た目をGUIベースで構築できるようになりました。まだまだUI Builderは発展途上なところもありますが、中規模な開発でUIの再利用や量産が必要な時には活躍する時もくるツールじゃないかなーと感じています。 UI ToolkitはUnityは力を入れて開発を進めている部分の一つでもあるので、今後の動きにも注目していきたいですね。