Version: 2022.3
言語: 日本語
USS のベストプラクティス
UI Toolkit Debugger

テーマスタイルシート (TSS)

テーマスタイルシート (Theme Style Sheet、TSS) ファイルは通常の USS ファイルです。UI Toolkit は TSS を別のアセットタイプとして扱い、管理の目的で使用します。

TSS ファイルには通常の USS 構文と形式が適用されますが、通常、テーマファイルには @import 規則を通じて他の USS ファイルへの参照が含まれます。

ノート: USS ファイルは @import 規則もサポートしています。

TSS の作成

テーマごとに異なる TSS ファイルを作成し、ランタイムに切り替えることができます。TSS を使用して、異なるプラットフォームやデバイス向けにルックアンドフィールをカスタマイズできます。また、ゲームやアプリケーションが複数の言語をサポートしている場合、言語ごとに異なるフォントを使用する TSS を作成することもできます。

プロジェクトのゲームオブジェクトに最初の UIDocument を加えると、Assets/UI Toolkit/UnityThemes/UnityDefaultTheme.tss にデフォルトのランタイムテーマアセットが生成されます。それを 継承 して、上書きしたり、新しいスタイルを加えて、カスタムテーマを作成できます。

新しい TSS の作成は、以下のように行います。

  1. Assets > Create > UI Toolkit > TSS Theme File の順に選択します。
  2. 必要であれば、デフォルトのテーマを継承します
  3. カスタムスタイルで USS を作成し、そのスタイルをテーマにインポート します。
  4. カスタムテーマは、UI Builder の Viewport のテーマリストにも表示されます。テーマをプレビューするには、Viewport から選択します。

TSS を適用する

USS と同じように、UXML で TSS を参照する または C# で TSS を参照する ことができます。

Panel Setting アセットのデフォルトテーマとして TSS を設定することもできます。複数のパネル設定がある場合、それぞれ異なる TSS ファイルを使用できます。

テーマの継承

テーマを継承するには、@import ルールまたは TSS アセットのInspector ウィンドウを使用します。

@import 規則の構文は以下の通りです。

@import url("<path-to-file>/fileName.tss");

Inspector ウィンドウでテーマを継承するには、以下を行います。

  1. TSS アセットを選択します。
  2. Inspector ウィンドウ > Inherited Themes の順に移動します。
  3. + を選択します。これで新しい参照フィールドが追加されます。
  4. 参照フィールドのリストアイコンを選択します。プロジェクトのすべてのテーマを含むドロップダウンリストが表示されます。
  5. 継承するテーマを選択します。

スタイルシートのインポート

スタイルシートをインポートするには、@import 規則または TSS アセットの Inspector ウィンドウを使用します。

@import 規則の構文は以下の通りです。

@import url("<path-to-file>/fileName.uss");

Inspector ウィンドウでスタイルシートをインポートするには、以下を行います。

  1. TSS アセットを選択します。
  2. Inspector ウィンドウ > Inherited Themes の順に移動します。
  3. + を選択します。これで新しい参照フィールドが追加されます。
  4. 参照フィールドのリストアイコンを選択します。プロジェクトのすべてのスタイルシートを含むドロップダウンリストが表示されます。
  5. 使用するスタイルシートを選択します。
  6. Applyl を選択します。

その他の参考資料

USS のベストプラクティス
UI Toolkit Debugger