この Unity のビデオチュートリアルでは、Unity 6.2 の UI Toolkit を使用してワールド空間のユーザーインターフェースを作成する方法を大まかに説明します。学習する主なステップは以下の通りです。
- プロジェクトの設定と UI Builder を開くための必須事項
- 最初の UXML ドキュメントを保存する
- スタイルシート（USS ファイル）と再利用可能なスタイルクラスを作成して適用することで、柔軟でメンテナンスしやすい UI を構築する方法
UI Toolkit Unity 6.2 チュートリアルでは、擬似クラスを使用してボタンにカスタムホバーエフェクトを実装することで、ユーザーインタラクションを強化する実用的な例も紹介しています。
最後に、UI Document とそれに関連付けられたパネル設定のワールド空間レンダリングを設定することで、UI を 3D シーンに統合し、ゲーム環境内に物理的に存在するメニューを作成する完全なワークフローを示します。
FAQ
UI Builder の使用を開始するにはどうすればよいですか？
ユーザーインターフェースの作成を開始するには、UI Builder ウィンドウを開き、UXML アセットとして作業を保存します。このファイルには、UI 要素の構造と階層が格納されます。
開始するには、以下の手順に従います。
1.Unity エディターのメインメニューで、UI Builder に移動します。「Window」>「UI Toolkit」>「UI Builder」
2.UI Builder ウィンドウが開いたら、新しい UI ドキュメントを保存します。UI Builder のメニューで「File」>「Save As...」を選択します。
3.プロジェクト内の場所を選択し、ファイルを保存します。これにより、シーン内の UI のソースとして使用する .uxml アセットが作成されます。
この例は、ビデオの次のセクションに直接移動することで、実際に確認できます。
(1:10) - UI Builder ウィンドウを開く
(1:23) - UXML ファイルの保存
UI Builder の詳細については、Unity のドキュメントページをご覧ください。
複数の UI 要素に一貫したスタイルを適用するにはどうすればよいですか？
UI 全体で一貫した外観を維持する最も効率的な方法は、Web 開発における CSS とよく似た機能を持つスタイルシートを使用することです。このアプローチにより、スタイルと構造が分離され、UI の管理が容易になります。
このシステムには 3 つの重要な部分があります。
- スタイルシート（.uss ファイル）：UI Builder で新しいスタイルシートを作成し、メインの UI コンテナにアタッチします。このファイルには、すべてのスタイリングルールが格納されます。
- スタイルクラス：再利用可能なスタイルを作成するには、UI Builder でビジュアル要素を選択します。「スタイルクラスリスト」の下のインスペクターで、新しいクラス名 (「menu-button」など) を入力し、リストに追加します。
- 再利用性：これで、この同じスタイルクラスを他の UI 要素に割り当てることができます。クラスを共有するすべての要素は、定義されたプロパティを自動的に継承し、外観を統一します。スタイルクラスに加えられた変更は、割り当てられたすべての要素を同時に更新します。
この例は、ビデオの次のセクションに直接移動することで、実際に確認できます。
(2:18) - 新しいスタイルシートの作成
(2:57) - 新しいスタイルクラスの作成
(3:07) - クラスからの新しいUSSセレクターの作成
(3:43) - スタイルクラスへの変更が割り当てられたすべての要素にどのように影響するかの説明
Unity USS（スタイルシート）を使用した UI のスタイル設定について詳しく知りたい方は、Unity ドキュメントページをご覧ください。
ボタンのカスタムホバーエフェクトを作成するにはどうすればよいですか？
USS 擬似クラスを使用して、カスタムのホバーエフェクトやその他のインタラクティブなスタイルを作成できます。:hover 疑似クラスを使用すると、ユーザーのカーソルが要素上にあるときのみ適用される特定のスタイルセットを定義できます。
標準の Unity ボタンにカスタムホバーエフェクトを実装するには、以下の手順に従います。
1.UI Builder でボタンを選択すると、インスペクターでデフォルトのスタイルクラスが表示されます。標準のボタンクラスは unity-button です。
2.unity-button クラスをダブルクリックして、スタイルシートにセレクタを追加します。これにより、部分的に透明にするなど、ボタンのデフォルトの外観を変更できます。
3.スタイルシートで、元のクラスに :hover 疑似クラス .unity-button:hover を追加して新しいセレクタを作成します。
4.新しい ：hover セレクターを有効にして、背景色を完全に不透明に変更するなど、ホバー状態のスタイルを定義します。マウスオーバーイベント中に UI がこれらのスタイルを自動的に切り替えるようになりました。
この例は、ビデオの次のセクションに直接移動することで、実際に確認できます。
(6:29) - 擬似クラスの紹介
(6:54) - デフォルトの .unity-button スタイルクラスの検索
(7:24) - :hover擬似クラスセレクターの作成
(7:39) - 最後のホバーエフェクトのデモ
擬似クラスについて詳しく知りたい方は、Unity ドキュメントページをご覧ください。
UI Toolkit 要素をワールド空間オブジェクトとしてシーンに追加するにはどうすればよいですか？
Unity 6.2 では、UI Toolkit が強化され、UI 要素をワールド空間に直接レンダリングできるようになりました。このプロセスでは、UI Document とゲームオブジェクトを使用して、UXML アセットをシーン内にホストします。
以下のシーケンスに従ってワールド空間 UI を作成します。
1.「Hierarchy」ウィンドウで右クリックし、「UI Toolkit」>「UI Document」を選択します。これにより、シーンに新しいゲームオブジェクトが作成されます。
2.新しい UI Document ゲームオブジェクトを選択します。インスペクターで「Source Asset」フィールドを見つけ、保存した .uxml ファイルをそのフィールドに割り当てます。
3.UI ドキュメントに関連付けられている Panel Settings アセットをクリックします。これにより、プロジェクトウィンドウ内でアセットがハイライトされます。
4.Panel Settings アセットを選択して、Inspector でそのプロパティを表示します。「Render Mode」をデフォルトの「Screen Space」から「World Space」に変更します。
5.ワールド空間に切り替えた後は、UI Document ゲームオブジェクトの RectTransform コンポーネントを調整して、3D シーン内で UI 平面の位置、回転、スケールを調整できます。
この例は、ビデオの次のセクションに直接移動することで、実際に確認できます。
(7:49) - シーン内での UI ドキュメントの作成
(7:59) - UXML ソースアセットの割り当て
(8:08) - パネル設定へのアクセス
(8:23) - ワールド空間レンダーモードへの切り替え
(8:58) - 最終的なワールド空間UIのデモ
ワールド空間 UI について詳しく知りたい方は、Unity ドキュメントページをご覧ください。
