📃

[Unity]UIToolkit:UI Builderでのussセレクタ設定方法

2023/12/01に公開

前提

環境

unity2022.3.4f1
ランタイムでの使用。UI Builder使用。

予備知識

UIBuilderについては公式マニュアル/UIBuilder

USSセレクターについては公式マニュアル/USSセレクター

ussセレクタ設定方法

セレクタの新規作成

  • 左上、USSのAdd new selector…欄に名前を書いてEnter。
  • StyleSheet欄、StyleClassListに名前を記述し、Add Style Class to List→ダブルクリック。

セレクタの名前変更

  • セレクタを選択し、 F2キー or 右クリック/Rename or 右上name欄 で変更してEnter。

    インスペクタの右上、name欄
    ※ 個々の要素に既に設定したセレクタには反映されない。

要素へのクラスの設定

クラス… .BaseStyleのようにピリオドから始まるもの。要素間で流用できるテンプレ。

クラス作成後、セレクタが左上uss欄にあって、ボタンなど要素に設定したい場合

  • HierarchyかViewportの要素にドラッグ&ドロップ
  • もしくはインスペクタのStyleSheet欄、StyleClassListに同名を記述しEnter。

【便利】クラスの作成に、作ったボタンなどの見た目を流用し作成する方法

  • StyleSheet欄、StyleClassListに名前を書き、Extract Inlined Styles to New Classボタン。
    (Extract Inlined Styles to New Class= Inlined Style欄を新しいクラスに抽出する)

    ボタン上の文字など以外(Attributes・StyleSheet欄)を全部Unset(未設定状態)にしてくれる。
    作ったボタンが一点ものでなくなり、複数箇所で使い回したくなった時に楽。

(他ページの補足用に作成。)
https://zenn.dev/akashigo/articles/37634b51d1cb41
https://zenn.dev/akashigo/articles/8ac299e8b0532d

その他、UIToolkitについては
スクラップの備忘録にまとめてある。

Discussion