【Unity】カメラのズームインやズームアウトの処理の作り方

カメラを使ったズーム処理 Unity

こんにちは、ともくんのゲーム作り部屋にようこそ!

このページでは、

「カメラのズーム処理を作りたい!」

「マウスホイールを使ってズームしたい!」

というお悩みの方に向けた内容となっています。

ゲームの中で、マウスホイールなどを使ってゲーム内をズーム表示させたりすることがあります。

Unityでズーム表示する場合は、カメラオブジェクトに対して、視野角(Field of View)を狭めたり拡げたりすることで、ズームインやズームアウトを行うことができます。

また、2Dゲームでは、平行投影法(Orthographic)で撮影されるので、カメラのビューポイントのサイズ(Size)を上げたり下げたりすることで、ズーム処理を作ることができます。

そこでこのページでは、Unityでスクリプトからズーム処理を行う方法を、3Dゲームと2Dゲームのそれぞれでまとめていきます。

この記事を書いた人

ゲーム作りを学び始めた一児のパパです。
このブログは、子供から「ゲームを作ってみたい!」と言われ、非プログラマーでゲーム作りをしたことない僕が、ゲーム作りの本を読んで独学でゲーム開発を学んでいるブログです。
同じように初めてゲーム作りをしている方と一緒に学んでいけるようなブログに出来たらいいなと思っています。
また、「このコードはおかしい」とか「もっと良い書き方があるよ!」などあれば、どんどん指摘して頂けると助かります。

3Dでカメラのズーム処理

まずは、多くの3Dゲームで使われるPerspective(透視投影)でのズーム処理について紹介していきます。

視野角(Field of View)の値を変動させていく

3Dゲームでは、カメラのField of Viewという視野角の値を変動させることで、ズーム処理を行うことができます。

この視野角は、カメラから撮影範囲を見たときに、どのくらいの角度まで撮影されるかを決めている項目になっています。

デフォルトでは60度の値になっていますが、30度と数字を小さくすると視野角が狭まりズームインされて、反対に90度と数字を大きくすると視野角が広がるのでズームアウトされます。

Field of View = 30
Field of View = 60
Field of View = 90

そのため、3Dゲームで使われるPerspective(透視投影)の場合は、この視野角(Field of View)の値を変動させて、ズーム処理を行うことができます。

なお、Field of View Axisの項目で、この視野角を垂直方向で決めるか、水平方向で決めるかを設定することができます。

  • Vertical:垂直方向で視野角を決める
  • Horizontal:水平方向で視野角を決める

スクリプトからズーム処理を作る

ここでは、実際にマウスホイールを使って、ズームインやズームアウトする処理を作っていきます。

カメラに対して、以下のスクリプトをアタッチしていきます。

using UnityEngine;

public class CameraController : MonoBehaviour
{
    float scrollSpeed = 8.0f;

    void Update()
    {
        float scrollWheel = Input.GetAxis("Mouse ScrollWheel"); // マウスホイールの回転量を取得

        // マウスホイールを回転させた場合
        if (scrollWheel != 0)
        {
            Camera.main.fieldOfView -= scrollWheel * scrollSpeed;   // ズーム処理
        }
    }
}

9行目で「Input.GetAxis」を使って、マウスホイールによる回転量を取得しています。

このGetAxisメソッドは、様々な入力情報から値を取得できるメソッドで、引数に「Mouse ScrollWheel」と記述することで、マウスホイールをに回すとの回転量、手前に回すとの回転量をfloat型で取得することができます。

そして、14行目でfieldOfViewの値に対して、マウスホイールの回転量に任意のズーム速度を掛け合わせた値を引いてあげることで、マウスホイールを奥に回すとズームインされて、手前に回すとズームアウトされる処理を作っています。

実際にゲームを実行してみると、

マウスホイールを使って、ゲーム内でズームすることができています。

なお、このカメラには「MainCamera」のタグを設定していますが、異なるカメラの場合はGetComponentなどでCameraコンポーネントを先に取得するようにしてください。

ズーム処理に制限をかける

先ほどのズーム処理だと、永久にズームができてしまうので、以下のようにズーム制限を加える処理も作ってみました。

using UnityEngine;

public class CameraController : MonoBehaviour
{
    float scrollSpeed = 8.0f;

    void Update()
    {
        float scrollWheel = Input.GetAxis("Mouse ScrollWheel");

        if (scrollWheel != 0)
        {
            float targetFOV = Camera.main.fieldOfView - scrollWheel * scrollSpeed;  // 代入予定の視野角
            Camera.main.fieldOfView = Mathf.Clamp(targetFOV, 30.0f, 90.0f); // 範囲内の視野角の値を代入
        }
    }
}

先ほどの変更点として、13行目でfieldOfViewに代入予定の値を別の変数targetFOVに入れておきます。

そして、14行目でMathf.Clampメソッドを使って、最小の角度と最大の角度を指定して、その範囲内で動くように制限をしています。

このMathf.Clampメソッドは、引数に以下のように記述することで、指定した範囲の中で数値を返してくれるメソッドです。

Mathf.Clamp(float value, float min, float max);

value:判定したい数値
min:最小の数値
max:最大の数値

Mathf.Clampメソッドは、範囲内であればその数値自体を返してくれますが、最小の数値よりも小さい場合は最小の数値を返し、最大の数値よりも大きい場合は最大の数値を返すことになります。

これでもう一度実行してみると、

先ほどと同様にズームができますが、ある程度ズーム処理を行うとズームされなくなるように制限がかかっています。

2Dでカメラのズーム処理

次に、2Dゲームの多くで使われているOrthographic(平行投影)でのズーム処理について紹介していきます。

Sizeの値を変動させていく

2Dゲームでは、カメラのビューポイントのサイズであるSizeの項目を変動させることで、ズーム処理を行うことができます。

Sizeの値を変更すると、シーンビューに表示されているカメラ領域が変わることになります。

デフォルトが「5」ですが、この数値を「3」など小さくすると、表示領域が小さくなりズームインされ、反対に数値を「8」など大きくすると、表示領域が大きくなりズームアウトされることになります。

Size = 3
Size = 5
Size = 8

そのため、2Dゲームで使われるOrthographic(平行投影)の場合は、このビューポイントのサイズ(Size)の値を変動させて、ズーム処理を行うことができます。

スクリプトからズーム処理を作る

ここでは、2Dゲームでスクリプトからマウスホイールを使ったズーム処理を作ってみます。

以下のスクリプトをカメラオブジェクトにアタッチしておきます。

なお、先ほどと同様に、MainCameraで無い場合は、GetComponentなどで別途コンポーネントの取得が必要です。

using UnityEngine;

public class CameraController : MonoBehaviour
{
    float scrollSpeed = 3.0f;

    void Update()
    {
        float scrollInput = Input.GetAxis("Mouse ScrollWheel"); // マウスホイールの回転量を取得

        // マウスホイールの回転量がある場合
        if (scrollInput != 0)
        {
            Camera.main.orthographicSize -= scrollInput * scrollSpeed;  // ズーム処理
        }
    }
}

まず、3Dの時と同じく、9行目で「Input.GetAxis」を使って、マウスホイールによる回転量を取得しておきます。

そして、14行目でorthographicSizeの値に対して、マウスホイールの回転量に任意のズーム速度を掛け合わせた値を引いています。

ビューポイントのサイズ(Size)は、この「orthographicSize」という変数で管理されているため、この値を変動させることで、ズーム処理を行うことができます。

実際にゲームを実行してみると、

マウスホイールを使ったズーム処理が、2Dゲームでも実装できました。

滑らかにズーム処理を行う

3Dの時はズームを制限する処理を加えましたが、他にもズーム処理を滑らかにするということもできます。

そこで、先ほどの2Dゲームのズーム処理に対して、少し修正を加えてみます。

using UnityEngine;

public class CameraController : MonoBehaviour
{
    float scrollSpeed = 3.0f;
    float currentVelocity;
    float targetSize = 0;

    void Update()
    {
        float scrollInput = Input.GetAxis("Mouse ScrollWheel");

        if (scrollInput != 0)
        {
            targetSize = Camera.main.orthographicSize - scrollInput * scrollSpeed;    // 目的とするビューポイントのサイズ
        }

        if (targetSize != 0)
        {
            Camera.main.orthographicSize = Mathf.SmoothDamp(Camera.main.orthographicSize, targetSize, ref currentVelocity, 0.05f);  // 滑らかにズーム処理を行う
        }
    }
}

先ほどの変更点として、15行目でビューポイントのサイズとして代入予定の値を変数targetSizeに入れておきます。

そして、targetSizeが0以外の場合は、23行目でMathf.SmoothDampメソッドを使って、徐々に目標のorthographicSizeに値を近づけることで、滑らかにズームする処理を作っています。

このMathf.SmoothDampメソッドは、引数で以下のように記述を行います。

Mathf.SmoothDamp(float current, float target,ref float currentVelocity, float smoothTime);

current:現在の値
target:目標となる値
currentVelocity:現在の速度を取得する変数(参照渡し)
smoothTime:到達するまでのおおよその時間(秒数)

今回の場合、currentに現在のorthographicSizeの値を入れて、targetに目標とするorthographicSizeの値を設定します。

また、速度を取得できる変数currentVelocityは、「ref」を頭に付けて参照渡しで指定します。

これでゲームを実行してみると、

先ほどと比べて、滑らかにズーム処理を行うことができています。

まとめ

このページでは、Unityでカメラのズーム処理を行う方法についてまとめていきましたが、いかがでしたでしょうか?

3Dでカメラのズームを行う場合は、カメラの視野角であるField of Viewの値を変動することで、ズーム処理を作ることができます。

また2Dでは、カメラのビューポイントのサイズであるSizeの値を変動させていくことで、ズームイン・ズームアウトを行うことができます。

他にも、滑らかにズーム処理を行ったり、ズームの制限をかけたりなど、様々な処理を作ることができます。

最後までお読みいただきまして、ありがとうございました!

コメント