[Unity]ドラッグ・タッチでカメラ移動する処理を追加

カメラ移動について考える！
スクリプト全体
ドラッグ開始1フレーム目
ドラッグ開始2フレーム以降
おわり！これだけ！

カメラ移動について考える！

どうも、現在ほっそりとゲーム開発を続けている壁です

やっぱりゲーム開発の最初はカメラ移動を実装しないと

なにもできねーって感じになるので

そこから始めています。

んで、ドラッグ（タッチ）でカメラを操作する感じがいいなと

考えていまして、結果以下のような感じを実装しました

これ、実装したはいいものの

なんでこんな動きになるのか分かりづらかったため

こちらの記事で解説していきます！ではいきましょー

スクリプト全体

一旦カメラをドラッグで動かす簡単なスクリプト

を以下に記載します

using UnityEngine;
using UnityEngine.InputSystem;

public class CameraController : MonoBehaviour
{
    private Vector3 dragOrigin;
    private Vector3 difference;
    private bool drag = false;

    void LateUpdate()
    {
        Mouse mouse = Mouse.current;

        if(mouse == null) return;

        if(mouse.leftButton.isPressed)
        {
            difference = Camera.main.ScreenToWorldPoint(mouse.position.ReadValue()) - Camera.main.transform.position;

            if(!drag)
            {
                dragOrigin = Camera.main.ScreenToWorldPoint(mouse.position.ReadValue());
                drag = true;
            }
        }
        else
        {
            drag = false;
        }

        if(drag)
        {
            Camera.main.transform.position = dragOrigin - difference;
        }
    }
}

この中で処理を3つにわけると以下のようになります

①ドラッグが開始した瞬間のフレームでドラッグ位置を記憶する
②ドラッグ中はドラッグ位置からカメラの位置を引いた位置を記憶する
③ ①-②をした値をカメラの位置とする

うん、マジでこれだけ見るとなんで

この計算をするとカメラ位置がいい感じに移動してくれるのか

さっぱりわかりません…

ということで分解して具体的に見ていこうと思います！

ドラッグ開始1フレーム目

まずマウスをクリックした瞬間のフレームでの処理についてです

ここはスクリプト上ではまず以下に該当しますね

if(!drag)
{
    dragOrigin = Camera.main.ScreenToWorldPoint(mouse.position.ReadValue());
    drag = true;
}

ドラッグを開始したマウスの位置をdragOriginに格納しています

具体的に考えた方がわかりやすいので

dragOrigin = (x,y) = (1,1)

としましょうか

ドラッグ開始位置はx,y座標では(1,1)の場所ということです

更に以下も1フレーム目で実行されますね

difference = Camera.main.ScreenToWorldPoint(mouse.position.ReadValue()) - Camera.main.transform.position;

こちらはマウスの位置ーカメラの位置を計算した値を

differenceという変数に格納しています

で、こちらも具体的にカメラの位置を(0,0)としましょう

そうすると

difference = (1,1) – (0,0) = (1,1)

となります

最後に以下の処理があります

if(drag)
{
    Camera.main.transform.position = dragOrigin - difference;
}

このフレームでのカメラの位置を算出しています

dragOrigin = (1,1)

difference = (1,1)

なので

カメラ位置 = (1,1) – (1,1) = (0,0)

となり本来のカメラ位置と同じ値になりました。

つまり1フレーム目はカメラは動かないです

図にすると以下になります

はい！一旦1フレーム目の処理については終わりです

ドラッグ開始2フレーム以降

2フレーム目以降はdifferenceとカメラ位置の更新になります

まずdifferenceですが

ドラッグ位置が(1,2)に移動したとしましょう

カメラ位置は(0,0)なので

difference = (1,2) – (0,0) = (1,2)となります

で、カメラ位置の更新ですが

カメラ位置 = (1,1) – (1,2) = (0,-1)となります

つまり上にドラッグしたら下にカメラが移動する

という感じになりますね

これ意識していないとわからないですが

スマホの操作もこんな感じになっていますよね

図でいうと以下のようになります