【Unity】【UI Toolkit】マウスポインタが乗った時にカーソルを変更する

UnityのUI Toolkitでマウスポインタが乗ったときのカーソルを指定する方法についてまとめました。

はじめに
実装
動作確認
カーソルの指定方法と説明一覧
参考

Unity2022.2.19

はじめに

Unityエディタでは、入力可能なフィールドにカーソルが乗った時など、あらゆる場面でカーソルの画像が変わります。
UI Toolkitにおいては、Visual Elementにカーソルが乗った時にカーソルの画像を自由に指定することができます。
本記事ではこの方法についてまとめます。

実装

カーソルはUSSで指定しますが、まずそれを確認するためのレイアウトを作っていきます。
UI Builderを使って下図のように適当にVisualElementを二つ並べ、片方にCustomCursorという名前をつけておきます。

生成されたUXMLは以下の通りです。

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:VisualElement name="CustomCursor" style="flex-grow: 1; background-color: rgb(58, 195, 184);" />
    <ui:VisualElement style="flex-grow: 1; background-color: rgb(185, 87, 166);" />
</ui:UXML>

次にUSSを記述します。
CustomCursorにカーソルが乗った時に、カーソルがtext（＝テキスト入力フィールド用カーソル）になるように設定します。

#CustomCursor {
    cursor: text;
}

最後にこれを表示するEditorWindowを作成します。

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public sealed class ExampleWindow : EditorWindow
{
    // uxml
    [SerializeField] private VisualTreeAsset _layout;

    // uss
    [SerializeField] private StyleSheet _style;

    private void OnEnable()
    {
        _layout.CloneTree(rootVisualElement);
        rootVisualElement.styleSheets.Add(_style);
    }

    [MenuItem("Window/Example")]
    private static void Open()
    {
        GetWindow<ExampleWindow>();
    }
}

動作確認

ExampleWindowのInspectorからLayoutとStyleに先ほど作成したUXMLとUSSをそれぞれアサインし、Window > Exampleからウィンドウを開くと、以下のように上部のVisualElementにカーソルが乗った時にカーソル画像が変わることを確認できます。

カーソルの指定方法と説明一覧

上記で紹介したカーソル以外にも、UI Toolkitには以下のカーソルが用意されています。

プロパティの値	説明
arrow	通常のカーソル
text	テキスト入力フィールド用
resize-vertical	縦方向のリサイズ用
resize-horizontal	横方向のリサイズ用
link	クリックして飛べるリンク用
slide-arrow	ドラッグでスライド可能なスライダー用
resize-up-right	ウィンドウやパネルのリサイズ用（右上と左下）
resize-up-left	ウィンドウやパネルのリサイズ用（左上と右下）
move-arrow	ドラッグして移動できるUI用
rotate-arrow	ドラッグして回転できるUI用
scale-arrow	ドラッグしてサイズ変更できるUI用
arrow-plus	プラスアイコン付きのカーソル
arrow-minus	マイナスアイコン付きのカーソル
pan	パン用（手のアイコン）
orbit	オービット用（目のアイコン）
zoom	ズーム用（虫眼鏡アイコン）
fps	SceneビューでRMBドラッグ時のやつ
split-resize-up-down	ウィンドウやTwoPaneSplitViewの区切りの縦方向の大きさを変更する時に使う用
split-resize-left-right	ウィンドウやTwoPaneSplitViewの区切りの横方向の大きさを変更する時に使う用
resource / url	カーソルを画像で指定

参考

docs.unity3d.com