UIToolkitで試行錯誤してる備忘録
UIToolkit開始1週間、浅いところでちゃぷちゃぷしている。
世に置いた方が1人くらい助かるかもなというノリだけで記載していく。
まとめたやつ
UIToolkitの説明用概略図
UIを構成するのに USS:見た目・UXML:要素・C#:機能 に切り分けて実装できるっぽい。
WebページのxmlやcssみたいなののUI版があるんだなってノリ。
UIToolkit周りに関するスクリプト雑書き(C#)
using System;
using UnityEngine;
using UnityEngine.UIElements;
public class TestUTK : MonoBehaviour
{
public UIDocument _uiDocument;
private VisualElement ve;
private Button btn;
void Start()
{
// この中に書くような想定
}
}
// VisualElement形式で取得
ve = _uiDocument.rootVisualElement.Q("name");
// Button形式などで取得
btn = _uiDocument.rootVisualElement.Q<Button>("button-name");
詳しい他サイト
// ボタンにイベントを設定
btn.clickable.clicked += () => Debug.Log("click"); // ラムダ式なので複数行可
// 1行でボタンに設定
((Button)_uiDocument.rootVisualElement.Query<Button>("button-name")).clickable.clicked += () => Debug.Log("click");
// ボタンやトグルなどではない要素にイベントを登録する場合
ve.RegisterCallback<PointerDownEvent>(OnPointerDown); // OnPointerDown(PointerDownEvent evt) メソッドも記述
詳しい他サイト
ボタンとかじゃないものにイベントを登録するならRegisterCallbackやAddManipulatorが使えるとのこと。 トグル系は以下参照。
// ボタンなどの表示文字列設定
btn.text = "ボタンに表示する文字";
btn.text += "末尾に追加";
// ボタンなどの無効化
btn.SetEnabled(false); // 有効化時は(true)。VisualElementなら多分なんでも。
詳しい他サイト
// ussセレクタのクラスを追加
ve.AddToClassList("--selected");
// 削除
ve.RemoveFromClassList("--selected");
// 条件で有効/無効する
ve.EnableInClassList("--selected", true);
// 追加/削除の切り替え
ve.ToggleInClassList("--selected");
// 表示非表示の変更(配置ごとなくすDisplayの方)。多分ussセレクタで指定すべき。
ve.style.display = DisplayStyle.Flex; // 表示
ve.style.display = DisplayStyle.None; // 非表示
// 背景色の変更
ve.style.backgroundColor = Color.black; // new Color(0.5f,0.5f,0.5f,0.5f);などの記載も可
// TransformのTranslateの変更
ve.style.translate = new Translate(x, y);
詳しい他サイト
- Transform系のその他項目は以下。
https://docs.unity3d.com/2022.1/Documentation/Manual/UIE-Transform.html
UIToolkit周りに関するスクリプト雑書き(.uss)
標準ScrollView(スクロールビュー)などで、編集できない部分の見た目を変えるクラス羅列。
こういうとこ
編集できない部分のStyleClassListを確認して制作したものの、バージョン次第で変わるかも。
/* .unity-base-slider__dragger:動かすバー 色を白に */
.unity-base-slider__dragger {
background-color: rgb(255, 255, 255);
}
/* .unity-base-slider__tracker:背景部分 色を黒に */
.unity-base-slider__tracker {
background-color: rgb(0, 0, 0);
}
/* 上下▲▼ボタンを滅ぼす ※上下ボタン自体24pxだけど雰囲気で22px減らしている。 */
.unity-scroller__low-button {
display: none;
}
.unity-scroller__high-button {
display: none;
}
.unity-scroller--vertical {
margin-top: -22px;
margin-bottom: -22px;
}
/* .unity-foldout__checkmark:▼◀の色を変更 */
.unity-foldout__checkmark {
-unity-background-image-tint-color: rgb(255, 255, 255);
}
/* .unity-foldout__text:表題部分 文字色を変更 */
.unity-foldout__text {
color: rgb(255, 255, 255);
}
/* .unity-foldout__content:折りたたまれる領域 マージン変更 */
.unity-foldout__content {
margin-top: 20px;
margin-left: 25px;
}
UIToolkitで遊んでて気付いた地味なこと
- UIToolkitにおけるゲーム画面比率は、PanelSettingsのScaleMode。(uGUIのCanvasScalerみたいな)
- UI Builder上でussクラスをuss欄からHierarchy・Viewportの要素にドラッグ&ドロップできる。説明
雑記
unity2023.2.1fで遊んできた
TabとTabViewが追加されていたり、Marginなどの設定が見やすくなっている模様。
ただ、
ラベルなどの日本語?2byte文字?が入力時にしか表示されなかったり、
日本語フォントで適当に「Lv」と打つだけでもゲーム再生時に字間が謎に縮まる現象があったり、
再生時にマウスホイールの回転がなんか反映されなかったり、
安定しないと判断してLTSにUターン。
UIToolkitでフォントをFontAssetにした時に文字が黒くなる、色を変えれない
ピクセルじみたビットマップフォント用のRenderModeにすると、シェーダー設定がそっちになる。
なので以下2つ対応する。
かつ、
FontAssetCreaterでのRenderModeをSDF~~にする。下記公式参照。
※ FontAssetCreaterにおけるRenderModeの種類は公式のここ。
※ フォントをFontAssetにする手順自体は大体TMPと同じっぽいけどもこちらの記事を参照。 ※ なんか四角が文字の周りに出る時はこの辺WebGL版、mobileのSleipnirでButton系統が2回押される現象
モバイルのSleipnirで「Hold And Go」を使用ON
にしている場合、1秒ほど長押ししただけでボタンを2度押した判定
になる。
uGUIのボタンでも同様なためブラウザの問題。
特殊な例だから書くか悩んだけども、デバッグの際に引っかかったためメモ。
new Input System使用時、ScrollViewがドラッグできない現象
new Input System使用時、UIToolkitのScrollViewがペンとタッチでドラッグできない現象が起こった。
ボタンとかは反応する、なんならスクロールビューのスクロールバーでは上下できる。
マウスやタッチの座標を取得したくてPlayerInputを追加してたんだけども、DefaultInputActionsに追記する形で実装したらペンとタッチでスクロールのドラッグが無反応。
解決?対応?策
- Player Input用にはマウス座標取得のActionsAssetファイル(.inputactions)を別で切る
- PlayerInputのコンポーネントのUIInputModuleは「なし」
にしたらドラッグできる状態でマウス座標取得にも対応できた。
ScrollViewをマウスでドラッグは無理 多分
uGUIのScrollViewと異なり、UIToolkitにおいてはマウスドラッグでScrollViewのスクロールが出来ず、ホイールスクロールのみが出来る。
以下フォーラム。
要約:「できねーっすか?」「Unity的には本来できない方がいいけど。ここ(画像)で実装してるからパッケージから取り出してクラス名変更もいいよ」「ありがとう!」該当メソッドが現在はprivateになっている&built-inパッケージにdll方式で放り込まれているため、継承するのも元クラスの内容書き換えるのも面倒そう。
uGUIと同じ挙動にしたいから出来れば対応したいのでやり方を随時募集。
マウス入力をタッチ入力と誤解させたりできたら楽なのにな。
参考:公式のgit該当クラス UnityCsReferenceより
uGUIとの差異、メリットとデメリット色々
メリット
- 見た目/機能の切り分けがしやすい。
かつ切り分けた分、見た目の%での指定などどこで指定すればいいかハッキリしている。
uGUI+DOTweenで慣れていたボタンや画面開閉UI程度の単純なのはさらっと出来る。 - 標準で角丸のボタンとかができる。
ここまで来たらグラデーションとかほしい。
(公式マニュアルにVectorImageが使えると書いてるが実験的機能…。)
デメリット
- 画面の最前面になりがち。
ScreenSpace-OverlayなuGUIであればCanvasのソート順で前面にできたりするが。
https://forpro.unity3d.jp/unity_pro_tips/2022/04/21/3629/#uGUI-2 - マウスではスクロールビューの挙動がuGUIと異なりドラッグできない。
uGUIとの差異で個人的に一番気にかかった。 - ToggleやScrollViewとかの見た目の変更を楽にしたい。
変更は出来るけどもひと手間かかる気分。
他、以下に書いていただいている。
要望の短冊
英語にするのが面倒なので公式に向けて出す気もない。
- ScrollViewのマウス移動をドラッグでもしたい。uGUIと同様に。(上記)
- 最前面以外、描画順をレイヤーで指定したい。
- ToggleやScrollViewとかの見た目の変更を楽にしたい。変更は出来るけども…。
- LibraryのStandardに、Template&Instanceみたく自前のを登録したい。
- 2023.2.1fだと日本語周りが2022.3.4f(LTS)よりバグり散らかしてるから気軽に遊べない。
- unity2023.2.1f1のTabとTabViewの使い方がよく分からないのでマニュアル等ほしい。
- RendererTextureなしでSceneViewと重ねれてもいいのにな。https://forum.unity.com/threads/examples-of-using-uielements-for-scene-view.684013/
- uGUIで出来てることが色々できたらいいな。https://docs.unity3d.com/ja/2023.2/Manual/UI-system-compare.html
UIToolkitについて参考になるサイト
公式
基本
uxml,uss,c#
uGUIとの比較も込みで、最初からなら全面的に分かりやすい。
UI ToolKitを導入して効率よくUIを構築する – Unity for Pro
UI ToolKitでの制作工程紹介から読めばとりあえず始める分には最適。
公式
基本~応用
uxml,c#
とりあえず作ってみろ系。uss以外網羅してそう。
ランタイム UI の作成 - Unity マニュアル
公式
基本~応用
uxml,uss,c#
公式イベントでのスライド。全体+Tips。
UI Toolkitを使用したランタイムツールの開発事例紹介
公式
基本~応用
uxml,uss,c#
トピックを上から順に読んでいけば大体網羅されてる。
UI Builder - Unity マニュアル
公式
基本~応用
uxml,uss,c#
サンプルアセット。どう実装してるか参考に。
Asset Store で公開中の UI Toolkit の新しいサンプルを試そう | Unity Blog
基本~応用
uxml,uss,c#
大体使いそうなのをサクッとサッと見れる。
【Unity】【UI Toolkit】UIBuilderでランタイムUIをサクッと組み立てる
UIToolkitについて他のこともタグでまとめられててありがたい。- UI Toolkit記事
基本~応用
uxml,uss,c#
丁寧。わりと使いそうな項目が説明されている。
Unityの最新UIシステム「UI Toolkit」でランタイムUIを作成する方法まとめ
基本
uxml,c#
最初から→C#スクリプトでの反映方法。丁寧。
Unity 新UIシステムUI Toolkit 触ってみた | QualiArtsエンジニアブログ
基本
uxml,uss,c#
UI Builder不使用。アニメはDOTween使用での例。
【Unity】UI ToolkitをランタイムUIとして使ってみる
基本~応用
色々書かれていてありがたい。
UnityのUI Toolkitを触ってみる
基本
uss,c#
ussについてが特に分かりやすい。(韓国語) Googleページ翻訳版
Unity UI Toolkit 맛보기
応用
uss,c#
UIアニメ周り。丁寧。(英語) Googleページ翻訳版
Use style transitions to animate a menu with UI Toolkit - GameDev Resources
旧版
unity2020時点での導入。サンプルの確認。(unity2022では見当たらない。)
UnityのUIToolkitのランタイムサンプルを試す
基本
ちゃんとUIToolkitの難点なども併記。
Unity UI ToolKit を使ってみた
ちゃんとUIToolkitの苦労点を記載。
Unity UI ToolkitをRuntimeで導入してみたが、早計だったかもしれない