新しいUI Toolkitサンプルを試してみてください – 現在アセットストアで入手可能です。
Unity 2021 LTSでは、UI Toolkitが、さまざまなゲームアプリケーションやエディター拡張のための適応型ランタイムUIを構築し、デバッグするための機能、リソース、ツールのコレクションを提供します。その直感的なワークフローにより、アーティスト、プログラマー、デザイナーなど、異なる役割のUnityクリエイターができるだけ早くUI開発を始めることができます。
UI Toolkitの主な利点、例えば、スケーラビリティとパフォーマンスの向上についての説明は、以前のブログ投稿をご覧ください。これらは、Timberbornのようなスタジオによってすでに活用されています。
Unity UIは、3D世界でのUIの配置や照明、他のUnityシステムとの統合のための定番ソリューションであり続けますが、UI ToolkitはUnity 2021 LTS以降、パフォーマンスとスケーラビリティを求めるゲーム制作にすでに利益をもたらすことができます。特に、スクリーンスペース – オーバーレイUIに効果的で、さまざまな画面解像度でうまくスケールします。
そのため、UI Toolkitを使用したUI開発をよりサポートするための2つの新しい学習リソースを発表できることを嬉しく思います。
- UI Toolkitサンプル – Dragon Crashers:デモは、アセットストアから無料でダウンロード可能です。
- Unityにおけるユーザーインターフェースの設計と実装:この無料の電子書籍はこちらからダウンロードできます。
UI Toolkitサンプルプロジェクトの一部であるいくつかの重要な機能について学ぶために読み進めてください。
UI Toolkitサンプルは、あなた自身のアプリケーションのためにUI Toolkitを活用する方法を示しています。このデモは、Unity 2021 LTSのUI Toolkitワークフローを使用して、ミニRPGであるDragon Crashersの2Dプロジェクトのスライス上にフル機能のインターフェースを含んでいます。
サンプルプロジェクトで示されるいくつかのアクションは、次のことを示しています：
- Unityスタイルシート（USS）ファイルでセレクターを使用してスタイルを設定し、UXMLテンプレートを使用します。
- 円形メーターやタブ付きビューなどのカスタムコントロールを作成する
- スライダーやトグルボタンなどの要素の外観をカスタマイズする
- UIオーバーレイ効果、USSアニメーション、季節テーマなどにレンダーテクスチャを使用する
アセットに追加した後、プロジェクトを試すには、再生モードに入ります。UI Toolkitインターフェースはシーンビューには表示されないことに注意してください。代わりに、ゲームビューやUIビルダーで表示できます。
左側のメニューは、モーダルメインメニュー画面をナビゲートするのに役立ちます。この縦のボタン列は、メインメニューを構成する5つのモーダル画面にアクセスするためのものです（画面間を切り替えている間もアクティブのままです）。
キャラクターを癒すためにシーン内の利用可能なポーションをドラッグするなど、いくつかのインタラクティビティは可能ですが、UIの例に継続的に焦点を当てるためにゲームプレイは最小限に抑えられています。
メニューバーのUIを詳しく見てみましょう：
- ホーム画面は、アプリケーションを起動する際のランディングパッドとして機能します。この画面を使用してゲームをプレイしたり、シミュレートされたチャットメッセージを受信したりできます。
- キャラクター画面は、GameObjectとUI要素の組み合わせを含みます。ここでは、4つのドラゴンクラッシャーズキャラクターのそれぞれを探ることができます。ステータス、スキル、バイオタブを使用して特定のキャラクターの詳細を読み、インベントリスロットをクリックしてアイテムを追加または削除します。プレビューエリアには、タイル状の背景の上に照明されたリグ付きの2Dキャラクターが表示されます。
- リソース画面は、UI Toolkitを最大限に活用するためのドキュメント、フォーラム、その他のリソースへのリンクを提供します。
- ショップ画面は、金や宝石などのハードおよびソフト通貨、さらには回復ポーションなどのバーチャル商品を購入できるゲーム内ストアをシミュレートします。ショップ画面の各アイテムは、別々のVisualTreeAssetです。UI Toolkitは、Resources/GameData内の各ScriptableObjectに対して、これらのアセットをランタイムでインスタンス化します。
- メール画面は、受信トレイと削除されたメッセージをタブ付きメニューで分ける架空のメッセージのフロントエンドリーダーです。
- ゲーム画面は、Dragon Crashersプロジェクトのミニバージョンで、自動的に再生が開始されます。このプロジェクトでは、UI Toolkitを使用したいくつかの改訂された要素、例えば一時停止ボタン、ヘルスバー、ダメージを受けたキャラクターに回復ポーション要素をドラッグできる機能に気付くでしょう。
UI Toolkitは、プロジェクト全体の安定した一貫性のあるUIを構築することを可能にします。同時に、ゲームのテーマやスタイルをさらに具体化するために、自分のデザインの装飾や詳細を追加するための柔軟なツールを提供します。
サンプルのUIデザインを洗練させるために使用されるいくつかの機能を見てみましょう:
- レンダーテクスチャ:UI Toolkitインターフェースはレンダーキューの最後にレンダリングされるため、UI Toolkit UIの上に他のゲームグラフィックスをオーバーレイすることはできません。レンダーテクスチャはこの制限に対する回避策を提供し、ゲーム内効果をUI Toolkit UIに統合することを可能にします。レンダーテクスチャに基づくこれらの効果は控えめに使用するべきですが、ゲームプレイを実行せずにフルスクリーンUIのコンテキスト内でシャープな効果を得ることができます。以下の画像はデモからのいくつかのレンダーテクスチャを示しています。
- テーマとテーマスタイルシート（TSS）：TSSファイルは通常のUSSファイルに似たアセットファイルです。これらは、USSセレクタやプロパティ、変数設定を通じて独自のカスタムテーマを定義するための出発点として機能します。デモでは、デフォルトのテーマファイルを複製し、コピーを修正して季節ごとのバリエーションを提供しました。
- カスタムUI要素：デザイナーは型にはまらない考え方をするように訓練されているため、UI Toolkitは標準ライブラリをカスタマイズまたは拡張するための十分な余地を提供します。デモプロジェクトは、タブ付きメニュー、スライドトグル、ドロップダウンリストにいくつかのカスタムビルド要素を強調表示し、UIアーティストが開発者と共に何ができるかを示すためのラジアルカウンターを示しています。
- アニメーションされたUI状態変更のためのUSS遷移:メニュー画面に遷移を追加することで、ビジュアルを洗練させ、滑らかにすることができます。UI Toolkitは、UIビルダーのインスペクターの一部である遷移アニメーションプロパティを使って、これをより簡単にします。プロパティ、継続時間、イージング、遅延プロパティを調整してアニメーションを設定します。その後、UI Toolkitのスタイルを変更するだけで、ランタイムでアニメーション遷移を適用できます。
- 背景ぼかしのためのポストプロセッシングボリューム:ゲームで人気のある効果は、混雑したゲームプレイシーンをぼかして、特定のポップアップメッセージやダイアログウィンドウにプレイヤーの注意を引くことです。この効果は、被写界深度をボリュームフレームワーク（ユニバーサルレンダーパイプラインで利用可能）で有効にすることで達成できます。
私たちは、UIを強化するために効率的なワークフローが使用されることを確認しました。プロジェクトを整理整頓するためのいくつかの推奨事項は次のとおりです：
- 一貫した命名規則:視覚要素やスタイルシートに合った命名規則を採用することが重要です。明確な命名規則は、UIビルダー内の階層の組織を維持するだけでなく、チームメイトにとってもアクセスしやすくし、コードをクリーンで読みやすく保ちます。より具体的には、視覚要素やスタイルシートのためにブロック要素修飾子 (BEM) 命名規則を提案します。一目で、要素のBEM命名は、それが何をするのか、どのように見えるのか、周囲の他の要素との関係を教えてくれます。次のBEM命名の例を参照してください：
- レスポンシブUIレイアウト：ウェブ技術と同様に、UI Toolkitは「子」ビジュアル要素が「親」ビジュアル要素内の現在の利用可能なサイズに適応するレイアウトを作成する可能性を提供し、他の要素は参照位置に固定された絶対位置を持つ、Unity UIシステムに似たものです。サンプルは、UIのビジュアル要素を通じて必要に応じて両方のオプションを使用します。
- PSDインポーター：デモを作成するための最も効果的なツールの1つであるPSDインポーターは、アーティストがすべてのスプライトを手動で個別にエクスポートすることなく、マスタードキュメントで作業できるようにします。変更が必要な場合は、元のPSDファイルで行うことができ、Unityで自動的に更新されます。
- スクリプタブルオブジェクト：UIデザインと実装に集中するために、サンプルプロジェクトは、スクリプタブルオブジェクトを使用して、アプリ内購入やメールメッセージなどのバックエンドデータをシミュレートします。この代替データは、Resources/GameDataフォルダーから便利にカスタマイズでき、在庫アイテムやUI Toolkitのキャラクターまたはダイアログデータのような類似のデータアセットを作成するための例として使用できます。
UI Toolkitでは、UIレイアウトとスタイルはコードから切り離されていることを忘れないでください。これは、バックエンドデータの書き換えがUIデザインから独立して行われる可能性があることを意味します。開発チームがそれらのシステムを置き換えた場合、インターフェースは引き続き機能する必要があります。
デモで使用される追加ツールには、特別な効果のためのビルトインパーティクルシステムで作成されたパーティクルシステムや、2Dツールセットなどが含まれます。プロジェクトをインスペクターでレビューして、これらの異なる要素がどのように機能するかを確認してください。
UIアーティストによって作成された参照アートは、UI/Referenceの下にあります。UIビルダーで再現されています。モックアップからワイヤーフレームまでの全プロセスは、電子書籍にも記録されています。サンプル内のすべてのコンテンツは、あなた自身のUnityプロジェクトに追加できます。
