Zenn
Open4

UIToolkitで試行錯誤してる備忘録

Unity
#
uitoolkit
アカシゴアカシゴ

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");
詳しい他サイト

https://docs.unity3d.com/ja/2023.2/Manual/UIE-UQuery.html
https://light11.hatenadiary.com/entry/2023/06/05/193158
https://qiita.com/Kudo004/items/29f38f06ba5426da3536

イベント登録
        // ボタンにイベントを設定
        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) メソッドも記述
詳しい他サイト

https://forpro.unity3d.jp/unity_pro_tips/2022/04/21/3629/#i-6
ボタンとかじゃないものにイベントを登録するならRegisterCallbackやAddManipulatorが使えるとのこと。
https://forum.unity.com/threads/ui-toolkit-how-can-i-add-clickable-to-non-clickable-elements.1292751/
https://light11.hatenadiary.com/entry/2023/11/16/192226
トグル系は以下参照。
https://docs.unity3d.com/Manual/UIE-uxml-element-Toggle.html
https://zenn.dev/hrkd/scraps/bb1914ce9c8c23#comment-bdaaa9b48e039e

要素の制御
        // ボタンなどの表示文字列設定
        btn.text = "ボタンに表示する文字";
        btn.text += "末尾に追加";
        // ボタンなどの無効化
        btn.SetEnabled(false);  // 有効化時は(true)。VisualElementなら多分なんでも。
詳しい他サイト
UIスタイルの変更（ussセレクタのクラスを変える）
        // ussセレクタのクラスを追加
        ve.AddToClassList("--selected");
        // 削除
        ve.RemoveFromClassList("--selected");
        // 条件で有効/無効する
        ve.EnableInClassList("--selected", true);
        // 追加/削除の切り替え
        ve.ToggleInClassList("--selected");
詳しい他サイト

[Unity]UIToolkit：ussのUIスタイル(アニメーション含む)を指定するには/1-2.C#からussクラスを設定する方法
https://note.com/ig_k/n/n907516bc958e
https://gamedev-resources.com/use-style-transitions-to-animate-a-menu/

VisualElementの内容を直接書き換える
        // 表示非表示の変更(配置ごとなくす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);
詳しい他サイト

UIToolkit周りに関するスクリプト雑書き(.uss)

標準ScrollView(スクロールビュー)などで、編集できない部分の見た目を変えるクラス羅列。

こういうとこ
編集できない部分のStyleClassListを確認して制作したものの、バージョン次第で変わるかも。

標準ScrollView(スクロールビュー)の改変
/* .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;
}
標準Foldout(折りたたみ)の改変
/* .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にすると、シェーダー設定がそっちになる。
なので以下２つ対応する。

かつ、
FontAssetCreaterでのRenderModeをSDF～～にする。下記公式参照。

※ FontAssetCreaterにおけるRenderModeの種類は公式のここ。
https://docs.unity3d.com/ja/2022.3/Manual/UIE-font-asset.html
※ フォントをFontAssetにする手順自体は大体TMPと同じっぽいけどもこちらの記事を参照。
https://amabie-labo.com/dev_article/article01
※ なんか四角が文字の周りに出る時はこの辺
https://stackoverflow.com/questions/66544914/squares-outside-every-character-in-textmesh-pro

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のスクロールが出来ず、ホイールスクロールのみが出来る。

以下フォーラム。
https://forum.unity.com/threads/scrollview-with-drag-scrolling.1195807/
要約：「できねーっすか？」「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とかの見た目の変更を楽にしたい。
    変更は出来るけどもひと手間かかる気分。

他、以下に書いていただいている。
https://blog.covelline.com/entry/2022/11/11/125831
https://qiita.com/kukio828/items/5769549282bbc498e87f

要望の短冊

英語にするのが面倒なので公式に向けて出す気もない。

  • 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で導入してみたが、早計だったかもしれない