UnityでGoogleマップのようにUIをズームしたりスクロールする方法

はじめに

Unityでマウス位置を中心にRectTransformをマウスホイールでズームしたり、ドラッグ操作で上下左右にスクロールするスクリプトを作成しました。

I created a script in Unity that zooms a RectTransform around the mouse position with the mouse wheel and scrolls it up, down, left, or right with a drag operation.

動作

RectTransformZoomerの動作

RectTransformがマウス位置を中心にズームされ、ズーム後の状況でもドラッグで上下左右にスクロールするのが確認できます。

コード

実際のコードです。ズーム対象のRectTransformに付与する必要があります。
また、SeralizedFieldにはこのRectTransformの親になるCanvasを設定してください。

なお、動作条件は次の通りです。

• ズームしたい対象がRectTransformを持っていること
• 対象が含まれるCanvasのRenderModeがScreenSpace - OverlayかScreenSpace - Cameraであること
• CanvasにCanvasScalerが設定されている場合、UI Scale ModeがScale With Screen Sizeであること

これ以外の設定だと想定外の動きをすることがあるので気をつけて使ってください。

まとめ

以上がマウスホイールでズームしたり、ドラッグ操作で上下左右にスクロールするスクリプトの紹介でした。

マウス位置を中心にズームする既存のスクリプトが意外と見つからず、GPT-4もうまく書いてくれなかったので公開することにしました。