今回はUnityでカメラ回転をマウスドラッグで操作する方法を試してみました。
一人称視点のカメラマウスドラッグで視点回転
まずは以前の記事で使用した室内のオブジェクトを用意してシーンを作成しました。
壁や床のテクスチャはUnityのアセットストアの無料テクスチャYughues Free Architectural Materials を使用しています。
スクリプトを作成
さて、マウスドラッグでカメラを操作できるようにするために、カメラにスクリプトをアタッチします。
[Hierarchy]ウィンドウ > MainCameraを選択。[Inspector]ウィンドウ > [Add Component]ボタン > New Script を選択して下記の通り入力。[Create and Add]ボタンをクリック。
Name: CameraRotater / Language: C Sharp
動作内容
スクリプトで実行する内容は次のようになります。
- マウス左クリック時
- カメラ角度とマウス座標を取得
- マウス左ドラッグ中
- マウスの水平移動量（クリック時の座標とマウス座標の現在値の差分値）をカメラのY軸回転に代入
- マウスの垂直移動量（クリック時の座標とマウス座標の現在値の差分値）をカメラのX軸回転に代入
スクリプトの編集
スクリプトの内容は下記の通りになりました。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class CameraRotator : MonoBehaviour
{
// カメラオブジェクトを格納する変数
public Camera mainCamera;
// カメラの回転速度を格納する変数
public Vector2 rotationSpeed;
// マウス移動方向とカメラ回転方向を反転する判定フラグ
public bool reverse;
// マウス座標を格納する変数
private Vector2 lastMousePosition;
// カメラの角度を格納する変数（初期値に0,0を代入）
private Vector2 newAngle = new Vector2(0, 0);
// ゲーム実行中の繰り返し処理
void Update()
{
// 左クリックした時
if (Input.GetMouseButtonDown(0))
{
// カメラの角度を変数"newAngle"に格納
newAngle = mainCamera.transform.localEulerAngles;
// マウス座標を変数"lastMousePosition"に格納
lastMousePosition = Input.mousePosition;
}
// 左ドラッグしている間
else if (Input.GetMouseButton(0))
{
//カメラ回転方向の判定フラグが"true"の場合
if (!reverse)
{
// Y軸の回転：マウスドラッグ方向に視点回転
// マウスの水平移動値に変数"rotationSpeed"を掛ける
//（クリック時の座標とマウス座標の現在値の差分値）
newAngle.y -= (lastMousePosition.x - Input.mousePosition.x) * rotationSpeed.y;
// X軸の回転：マウスドラッグ方向に視点回転
// マウスの垂直移動値に変数"rotationSpeed"を掛ける
//（クリック時の座標とマウス座標の現在値の差分値）
newAngle.x -= (Input.mousePosition.y - lastMousePosition.y) * rotationSpeed.x;
// "newAngle"の角度をカメラ角度に格納
mainCamera.transform.localEulerAngles = newAngle;
// マウス座標を変数"lastMousePosition"に格納
lastMousePosition = Input.mousePosition;
}
// カメラ回転方向の判定フラグが"reverse"の場合
else if (reverse)
{
// Y軸の回転：マウスドラッグと逆方向に視点回転
newAngle.y -= (Input.mousePosition.x - lastMousePosition.x) * rotationSpeed.y;
// X軸の回転：マウスドラッグと逆方向に視点回転
newAngle.x -= (lastMousePosition.y - Input.mousePosition.y) * rotationSpeed.x;
// "newAngle"の角度をカメラ角度に格納
mainCamera.transform.localEulerAngles = newAngle;
// マウス座標を変数"lastMousePosition"に格納
lastMousePosition = Input.mousePosition;
}
}
}
// マウスドラッグ方向と視点回転方向を反転する処理
public void DirectionChange()
{
// 判定フラグ変数"reverse"が"false"であれば
if (!reverse)
{
// 判定フラグ変数"reverse"に"true"を代入
reverse = true;
}
// でなければ（判定フラグ変数"reverse"が"true"であれば）
else
{
// 判定フラグ変数"reverse"に"false"を代入
reverse = false;
}
}
}
スクリプトコンポーネントの設定と動作確認
スクリプトコンポーネントは下図のようになります。
変数”Main Camera”フィールドにオブジェクト”Main Camera”をドラッグ&ドロップで割り当て。
変数”Rotation Speed”フィールドに数値を入力します。垂直方向の移動速度、Xの値はYよりも小さくしました。
トグルボタンでカメラ回転方向を反転させる
あらかじめスクリプトにはマウスドラッグ方向と視点回転方向を反転する処理として”DirectionChange()”関数を書いておきました。
// マウスドラッグ方向と視点回転方向を反転する処理
public void DirectionChange()
{
// 判定フラグ変数"reverse"が"false"であれば
if (!reverse)
{
// 判定フラグ変数"reverse"に"true"を代入
reverse = true;
}
// でなければ（判定フラグ変数"reverse"が"true"であれば）
else
{
// 判定フラグ変数"reverse"に"false"を代入
reverse = false;
}
}
この関数を実行するためのトグルボタンのUIオブジェクトを配置します。[Hierarchy]ウィンドウ > [Create] > UI > Toggle を選択。作成されたToggleボタンオブジェクトは下図のような階層になっています。
先にUI表示の拡大縮小設定を変更しておきましょう。[Hierarchy]ウィンドウ > Canvas >
を選択。[Inspector]ウィンドウ > Canvas Scaler (Script) パネルの設定を変更します。
次にToggleボタンを設定です。画面右下に配置してサイズを調整しました。[Scene]ビューで観ると下図の通りです。
WebGLビルド
今回作成したシーンをWebGLでビルドしてみました。画像クリックでファイルがダウンロード、再生されます。（ファイルサイズ：約15MB）
画面右下にあるチェックボックスでマウス移動とカメラの回転方向を反転できます。
参考Webサイト
今回の記事はこちらのブログ内容を参考にさせていただきました！
【Unity】カメラを回転させるメモ – vaguely
