📃

[Unity]UIToolkit：ussの疑似クラス(:hover等)あれこれ

2023/11/29に公開

Unity

uitoolkit

tech

前提

環境

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

予備知識：uss・ussセレクタ

uss＝ボタンとかの見た目のテンプレが作れる、と理解している人向け。

UIToolKitをイチから理解するには、公式のUI ToolKitでの制作工程紹介が分かりやすい。

USSセレクターについて
簡易版：公式マニュアル/USSセレクター
詳細版：公式マニュアル/シンプルセレクター、公式マニュアル/USSセレクタ－

ussセレクタの設定方法について書いたやつはこちら。
[Unity]UIToolkit：UI Builderでのussセレクタ設定方法

疑似クラスとは

疑似クラス＝ボタンを押した時やマウスオーバー時など、指定された状況でだけスタイルを変えられる。:hoverや:activeなど。

公式マニュアル/疑似クラスを読むのが早い。

:hoverが動いて分かりやすいのは公式のこの辺。

疑似クラスの設定方法

新規追加する場合　左上、USSのAdd new selector…欄に名前:hover等を書いてEnter
追加済みの場合　インスペクタの最上部nameを書き変える。

設定した内容はPreviewモードだと:hoverのマウスオーバーなど確認しやすい。

補足

疑似クラスにおいてUnsetな箇所は元スタイルの設定内容になる。
スタイル変更箇所以外はUnsetに設定しておくといい。　一応。
（Unset＝スタイル未設定箇所。）

(例)青背景のボタンを押下時→青背景で太字にしたい場合、:activeの方には太字だけ設定。

ussファイルでの表示

.TestButton {
    background-color: rgb(0, 0, 255);
}

.TestButton:active {
    -unity-font-style: bold;
}

→ 緑背景にしたくなった場合に、元クラスのスタイルを変えるだけでいいから楽。

疑似クラスごとの説明

公式マニュアルの表を自分流に書き換えると

疑似クラス	変わるタイミング
:hover	マウスのカーソルを重ねた時
:active	ボタンやトグルを押した時
:inactive	↑でない時
:focus	ボタンやトグルなどを押した時～要素外を押すまで
:disabled	ボタンなどを無効化した時
:enabled	ボタンなどを有効化した時
:checked	トグルや開閉できるFoldout(折りたたみ)などがオンの時
:selected	(USSでは使えないから :checked を使う)
:root	全要素を変える　および、変数の宣言箇所

:hover

:hover カーソルを要素の上に置く
マウスのカーソルを重ねた時に変わる。
つまりモバイル版のタッチでは使えない。

:active

:active ユーザーが要素と相互作用する
ボタンやトグルを押下した時に変わる。
:inactiveは:activeでない時。
ボタンなどへの登録についてはclickable.clickedやRegisterCallbackなどで検索してもろて…。

:checked

:checked 要素はトグル要素であり、オンに切り替える
トグルや開閉できるFoldout(折りたたみ)などがオンの時に変わる。

Foldoutはこういうやつ(折りたたまれてるからクリック)

クリックすると表示される内容

あと:selectedはUSSで未対応なため:checkedを使うよう記載されている。

:focus

:focus 要素にフォーカスがある
ボタンやトグルなどを押下すると変わり、その後に要素外の場所を押すと戻る。

:enabled と :disabled

:enabled 要素を enabled == true に設定する
:disabled 要素を enabled == false に設定する
ボタンなどを有効化/無効化した時に変わる。
:disabled時にはボタンなどさまざまな要素が押せなくなったり、標準で半透明(DisplayのOpacity値が変更されてる)になる。
(つまり半透明にしたくなければ:disabledでのOpacityを100に設定すればいい)
実はボタン以外でもわりとなんでも設定できる。uGUIのinteractableみたいな役割。

C#からbutton.SetEnabled(bool)で有効化/無効化を設定できる。

// 無効化
_uiDocument.rootVisualElement.Q("button-name").SetEnabled(false);

// 有効化
_uiDocument.rootVisualElement.Q("button-name").SetEnabled(true);

:root

:root 要素はルート要素 (ビジュアルツリーの最上位要素)
全体が変わる。他とは別の使い方。
同uss内の大部分で統一されてる箇所に使うと便利そう？

変数用途で使用してるのを見かけた。

公式マニュアルの疑似クラスページにも記載。

疑似クラス以外でのスタイル指定方法についても書いたのがこちら。
[Unity]UIToolkit：ussのUIスタイル(アニメーション含む)を指定するには

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

UIToolkitで遊び始めて1週間。世に情報があまりに無さすぎて、必要なのか分からないが書いた。
世に置いた方が1人くらい助かるかもなというノリだけで記載。画像も雑。