マナビエンタただいまアップデート中!

【Unity】車のカメラの切り替えを実装

MEMO
使用しているバージョン:Unity 2019.4.10f1

今回は、Unityにおけるカメラ切り替えの実装をしてみます。

自分が今作成しているゲームで、車の前方と後方の2方向にカメラをつけたいと思ったのがきっかけです。

それでは早速やってみましょう!

使用させていただいているAsset
参考 POLYGON -Starter PackUnity Asset Store

今回実現しようと思っている機能はこんな感じ。

よくある、3人称視点の車の前方カメラと、バック時の後方カメラを切り替えるやつですね。

これらのカメラ切り替えに必要なのはおそらくこんなオブジェクトとスクリプトたち

必要なもの
・車オブジェクト
・Cameraオブジェクト(前後)
・Canvasオブジェクト
・カメラ切り替えのスクリプト

車オブジェクトとカメラを追加

まずは、車オブジェクトとCameraオブジェクトをSceneに追加します。

名前はわかりやすいようにFrontCameraBackCameraにしておきます。他の角度のカメラをつけたい場合はその場所や特性に応じたカメラの名前をつけてあげるとわかりやすいと思います。

カメラの調整

次に、カメラの調整をします。

FrontCameraとは名ばかりですが、今回は3人称の設定なので、車後方から見た視点に前方のカメラを設置します。これを応用すれば一人称のカメラ設定もできるはずです。(Apexみたいに手の動きとかを見せるにはまた違う設定が必要そう?)

前方のカメラ画角はこんな感じにしました。カメラの位置を合わせる時ですが、自分でカメラを頑張って動かすのは中々に酷なのでショートカットを使うと便利です。

カメラ設定のショートカット
command+shift+F

後方のカメラはこんな感じでいいですね!

Hierarchyで任意のカメラを選んでいる場合、その映像がちょこっとSceneの端に出ます。しかし、もっと細かく確認したい場合は任意のCameraオブジェクトのInspector > Target Display から、表示するディスプレイを選んで、Gameシーンの方でディスプレイの切り替えをすれば確認できます。

Target Displayは後々カメラ切り替えの時に設定する必要があるので、特に気にならない人はそのままにしておいたほうが楽だと思います。

車とカメラに親子関係を持たせる(追従機能)

車がカメラについていく(追従する)ようにします。スタートと同時にカメラだけ置いてけぼりなんてのは悲しいので。

追従機能の実装に特別なスクリプトは必要ありません。(僕の知っている限りでは)
もちろんスクリプトで実装もできると思いますが、少なくとも今回のカメラ切り替えの実装時点では必要がないので、親子関係だけで進めていきます。

しん

もしかしたら親子関係だけだと後々UIとかの面で面倒ごとが起こったりするのかも…?

親子関係を持たせるには、子としたい要素(この場合”カメラ”)を親としたい要素(この場合”車”)にドラッグ&ドロップするだけです。

本当はGIFで動きのある画像にしたいけど、なんか画像荒くなってやめました…

これでひとまずオブジェクトの設置はおしまいです!

カメラを映すCanvasオブジェクトを設定する

カメラの切り替えをするために必要になるのが映すカメラを決めるCanvasオブジェクト

僕も詳細なことまでわかっているわけではないのですが、UIやカメラなど、ゲーム画面に映るものはCanvasと呼ばれるオブジェクトにくっつけて映します(個人的なイメージ)

兎にも角にも、Canvasオブジェクトが必要なので追加しましょう。

Hierarchy > UI > Canvas から生成して、FrontCameraの子要素として追加します。

次に、Canvas > Inspector > Canvas > Render Mode > Screen Space – Camera を設定し、Render Camera の項目に Front Cameraを設定します。

カメラ切り替えのスクリプトを記述

次に、カメラ切り替えのスクリプトを記述します。

カメラ切り替えのスクリプトはこちらの記事を参考にして作成しました。
参考 カメラの表示を切り替える方法もぎブログ

カメラ切り替えのスクリプト

今回はCameraSwitchという名前のスクリプトを作成して記述します。

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

public class CameraSwitch : MonoBehaviour
{
    public Camera FrontCamera;
    public Camera BackCamera;

    public GameObject CameraSwitchCanvas;

    // Start is called before the first frame update
    void Start()
    {
        BackCamera.enabled = false; //初めは後方カメラをオフに
    }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetKey(KeyCode.Q)) //Qが押下された時
        {
            Debug.Log("switching camera!");
            BackCamera.enabled = true; //後方カメラをオン
            FrontCamera.enabled = false; //前方カメラをオフ
            CameraSwitchCanvas.GetComponent<Canvas>().worldCamera = BackCamera; //キャンバスに映すカメラを後方カメラにする
        }
        else
        {
            Debug.Log("camera!");
            BackCamera.enabled = false; //後方カメラをオフ
            FrontCamera.enabled = true; //前方カメラをオン
            CameraSwitchCanvas.GetComponent<Canvas>().worldCamera = FrontCamera; //キャンバスに映すカメラを前方カメラにする
        }
    }
}

カメラ切り替えの記事をほとんど参考にさせていただきました。(ありがとうございます!)

本当に動作しているかより確認しやすくするため、それぞれの条件分岐の先頭にDebug.Log()を用いてコンソールに返事が返ってくるようにしました。実行した時に画面が切り替わっていなくても、条件分岐に辿り着いているかどうか確かめるためです。

アタッチにはEmptyオブジェクトを

スクリプトは、特定のオブジェクトにアタッチしたい場合でない限り、Emptyオブジェクトにアタッチしておきます

特定のオブジェクトにつけることももちろんありますが、オブジェクトを操作するスクリプトをオブジェクトにつけるとこんがらがってしまうので、僕はつけないようにしています。(まだ初心者ですが、、)

ここではCameraSwitcherというEmptyオブジェクトを作成しておきます。

CameraSwitcherに作成したCameraSwitchスクリプトをアタッチし忘れないように注意してください。

Displayを同じにしないと切り替わらない!

注意
カメラの切り替えを実装するためにそれぞれのCameraオブジェクトのTarget Displayは同じDisplayにしておいてください!

僕はこれに気づかず数10分無駄にしたので…

カメラ切り替えの実装完了

これで完成です!

こんな感じでQを押すとバックカメラに切り替わるようになりました。

コンソールにはデバッグのために記述した文字列が返されているので、きちんと動作していることがわかるかと思います。

実行してみた後に、

There are 2 audio listeners in the scene. Please ensure there is always exactly one audio listener in the scene.

みたいな警告が出た場合には、複数オブジェクトにAudio Listenerが適用されている可能性があるので、Cameraオブジェクトを選んで Inspector > Audio Listener からチェックマークを外してみてください。

今回のまとめ

STEP.1
車オブジェクトとCameraオブジェクトを追加
Sceneに車オブジェクト1つとCameraオブジェクトを前方用と後方用の2つ追加します。
STEP.2
車とカメラに親子関係を持たせる
Cameraオブジェクト2つを車オブジェクトにドラッグ&ドロップして、親子関係を持たせます。(追従機能)
STEP.3
Canvasオブジェクトを追加する
カメラ切り替えに必要なCanvasオブジェクトを追加します。
STEP.4
カメラ切り替えのスクリプトを記述
カメラ切り替えのスクリプトを作成し、事前に作成しておいたCameraSwitchオブジェクトにアタッチします。
STEP.5
実装完了!

実際に動かしてみて、エラーがなければ完成です

参考文献

とても参考にさせていただきました。ありがとうございました。

参考 カメラの表示を切り替える方法もぎブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA