テストUI

UI Builder の中で UI をテストし、デバッグツールを使ってスタイルを調べることができます。

Preview モードでのテスト UI

UI ビルダー内で UI をテストするには、Canvas 内で直接、Viewport のツールバーにある Preview モードを有効にします。Preview モードでは、UI Builder 固有の選択オーバーレイとハンドルが Canvas から削除されます。Preview モードが有効になっているかどうかは、Viewport 全体をオレンジ色の境界線で囲んでいるかどうかでわかります。

Preview モードを有効にすると、以下をテストできます。

• Foldout のような状態ベースのコントロールは、クリックすることで展開し、UI の他の部分の反応を見ることができます。
• IntegerField のような入力フィールドは、入力検証をテストすることができます。
• ScrollView のような大きなコンテナでは、スクロールの上下をテストすることができます。
• :hover 疑似状態は、ホバー専用のスタイルを確認できます。

Preview モードでも、UI を操作することは可能です。ただし、Canvas の選択とマニピュレーターは Preview モードではオフになります。

デバッグビルド

スタイルがどこから来たのかわからない場合は、UI Builder の Inspector の Matching Selectors セクションで要素のスタイルを見つけることができます。

1. UI Builder の Canvas で、エレメントを選択します。
2. Inspector ウィンドウで、StyleSheet > Matching Selectors を展開します。

Matching Selectors セクションに以下が表示されます。

• 独自のスタイルシートからの USS セレクター
• デフォルトの Unity テーマからの USS セレクター

ノート: リストの下位に表示される USS セレクターは、常に上位の USS セレクターの同じスタイルプロパティをオーバーライドします。

Matching Selectors セクションで十分な情報が得られない場合は、UI Toolkit Debugger を使うことができます。UI Toolkit Debugger は、UI エレメントをリアルタイムで検査し、デバッグするために使用するツールです。UI 階層を視覚的に表現します。これを使用して、各 UI 要素の状態とプロパティを調べます。

その他の参考資料

• USS を使った UI のスタイル設定
• USS セレクター
• UI Toolkit Debugger