Categories: Unity

Unity:マウスホイールでカメラの前後移動(ドリーイン、ドリーアウト)を行う

今回はマウスホイールでカメラの前後移動(ドリーイン、ドリーアウト)をスクリプトで制御する方法を試してみました。

ホイール回転を取得してカメラを移動する

まずはシンプルにマウスホイールを回転してカメラの前後移動を行います

シーンの作成

これまでの記事で使用している Area Light でライティングを行った部屋のシーンを使用します。

スクリプト

前後移動のスピードを変えられるように変数 speed を用意しました

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CameraDolly : MonoBehaviour
{
    // マウスホイールの回転値を格納する変数
    private float scroll;
    // カメラ移動の速度
    public float speed = 1f;

    // ゲーム実行中の繰り返し処理
    void Update()
    {
        // マウスホイールの回転値を変数 scroll に渡す
        scroll = Input.GetAxis("Mouse ScrollWheel");

        // カメラの前後移動処理
        //(カメラが向いている方向 forward に変数 scroll と speed を乗算して加算する)
        Camera.main.transform.position += transform.forward * scroll * speed;
    }
}

完成したスクリプトを[Inspector]ウィンドウで確認。speed フィールドに初期値の1が入っています。

動作確認

マウスホイールの回転に合わせてカメラが前後移動できるようになりました。

カメラの前後移動を制限する

カメラの移動範囲の制限方法を色々方法を考えたのですが、色々調べたもののよくわからなかったので、今回はコライダーを使った当たり判定で制限することにしました。

コライダーの配置

カメラ、ドリーイン、ドリーアウトの限界にSphere コライダーコンポーネントを配置します。
[Hierarchy]ウィンドウ > [Create] > Create Empty を選択して、空オブジェクトを2つ作成。名前を次のように変更します。

  • Dolly In Limit -ドリーイン限界位置のコライダー
  • Dolly Out Limit ドリーアウト限界位置のコライダー
[Inspector]ウィンドウ > Add Componen > Physics > Sphere Collider を選択。

Sphere Collider コンポーネントは Is Trigger のチェックを入れておきます。

MainCamera にもコライダーを追加。[Scene]ビューでシーンを右側から見ると、コライダーを配置した状態はこのようになります。左側が Dolly Out Limit、右側が Dolly In Limit コライダーです。

カメラの設定

MainCamera には Rigidbody コンポーネントを追加します。
[Inspector]ウィンドウ > Add Componen > Physics > Rigidbody を選択。

Rigidbody コンポーネントは Use Gravity のチェックを外し、スクリプトで移動を制御するので Is Kinematic のチェックを入れておきます。

スクリプト編集

スクリプトにカメラとコライダーの衝突判定を行い、カメラと衝突したら移動を停止する処理を追加します。
衝突判定は OnTriggerEnter と OnTriggerExit のメソッドで処理。コライダーはあらかじめ変数に格納して、衝突判定時に判別を行っています。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CameraDolly : MonoBehaviour
{
    // マウスホイールの回転値を格納する変数
    private float scroll;
    // カメラ移動の速度
    public float speed = 1f;
    // ドリーインの限界判定フラグ
    private bool dollyInLimit = false;
    //ドリーアウトの限界判定フラグ
    private bool dollyOutLimit = false;
    // ドリーインの限界判定コライダーを格納する変数
    public Collider dollyInLimitCol;
    // ドリーアウトの限界判定コライダーを格納する変数
    public Collider dollyOutLimitCol;

    // ゲーム実行中の繰り返し処理
    void Update()
    {
        // マウスホイールの回転値を変数 scroll に渡す
        scroll = Input.GetAxis("Mouse ScrollWheel");
        //ドリーインの限界でホイールスクロール値が負の場合
        if (dollyInLimit && scroll > 0)
        {
            // カメラの前後移動処理を行わない(0を加算して移動停止)
            transform.position += transform.forward * 0;
        }
        //ドリーアウトの限界でホイールスクロール値が正の場合
        else if (dollyOutLimit && scroll 

コンポーネントの設定

Main Camera を選択して[Inspector]ウィンドウ > CameraDolly (Script) コンポーネントを確認。
dolly In LimitCol とdolly Out LimitCol フィールドにそれぞれコライダーを割り当てます。

UIスライダーでドリー速度を変更できるようにする

最後にドリー速度をUIスライダーで変更できるようにしました。スクリプト CameraDolly にスライダー処理を追加するのがシンプルなのですが、今回はスライダーの処理を分けて別のスクリプト ChangeSliderValue を作成して、スライダーの値をスクリプト CameraDolly に渡すようにしました。

スライダーオブジェクトの作成

[Hierarchy]ウィンドウ > [Create] > UI > Slider を選択。[Inspector]ウィンドウ > Slider (Script) を選択。Min Value とMax Value を設定。 Whole Numbers にチェックを入れて5段階に切り換えるようにしました。

スクリプト編集

スクリプトは Canvas 割り当てます。[Inspector]ウィンドウ > [Add Component]をクリック。名前 ChangeSliderValue でスクリプトを作成。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// GUIコンポーネントの関数を使用する宣言
using UnityEngine.UI;

public class ChangeSliderValue : MonoBehaviour
{
    // スライダーコンポーネントを格納する変数
    public Slider slider;
    // スクリプト CameraDolly コンポーネントを格納する変数
    public CameraDolly cameraDolly;

    // ゲーム実行中の繰り返し処理
    void Update()
    {
        // スライダー値をスクリプト CameraDolly の変数 speed に渡す
        cameraDolly.speed = slider.value;
    }
}

コンポーネントの設定

Canvas を選択して[Inspector]ウィンドウ > Change Slider Value (Script) を確認します。
Slider フィールドに作成したスライダーオブジェクト、Camera Dolly フィールドにはスクリプト CameraDolly を割り当ててある Main Camera をドラッグ&ドロップで割り当てます。

WebGL ビルド

完成したシーンを WebGL でビルドしました。画面右下のスライダーでカメラ前後移動の速度を変更できます。
画像クリックで再生されます。(ファイルサイズ:約16MB)

参考Webサイト

今回の記事はこちらのWebサイトを参考にさせていただきました。
【Unity】マウスホイールでカメラの向きにドリーイン・ドリーアウトさせる

Unityで、マウスホイールでカメラをドリーイン・ドリーアウトする方法を紹介しています。 カメラの正面に向かってドリーインするところがポイントです。
corevale