[Unity]UIToolkit：ussのUIスタイル(アニメーション含む)を指定するには
0.前提
環境
unity2022.3.4f1
ランタイムでの使用。UI Builder使用。
予備知識：uss・ussセレクタ・スタイル自体の設定方法
uss＝ボタンとかの見た目のテンプレがまとまったもの。
セレクタ＝見た目のテンプレ。
UIToolKitでのスタイル自体の設定方法は、公式のUI ToolKitでの制作工程紹介が分かりやすい。
USSセレクターについて
簡易版：公式マニュアル/USSセレクター
詳細版：公式マニュアル/シンプルセレクター、公式マニュアル/USSセレクタ－
ussセレクタの設定方法について書いたやつはこちら。
[Unity]UIToolkit：UI Builderでのussセレクタ設定方法
補足にて、秒数やイージングなどを設定する方法を一応記載。
この記事タイトルだとUIアニメーションについて探す人が引っかかる気がしたため。
1.疑似クラス or ussクラスの設定
UIスタイルを別のスタイルに指定する方法としては、
- 疑似クラスを使う方法 (:hoverなど)
- C#からussクラスを設定する方法 (AddToClassListなど)
がある。
疑似クラスで指定できるものは指定して、それ以外はussクラスを設定するのが多分丸い。
1-1.疑似クラス
ボタンを押した時やマウスオーバー時など、指定された状況でだけスタイルを変えられる。
対応されている機能は疑似クラスで指定した方がスムーズ。
:hoverが動いてる分かりやすいサンプルは公式のここ。
対応する疑似クラスの一覧は公式マニュアルに記載。下記は自分流の日本語。
| 疑似クラス | 変わるタイミング |
|---|---|
| :hover | マウスのカーソルを重ねた時 |
| :active | ボタンやトグルを押した時 |
| :inactive | ↑でない時 |
| :focus | ボタンやトグルなどを押した時～要素外を押すまで |
| :disabled | ボタンなどを無効化した時 |
| :enabled | ボタンなどを有効化した時 |
| :checked | トグルや開閉できるFoldout(折りたたみ)などがオンの時 |
| :selected | (USSでは使えないから :checked を使う) |
| :root | 全要素を変える および、変数の宣言箇所 |
疑似クラスについてちょっと書いたのはこちら。
[Unity]UIToolkit：ussの疑似クラス(:hover等)あれこれ。
1-2.C#からussクラスを設定する方法
※ ussクラス名には我流を含むので参考程度で。
連続で記述することで複数セレクターになる。公式マニュアル/複数セレクター
利点は後述。
ussクラスを設定するには、遷移させたいタイミングのC#スクリプトに以下を記述。
// var ve = _uiDocument.rootVisualElement.Q(name);などで該当VisualElementの取得後
// 追加
ve.AddToClassList("--selected");
// 削除
ve.RemoveFromClassList("--selected");
// 条件で有効/無効する
ve.EnableInClassList("--selected", true);
// 追加/削除を切り替え
ve.ToggleInClassList("--selected");
他、C#上で使えそうな関数（公式マニュアル/VisualElementでClassが付くのを羅列）
- AddToClassList(string className) / RemoveFromClassList(string className)
Ussクラスを追加/削除できる。 - EnableInClassList(string className, bool enable)
条件付きでUssクラスを有効/無効できる。 - ToggleInClassList(string className)
追加/削除を切り替えられる。 - ClassListContains
- ClearClassList
- GetClasses
存在するか確認してから設定したい場合など。
こちらでは段階を踏んで記載されている。
複数セレクターにする利点
複数セレクター ＝ 区切りなしで記述したもの。
要素 ＝ ボタンなど。
複数セレクターは、記述した全部を含んだ要素がスタイル変更の対象になる。AND検索みたいな。
デザインが異なる要素でも、複数セレクターの部分が同じクラス名だとC#から設定しやすい。気がする。
(例)
.TestButtonA
.TestButtonA.--selected
.TestButtonB
.TestButtonB.--selected
→ ve.EnableInClassList("--selected", true); だけで各々設定したデザインに変えられる。
n.一応の補足
秒数・イージングを指定して動かす(UIアニメーション)
知ってる前提で書いてるけども、設定するのはここ。
例えば…
ボタンを押す時に、押してるボタンをぷにっと小さくしたい場合
疑似クラスの:active、インスペクタで以下を設定する。
- Transform / Scale を 0.9倍
- TransitionAnimations の
- Property(項目) を scale
- Duration(時間) を 0.2s
- Easing(動き方) を EaseOutCirc ※ 他は イージング などで検索。
- （Delay(遅延)は0のまま）
--
Transitionについて細かく書いておられるのはこちら。
公式マニュアルは英語しかない。公式マニュアル/USS transition(英語版)
遷移アニメ(TransitionAnimations)なのでループする設定はないが、永続的にループして動かすには下記など。
おそらく過去バージョンのために、DOTweenで動かしている方もおられる。
スタイルを変更しない箇所はUnsetに設定
Unset＝スタイル未設定箇所。
ussクラスや疑似クラスでスタイルを変更する場合、Unsetな箇所は元スタイルの設定内容を用いる。
スタイル変更箇所以外はUnsetに設定しておくといい。 一応。
(例)青背景のボタンを押下時→青背景で太字にしたい場合、:activeの方には太字だけ設定。
.TestButton {
background-color: rgb(0, 0, 255);
}
.TestButton:active {
-unity-font-style: bold;
}
→ 緑背景にしたくなった場合に、元クラスのスタイルを変えるだけでいいから楽。
その他、UIToolkitについては
スクラップの備忘録にまとめてある。
個人で遊んでる分なので、現場用には参考程度で考えてもらいたい。
UIToolkitで遊び始めて1週間。世に情報があまりに無さすぎて、必要なのか分からないが書いた。
世に置いた方が1人くらい助かるかもなというノリだけで記載。画像も雑。
Discussion