こんにちは。XR推進室の松岡です。

今回学習の一環で、Unityの新しいUI実装ツール&機能のUI Toolkitを使って、XR推進室が提供中の360度実写観光メタバースサービス「Buralit」の１画面のUIを再現してみました。

この記事の対象読者はUnityの知識がある方です。

UI ToolKitとは

UI ToolKitとは「ユーザーインターフェース (UI) を開発するための機能、リソース、ツールを集めたもの」（公式ドキュメントより引用）です。

UI ToolkitはWebのようにUXMLとUSS（WebでのHTMLとCSSにあたるもの）を使い、コードでUIを表します。

今までUnityでのUI実装のメインの手段は「uGUI」でした。2024年6月時点のBuralitのUIも全てuGUIで作成されています。

しかし最近Unityは「UI Toolkit は、新しい UI 開発プロジェクト用の推奨 UI システムとなる予定」（Unity の UI システムの比較より引用）としています。

Unity一筋でやってきた私にとっては、Web言語に近いUI Toolkitはとっつきにくい印象がありました。しかし、コードベースでUIデザインを書くことの流行りを踏まえるとUI Toolkitの学習をする価値があるだろうとデザインチームで話し学習を始めました。

 

UI Toolkitの学習

まずは公式ドキュメントや外部のQiita記事などを参考に、一通りUI Toolkitを触ってみました。

またUnityがAssetStoreで出しているサンプルプロジェクト「QuizU – A UI toolkit sample」や「UI Toolkit Sample – Dragon Crashers」も見てみました。こちらは少し複雑で初心者には紐解きづらかったです。

私は受講していませんが、Udemyにも英語ですがサードパーティの教材があります。

 

作成の流れ

UI ToolkitでのUIの作成の流れとしては、最初からコードを書くのではなく、UI BuilderというGUIツールで、用意されているパーツなどを使いUIの配置やプロパティ設定をします。

それらはUXMLというファイルに自動で言語化されます。

そのうえで、UI Builderの機能だけではおぎないきれない部分などをUXMLやUSSに直接コードとして変更・追加していくという流れになりそうです。

Buralitの１画面を再現してみる

さて本題ですが、現在のUI Toolkitの機能でどこまでUIを作れるのか知るために、Buralitの実際の画面をFigmaで作ったデザインデータをベースに作っていきます。

Buralitにはいろいろな画面がありますが、現時点でUI ToolkitではuGUIでのWorld Canvasにあたる空間に出すようなUIは作成できないため、画面に固定で張り付いている2DのUIを実装してみます。この画面にしました。

※開発中のデザインのため実際のアプリではUIが異なります

UI Builderで完成したものがこちらです。なんとUI Builderだけでここまで再現できました！

以下でいくつかつまずいたポイントなどを紹介します。

今回私が作業したUnityのバージョンはUnity 6 Preview（6000.0.f1)です。Unityのバージョンによりデフォルトのパーツの種類や、Inspectorの初期値などが違うためご注意ください。

 

Imageの代わりはVisual Element

画像を表示する際、uGUIではImageコンポーネントを使っていましたが、UI BuilderのLibraryの中にImageはありません。

UI BuilderではVisual Elementを使います。

Visual ElementのBackgroundのImageに画像を設定します。

 

Grow

UI Builderでの要素の大きさ変更によく使い、かつWeb初心者ではわからないポイントとして「Grow」という項目がありました。

基本的にすべてのパーツはデフォルトで空いている空間全体に広がろうとしますが、Growを0にするとその効果がなくなり、指定したサイズにすることができます。

Grow:1のとき
Grow:0かつSizeを指定したとき

サイズはSizeで設定できます。

 

Text Overflow

表示するテキストが長い場合、末尾に…をつけて省略したいのですが、Text Overflowで…を選んでも省略されないということがありました。

これはDisplayのOverflowを右のhiddenにすると解消されました。

UI要素同士の重ね方

UI同士を重ねたいときは、親子関係にすると重なりました。それ以外の場合は基本的にUI要素同士が重ならないように、自動で配置されます。これもuGUIと違う部分ですね。

 

Text Fieldなどのデザインの変え方

LibraryのStandardにあるText Fieldなどパーツの一部は子要素が編集できないようになっています。

このデザインを変えるにはUSSファイルを作り、「Add new selector…」エリアで変えたいパーツの名前を書いてselectorを作ります。

あとは他のUIと同じく右側のStyleエリアでプロパティを変えると、デフォルトのデザインを上書き編集できるようになります。

これでText Fieldも理想のデザインにできました。

 

フォント

自分で用意したフォントを使うには、otfファイルなどのフォントファイルを使う方法と、TextMeshProと同様にFont Assetとして生成しなおしたフォントファイルを使う方法の２種類があります。

 

角丸

uGUIデフォルトの機能ではできなかった角丸がBorderのRadiusで簡単に設定できます！うれしいですね。

最後に

想像以上にUI Builderの機能だけでUIを再現できました。コードベースと聞いて構えていましたが、UI Builder単体でここまでできるのであれば、デザイナーでもUnityでUIを組みやすそうです。

角丸をパラメーター設定だけでできるなどuGUIではできなかった機能があるのはうれしいですね。

また最後に、今回はあくまで学習のためにBuralitの画面を再現しており、実務ではUI Toolkitを使用していないことをご承知おきください。