MRが楽しい

MRやVRについて学習したことを書き残す

Unityでマウスの位置にUIオブジェクトを追従させる

本日は Unity の小ネタ枠です。
Unityでマウスの位置にUIを追従させる方法についてです。

マウスの位置にUIを追従させる

マウスの座標は Input.MousePosition で取得可能です。
docs.unity3d.com

本関数で取得できるのはスクリーン空間のピクセル座標なのでUIオブジェクトの位置指定に利用するため、Canvas内のローカル座標に変換する必要があります。
ピクセル座標を指定のCanvas内のRectTransformの座標に変換するには RectTransformUtility.ScreenPointToLocalPointInRectangle が利用できます。
docs.unity3d.com

サンプルシーン

サンプルシーンを作って動作を確認してみます。
Hierarchy で右クリックからマウスを追従するカーソルになる[UI -> Image]を作成します。

Image に画像を設定してマウスカーソルを作成しました。これをマウス位置に追従させます。

以下のサンプルスクリプトを作成しました。
・TrackingMousePosition.cs

using UnityEngine;

public class TrackingMousePosition : MonoBehaviour
{
    /// <summary>
    /// マウスポインターを投影するCanvasコンポーネントの参照
    /// </summary>
    [SerializeField] private Canvas _canvas;
    
    /// <summary>
    /// マウスポインターを投影するCanvasのRectTransformコンポーネントの参照
    /// </summary>
    [SerializeField] private RectTransform _canvasTransform;
    
    /// <summary>
    /// マウスポインターのRectTransformコンポーネントの参照
    /// </summary>
    [SerializeField] private RectTransform _cursorTransform;

    void Update()
    {
        // CanvasのRectTransform内にあるマウスの座標をローカル座標に変換する
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            _canvasTransform,
            Input.mousePosition,
            _canvas.worldCamera, 
            out var mousePosition);

        // ポインターをマウスの座標に移動する
        _cursorTransform.anchoredPosition = new Vector2(mousePosition.x, mousePosition.y);
    }
}

スクリプトをシーンに設定し、Canvas とマウスカーソルになる Image オブジェクトへの参照を設定します。
これで準備は完了です。

シーンを再生してマウスを Game 画面上で動かすと、マウスの位置に合わせて Image オブジェクトが追従します。