Version: Unity 6.0 (6000.0)
言語 : 日本語
USS のベストプラクティス
UI Toolkit でのマスキング効果の適用

テーマスタイルシート

テーマスタイルシート (TSS) ファイルは、標準の USS ファイルです。UI Toolkit では TSS は個別のアセットタイプとして扱われ、管理目的で使用されます。

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

ノート: USS ファイルも @import ルールをサポートします。

TSS の作成

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

ノート: プロジェクト内のゲームオブジェクトに最初の UIDocument を追加すると、Assets/UI Toolkit/UnityThemes/UnityDefaultTheme.tss でデフォルトのランタイムテーマアセットが生成されます。TSS は新規に作成することもできますが、すべてのデフォルト UI コントロールを機能させるには、デフォルトのランタイムテーマをインポートしてから、新しいスタイルを上書きまたは追加して、カスタムテーマを作成する必要があります。

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

  1. カスタムスタイルで USS ファイルを 1 つ以上作成します。

  2. 以下のいずれかを実行します。

    • Assets > Create > UI Toolkit > TSS Theme File (TSS テーマファイル) を選択して、空のテーマファイルを作成し、デフォルトのテーマをインポートします。
    • Assets > Create > UI Toolkit > Default Runtime Theme File を選択して、デフォルトのランタイムテーマファイルのコピーを作成します。ファイル名は任意で変更できます。
  3. スタイルの USS ファイルをテーマにインポートします。

TSS のプレビュー

作成したカスタムテーマは、UI Builder のビューポートのテーマリストにも表示されます。テーマをプレビューするには、ビューポートでそのテーマを選択します。

TSS を適用する

USS と同じ方法で、TSS を UXML で参照または C# で参照できます。

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

ノート: Panel Settings アセットに TSS を設定しても、その TSS はプロジェクト全体のグローバルスタイルにはなりません。この場合も、UXML または C# で TSS を参照する必要があります。

テーマのインポート

TSS アセットの Inspector ウィンドウまたは @import 規則を使用して、テーマをインポートできます。

ノート: 現在の TSS とインポートされたスタイルシートの両方で USS の変数またはスタイルを定義すると、現在の TSS がインポートされたスタイルシートをオーバーライドします。

Inspector ウィンドウでのテーマのインポート

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

@import 規則によるデフォルトテーマのインポート

デフォルトの Unity ランタイムテーマをインポートするには、以下の構文を使用する必要があります。

@import url("unity-theme://default");

ノート: この構文の URL は特殊なケースで、エンジン内にあるビルトインのデフォルトテーマを参照します。この構文を他のテーマに使用することはできません。

@import 規則による他のテーマのインポート

デフォルトテーマ以外のテーマまたは USS ファイルをインポートするには、以下の構文を使用します。

@import url("<path-to-file>/<file-name-with-extension>");

相対パスまたは絶対パスを使用できます。

  • 絶対パスは、プロジェクトの Assets フォルダーから開始し、先頭に / または project://database/ が付加されています。例えば /Assets/myFolder/myFile.uss または project://database/Assets/myFolder/myFile.uss です。
  • 相対パスは現在のファイルから開始し、/ を除外します。例えば ../myFolder/myFile.uss です。

ノート: パッケージからファイルを参照するには、Packages フォルダーから始まるパッケージファイルの絶対パスを使用します。例えば、/Packages/com.unity.package.name/file-name.uss または project://database/Packages/com.unity.package.name/file-name.uss です。パッケージ名には package name 形式ではなく、com.unity.package.name 形式を使用する必要があります。

追加リソース

USS のベストプラクティス
UI Toolkit でのマスキング効果の適用