Version: 2022.3
言語: 日本語
UI Builder で USS 変数を割り当てる
UI の構築

テスト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 の例

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

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

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

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

その他の参考資料

UI Builder で USS 変数を割り当てる
UI の構築