UI Toolkit：プログラマー向けの新しいデモ、アーティスト向けの更新版のデモ

UI Toolkit を使用して品質の高いゲーム内 UI の作成について、プログラマーの視点と、アーティスト/デザイナーの視点という、それぞれ異なる視点をサポートする教育用サンプルが、新しいものと更新されたものの合わせて 2 つ、ご利用いただけるようになったことをお知らせします。

UI Toolkit は、ゲームやアプリケーション用のパフォーマンスが高くスケーラブルなランタイム UI を開発するためのツールセット、Unity エディター用のカスタム拡張、およびランタイムデバッグツールを提供します。ウェブページやアプリケーションの開発経験があれば、その中核となるコンセプトやワークフローは見慣れたもののはずです。

これらの教育用サンプルの目的は、UI Toolkit を使用して、応答性に優れ、スケーラブルな多数の UI を構築するのを支援することです。プログラマー向けの新しいデモ『QuizU』と、アーティストやデザイナー向けの『UI Toolkit Sample - Dragon Crashers』の更新版は、まったく異なる 2 つのプロジェクトであり、それぞれにとって役立つ広範な教育用コンテンツが用意されています。

QuizU は、主にプログラマーを対象としたインタラクティブなクイズアプリケーションのサンプルであり、複数の画面とゲームフロー管理を備えた小さいながらも完全に動作するゲームにおいて、さまざまなデザインパターンを活用しながら、UI Toolkit のコンポーネントをどのように連携できるのかを示しています。

デモは、次の 2 つの要素で構成されています。1 つは、UI Toolkit のさまざまな側面を示す、理解しやすい 10 個の小さなサンプル、もう 1 つは、10 個のシーンに使用されている多くの技法を完全なプロジェクトに統合するミニクイズゲームです。

ミニゲームのビジュアルスタイルは必要最低限の要素のみを備えたものになっています。これにより、デザインの細部に惑わされることなく、UI 実装のメカニズムに集中することができます。

クイズゲームでは、ゲームフローに State パターンを使用する方法、複数のメニュー画面を管理する方法、Model-View-Presenter パターンを使用する方法、UI Toolkit でイベント処理を実装する方法などを説明しています。ゲームプレイは、非常にシンプルなクイズゲームの仕組みに基づいていますが、その意図は、自分独自のプロジェクトで使用できる実装技法を示し、手ほどきすることです。

これらのデザインパターンの一部をプロジェクトに一貫して統合することにより、コードの可読性を向上させ、コードベースをよりクリーンなものにすることができます。デザインパターンは、リファクタリングを削減したりテストに費やす時間を短縮するだけではなく、チーム全体の開発プロセスをスピードアップすることもできます。

さらに、ゲームコンポーネントがイベントを通して相互に通信する、イベント駆動型アーキテクチャにより、スケーラビリティとテスタビリティ（テスト容易性）のために疎結合を促進します。

デモの 2 番目の要素は、10 個の小さなデモシーンで構成されています。それぞれのデモシーンは、特定の技法や機能を表しています。これらは、次のプロジェクトで UI Toolkit を評価する際に、アイデアを生み出し、指針となるレシピのセットであると考えてください。デモシーンが示す UI Toolkit の機能と技法の簡単なサンプルをご紹介します。

• UXML とビジュアルツリー：UXML ファイルは、UI 要素の階層構造を形成します。これらのビジュアルツリーは、ユーザーインターフェースの青写真として機能します。
• Flexbox：Flexible Box Layout Model（Flexbox）は、UI 要素をコンテナ内に動的に配置するための効率的なレイアウトモデルです。
• Unity スタイルシート（USS）：開発者は USS を使用して、事前に定義されたスタイルで UI 要素をカスタマイズできます。スタイルシートをスワップするだけで UI をリスキニングできます。
• UQuery：UQuery は、UI 要素の複雑な階層を検索するプロセスを簡略化し、ビジュアルツリー内の特定の UI コンポーネントへのシームレスなナビゲーションを可能にします。
• 疑似クラス：擬似クラスを使用して、最小限の追加コードでインタラクティブな UI 要素やアニメーション UI 要素を作成し、視覚インターフェースにさらなる「機能」を追加できます（例えば、ボタンの上にカーソルを重ねるとボタンが拡大されたり、選択後にテキストフィールドの色が変わったりする機能です）。
• UI Toolkit イベントシステム：UI Toolkit には独自のイベントシステムが備わっており、UI のクリック、変更、ポインター入力を複雑な階層でも処理できるように設計されています。
• マニピュレーター：関連するイベントのコールバックを単一のクラスにカプセル化するマニピュレーターを使うと、再利用性を向上させ、ユーザーとのインタラクションを簡単に定義することができます（例えば、インベントリシステム用のクリックアンドドラッグマニピュレーター、ピンチでズーム効果用のジェスチャマニピュレーターなど）。
• カスタムコントロール：このデモでは、UxmlFactory クラスと UxmlTraits クラスを使用してカスタム VisualElement を定義し、インスタンス化する方法を示しています。これらのカスタムコントロールは、スクリプトや UI ビルダーで再利用できます。

Unity 2022 LTS を使用して、QuizU をダウンロードすることをお勧めします。また、Unity Discussions で公開されている、デモに付随する一連の記事も合わせてご覧ください。記事は、以下のとおりです。

• Welcome to the new UI Toolkit sample project QuizU（新しい UI Toolkit Sample プロジェクト QuizU へようこそ）
• QuizU: State pattern for game flow（QuizU：ゲームフローの状態パターン）
• Managing menu screens in UI Toolkit（UI Toolkit でのメニュー画面の管理）
• The Model View presenter Pattern（Model View Presenter パターン）
• Event handling in UI Toolkit（UI Toolkit でのイベント処理）
• UI Toolkit performance tips（UI Toolkit パフォーマンスのヒント）

2022 年 9 月、Unity は『UI Toolkit Sample - Dragon Crashers』を発表しました（提供開始を知らせるブログ記事をお読みいただけます）。このデモでは、2D ミニ RPGプロジェクト『Dragon Crashers』のスライス上にフル機能のインターフェースを表示し、独自のアプリケーションで UI Toolkit を活用する技法をご覧いただけます。これは、同じく 2022 年末にリリースされた電子ブック『Unity におけるユーザーインターフェースのデザインと実装』を補完するものです。

この度、Unity 2022 LTS 向けの新バージョンの『UI Toolkit Sample - Dragon Crashers』をダウンロードできるようになりました。この最新バージョンでの改善点と更新点は以下のとおりです。

• UI Toolkit のテーマと GeometryChangedEvent により、ランタイムの横向き画面モードと縦向き画面モードをサポート
• デバイスの使用可能な画面領域内に UI 機能を含めるための SafeArea API の実装
• モバイルデバイスの fps 制限を 60fps まで向上
• リファクタリングされたシンプルなセレクターと USS スタイルシート
• 解像度が高くなったアイコン
• 画面比率の違いによる VFX スポーン位置の不一致とカーソルの不一致を修正
• デザインパターンをリファクタリングし、よりクリーンな UI アーキテクチャを実現
• 「Tutorial Inspector」ウィンドウで提供される新しい学習コンテンツ

Unity は、更新されたプロジェクト用のユーザーガイドを追加しました。このガイドは、デモで使用されている技法や機能を理解するための、より適切な教育用コンテンツを求めるユーザーからのフィードバックに応えたものです。

最後に、プロジェクトのビデオウォークスルーが公開され、デモをナビゲートしてくれます。確認してみましょう。

Unity は、『QuizU』および更新された『UI Toolkit Sample – Dragon Crashers』で多くの有用なヒントを得られることを願っています。プログラマー、アーティスト、テクニカルアーティスト、デザイナーのための Unity の詳細な電子ブックはすべて、Unity ベストプラクティスハブでご覧いただけます。