Asset Store で公開中の UI Toolkit の新しいサンプルを試そう

Unity 2021 LTS では、UI Toolkit が幅広いゲームでの応用やエディター拡張のためのアダプティブな実行時 UI の構築およびデバッグに役立つ機能、リソース、ツールのコレクションを提供します。直感的なワークフローにより、アーティスト、プログラマー、デザイナーなど、さまざまな役職の Unity クリエイターが、いち早く UI 開発に着手することができます。

UI Toolkit の主な利点である拡張性やパフォーマンスの向上については、以前のブログ記事をご覧ください。 自社のゲーム『Timberborn』でツールキットを使った Mechanistry のように、すでに UI Toolkit は複数のスタジオで活用されるようになっています。

Unity UI は、3D ワールドでの UI の位置決めとライティングのためのソリューションとして残っていますが、Unity 2021 LTS の時点で、実行時 UI には UI Toolkit が推奨となっています。特に Screen Space - Overlay に設定された UI で効果的で、さまざまな画面解像度に対して良好にスケールします。

そこで、UI Toolkit を使った UI 開発をより良くサポートするために、2 つの新しい学習リソースを発表することになりました。

• UI Toolkit sample - Dragon Crashers：このデモは現在、Asset Store から無料でダウンロードできます。
• User interface design and implementation in Unity：この無料の e ブックは今後数週間のうちに配信される予定です。 こちらで事前登録を行い、配信が始まったらすぐ受け取る準備をすることができます。

この記事の続きでは、UI Toolkit サンプルプロジェクトに含まれる主な機能について説明します。

この UI Toolkit のサンプルは、皆さん自身のアプリケーションに UI Toolkit を活用する方法を示してくれます。このデモでは、ミニ RPG の 2D プロジェクト『Dragon Crashers』のスライスに、実行時に Unity 2021 LTS の UI Toolkit ワークフローを使用してフル機能のインターフェイスを提供しています。

サンプルプロジェクトでその方法が紹介されているアクションの中には、次のようなものがあります。

• Unity スタイルシート（USS）ファイルのセレクターでスタイル設定し、UXML テンプレートを使う
• 円形のメーターやタブビューなどのカスタムコントロールの作成
• スライダーやトグルボタンなどの要素の外観のカスタマイズ
• UI オーバーレイ効果、USS によるアニメーション、季節別のテーマなどを実現するための Render Texture の活用

ご自分のアセットに追加した後にプロジェクトを試すには、再生モードに入ってください。なお、UI Toolkit のインターフェースは、Scene ウィンドウには表示されません。代わりに、Game ウィンドウまたは UI Builder で見ることができます。

左のメニューは、モード別のメインメニュー画面を操作するのに便利です。メインメニューを構成する 5 つのモード別の画面にアクセスするためのボタンを縦に並べたものです（画面を切り替えてもアクティブなままです）。

ポーションをドラッグしてキャラクターを回復させるなど、インタラクティブな操作も可能ですが、ゲームプレイ部分は最小限にとどめられており、UI のサンプルに集中できるようになっています。

それでは、メニューバーの UI を詳しく見ていきましょう。

• ホーム画面はアプリケーションを起動する際に最初に見る画面です。この画面では、ゲームをプレイしたり、シミュレーションされたチャットのメッセージを受信したりすることができます。

• キャラクター画面には、ゲームオブジェクトと UI 要素が混在しています。ここでは、『Dragon Crashers』の 4 人のキャラクターを個別に観察することができます。Stats（ステータス）、Skills（スキル）、Bio（キャラクター紹介）の各タブでキャラクターの詳細を確認し、持ち物のスロットをクリックしてアイテムの追加や削除を行うことができます。プレビューエリアにはタイリングで描かれた背景の上に、2D ライトとリグを施したキャラクターが表示されます。

• リソース画面には、ドキュメンテーションやフォーラムなど、UI Toolkit を活用するためのリソースへのリンクが用意されています。

• ショップ画面では、ゲーム内のショップのシミュレーションを行い、ゴールドやジェムなどのハード通貨・ソフト通貨や、回復ポーションなどのバーチャルグッズを購入することができます。ショップ画面の各アイテムは、独立した VisualTreeAsset です。UI Toolkit は、Resources/GameData の各 ScriptableObject に対して 1 つずつ、これらのアセットを実行時にインスタンス化します。

• メール画面は、架空のメッセージを読むためのフロントエンドで、タブメニューで受信トレイと削除されたメッセージを分けて表示しています。

• ゲーム画面は、『Dragon Crashers』プロジェクトのミニ版で、自動的に再生が開始されます。このプロジェクトでは、ポーズボタン、体力バー、キャラクターがダメージを受けたときに回復ポーションの要素をドラッグできるなど、UI Toolkit でいくつかの要素が修正されていることが見て取れるでしょう。

UI Toolkit を使って、プロジェクト全体において安定した一貫性のある UI を構築することが可能です。同時に、ゲームのテーマやスタイルをより具体化するために、独自のデザインやディテールを追加するための柔軟なツールも提供しています。

それでは、サンプルの中で、UI デザインを洗練させるために使用された機能のいくつかを見ていきましょう。

• Render Texture： UI Toolkit インターフェイスはレンダーキューで最後にレンダリングされます。つまり、UI Toolkit の UI の上に他のゲームグラフィックを重ねることはできません。Render Texture はこの制限を回避し、UI Toolkit の UI にゲーム内のエフェクトを組み込むことを可能にしています。こうした Render Texture をベースとしたエフェクトは控えめに使うべきですが、フルスクリーン UI のコンテキスト内で、ゲームプレイを実行せずに、鮮やかなエフェクトを提供する余地があるということです。以下の画像は、デモで使用した Render Texture の数々です。

• テーマスタイルシート（TSS）を使ったテーマ：TSS ファイルとは、通常の USS ファイルと同様の機能を持つアセットファイルです。これらは、USS セレクターやプロパティ、変数設定によって独自のカスタムテーマを定義するための出発点として機能します。デモでは、デフォルトのテーマファイルをコピーして、それを改変することで季節ごとのバリエーションを提供しています。

• カスタム UI 要素：デザイナーは既成概念にとらわれないように訓練されているので、UI Toolkit は標準ライブラリをカスタマイズしたり拡張したりする余地をたくさん与えてくれます。このデモプロジェクトでは、タブメニュー、スライドトグル、ドロップダウンリストのカスタムメイドの要素に加え、UI アーティストが開発者とともにどのような能力を発揮できるかを実証するために放射状のカウンターのサンプルを紹介しています。

• UI の状態変化をアニメーションで表現する USS トランジション：メニュー画面にトランジションを追加することで、ビジュアルに磨きをかけ、滑らかにすることができます。UI Toolkit では、UI Builder のインスペクターの一部である Transition Animations プロパティで、これをより簡単に行うことができます。プロパティ、期間、イージング、遅延を調整し、アニメーションを設定します。その後、UI Toolkit のスタイルを変更するだけで、実行時にアニメーション化されたトランジションが適用されるようになります。

• 背景ブラーのためのポストプロセッシングボリューム：ゲームでは、特定のポップアップメッセージやダイアログウィンドウにプレイヤーの注意を引くために、混みあったゲームプレイシーンをぼかすエフェクトがよく使われます。このエフェクトを実現するには、Volume フレームワーク（ユニバーサルレンダーパイプラインで利用可能）で Depth of Field を有効にする必要があります。

UI を強化するために、効率的なワークフローを採用するようにしました。ここでは、プロジェクトをよく整理された状態に保つための推奨事項を紹介します。

• 一貫した命名規則：ビジュアル要素とスタイルシートに沿った命名規則を採用することが重要です。明確な命名規則には、UI Builder での階層の構成を維持するだけでなく、チームメイトにとってもよりアクセスしやすくなり、コードをきれいに読みやすいものに保ってくれるという効果があります。 具体的には、 ビジュアル要素やスタイルシートには Block Element Modifier （BEM）命名規則の採用をお勧めします。BEM に沿ってつけられた名前を見れば、その要素が何をするのか、どのように見えるのか、周りの要素とどのように関係しているのかが一目瞭然になります。以下の BEM による命名例を参照してください。

• レスポンシブな UI レイアウト：UI Toolkit は Web 技術と同様に「子」ビジュアル要素がその「親」ビジュアル要素内の現在の利用可能なサイズに適応するレイアウトの作成、および Unity UI システムのように、各要素が参照ポイントに固定された絶対位置を持つ他のレイアウトの作成の両方を可能にします。サンプルでは、UI のビジュアル要素を通して、必要に応じて両方のオプションを使用しています。

• PSD Importer：デモを作成するための最も効果的なツールの 1 つである PSD Importer は、アーティストが手動ですべてのスプライトを別々にエクスポートすることなく、マスタードキュメントで作業できるようにします。変更が必要な場合は元の PSD ファイルで行い、Unity では自動的に更新することが可能です。
• ScriptableObject：UI の設計と実装に注力するため、サンプルプロジェクトでは、アプリ内課金やメールメッセージなどのバックエンドデータのシミュレーションを ScriptableObject を使って行っています。こうした入れ替えのあるデータは、Resources/GameData フォルダーから便利にカスタマイズでき、UI Toolkit で持っているアイテム、キャラクター、ダイアログデータなど、同様のデータアセットを作成する際のサンプルとして利用することが可能です。

UI Toolkit では、UI レイアウトやスタイルがコードから切り離されていることを忘れないでください。つまり、バックエンドのデータの書き換えは、UI デザインとは無関係に行うことができるのです。開発チームがそれらのシステムを置き換えたとしても、インターフェイスは引き続き動作するはずです。

この他、デモで使用されるツールとしては、特殊効果用にビルトインのパーティクルシステムで作成されたパーティクルシステムや、2D ツールセットなどがあります。これらの要素がどのように作用しているのか、ぜひインスペクターでプロジェクトを確認してみてください。

UI アーティストが作成したリファレンスアートは UI/Reference に格納されており、これは UI Builder で再現されています。モックアップからワイヤーフレームまでを含む全プロセスは、e ブックにも収録されています。最後に、サンプルに含まれるすべてのコンテンツは、皆さんご自身の Unity プロジェクトに追加することができます。

「UI Toolkit sample - Dragon Crashers」は、Asset Store からダウンロードできます。さまざまな UI デザインをお試しいただいた後、フォーラム にご意見をお寄せください。

そして、この秋に配信される e ブック「User interface design and implementation in Unity」をぜひご覧ください。事前登録していただいた方には、この e ブックが公開された際にメールでお知らせします。