【Unity】Cinemachineを使って簡単にカメラを制御するばい!【概要】

【Unity】Cinemachineを使って簡単にカメラを制御するばい!【概要】

Unityではシーン内のオブジェクトをカメラに映してゲーム画面を描画しています。

このとき、カメラオブジェクトをスクリプトから制御したり、Timelineから制御したりして良い感じの絵作りをしていくのですが、実は「Cinemachine」を使うことによってさらに簡単に、そして幅広い表現を行うことができます。すごい。

Cinemachineでは仮想カメラと呼ばれるゲームオブジェクトを複数配置し、キャラクターを追いかけたり、キャラクターの方を向いたり、指定したパスに沿ってカメラを動かしたり、何なら手ブレまで表現するし、ダメージを受けた時に画面を揺らすなんてこともできます。すごい。

このページではそんなCinemachineの概要を紹介します。

 

 

環境

macOS 10.15 Catalina

Unity2020.1.14f1

Cinemachine 2.6.3

 

参考にした情報

Unity公式のチュートリアル動画がUnity Learnにあるのでこちらをざっと眺めてみるといいかも。英語なので字幕を表示したり画面に表示された内容で概要を掴むべし。

 

日本語で確認するなら青木ととさんの『【復習】10分でCinemachine』の動画がわかりやすくておすすめです。

 

文章で読むならLIGHT11さんの『【Unity】Cinemachine入門!スクリプトなしでカッコいいカメラワークを作る』の記事がいいかも。

 

Cinemachineとは

Cinemachine(シネマシン、シネマシーン)とは、Unityでカメラを操作するためのモジュールで、映像作品で使われるカメラワークを実現する機能です。Cinema(映画) + Machine(機械)の造語になっており(たぶん)、その名の通り映画のような臨場感あふれるカメラの動きを表現することができます。

ゲームはユーザの操作を受け取って映像を描画しており、ある意味ではインタラクティブな映像作品です。映像作品である以上はカメラをいい感じに動かしてユーザーに情報を伝えやすくしたいところ。

映像作品に使われるようなカメラワークを取り入れることでより魅力的な画面を作り出すことができます。例えば基本となるカメラワークの種類や概要については以下の記事でもまとめているので、よかったらこちらもご覧ください。Cinemachineを使うにあたって基礎を押さえておきたい時に。

 

自力でUnityデフォルトのカメラをスクリプトやTimelineから制御するのは結構ダル……ゔうん大変なので、Cinemachineを使ってより少ないステップで実現できるようになると、効果的な映像を短時間で表現することができます。

Cinemachineは無料でありながらかなり高機能で、何ができるのかを把握するために多少の学習コストはかかります。ただ、一度自分でシーンを作って動かしてみると概要を掴みやすいので、インストールが終わったら適当に仮想カメラを配置してキャラクターを動かしてみるだけでも楽しくなります。スクリプト書かなくてもキャラクターを追いかけてくれるのは感動ものです(笑)

という訳でインストールとちょっと動かすところまでやってみましょうか。

 

Cinemachineのインストール

CinemachineはPackage Managerからインストールします。画面上部のメニューバーから [Window] -> [Package  Manager] を選択します。

毎度お馴染みPackageManagerを開く
毎度お馴染みPackageManagerを開く

 

Package Managerが表示されたらパッケージの場所を選択します。「Packages…」のプルダウンから [Unity Registry] を選択しましょう。2020.1より前のバージョンだと「All packages」になっていればOKです。

パッケージの場所を選択
パッケージの場所を選択

 

表示された「Cinemachine」のパッケージを選択し、画面右下に表示されている [Install] のボタンをクリックします。

インストール
インストール

 

これでインストールはOK。

メニューバーに「Cinemachine」の項目が追加されました。最初はこのメニューの多さに面食らって「いやこれ覚え切れるかな……」と不安になりましたが、一度に全部使う訳じゃないので大丈夫です。ちょっとずつ使っていけばOKです。

項目が追加された
項目が追加された

 

Cinemachineを使ってみる

インストールが終わったし、早速使ってみるか! と思い立ったあなたの前に立ち塞がるのは先ほど紹介したメニューの多さ。何から手をつけていいやら呆然とすること請け合いです。

まずは「仮想カメラ」を配置するところからやってみましょうか。

 

仮想カメラの配置

任意のシーンを開いている状態で、画面上部のメニューバーから [Cinemachine] -> [Create Virtual Camera] を選択して仮想カメラ(バーチャルカメラ)のオブジェクトを作成します。

仮想カメラのゲームオブジェクトを作成すると、シーンに配置されていたメインカメラに「Cinemachine Brain」のコンポーネントがアタッチされ、ヒエラルキーウィンドウでアイコンが表示されます。

仮想カメラの作成
仮想カメラの作成

 

「CM vcam1」が作成された仮想カメラのゲームオブジェクトです。CineMachine Virtual Cameraの略かな。

仮想カメラ作成時に「Cinemachine Brain」のコンポーネントがアタッチされるカメラがどう選ばれるかというと、

  1. 「MainCamera」のタグがついているカメラが優先
  2. 「MainCamera」のタグがついたオブジェクトが複数あれば「Main Camera」という名前のオブジェクトが優先
  3. 該当する名前がなければ「Camera」コンポーネントがあるゲームオブジェクトで名前の早い順で優先
  4. 「MainCamera」のタグのカメラがない場合は「Camera」コンポーネントがあるゲームオブジェクトで名前の早い順で優先

のようです。ここは自分で仮想カメラを作ったり消したりして確かめた部分なので内部的な動きまで確認している訳ではないことに注意。

 

ところで仮想カメラって?

仮想カメラを作りましたが、そもそも仮想カメラとは一体……? となるのがCinemachineの入り口です。

仮想カメラはカメラの位置や角度、あるいはオブジェクトを追従する設定、カメラを向けるオブジェクトの設定、手ブレの設定などを保持しているオブジェクトです。シーンを映し出しているカメラはひとつですが、仮想カメラが持っている設定をシーンのカメラに適用することで画面に映る内容を切り替えていきます。

こうすることでシーンのカメラを増やすことなく様々なカメラワークを実現することができるんです。仮想カメラは処理能力をほとんど消費しないように設計されている(マニュアル参照)ようなので、パフォーマンス面でもメリットが大きいんです。

 

例えば以下のSceneビューのように仮想カメラを配置したとします。設定アイコンと赤いカメラが半分ずつ表示されているのが仮想カメラです。図の中の「仮想カメラ①」は現在有効(Live: ライブ)になっている仮想カメラで、いつものカメラのアイコンが表示されます。

仮想カメラの位置関係
仮想カメラの位置関係

 

仮に「仮想カメラ②」が有効になった場合は、以下のようにシーンのカメラが「仮想カメラ②」の位置に移動します。シーンのカメラがひとつであっても、設定を持っている仮想カメラによってシーンのカメラを動かしていくイメージです。

仮想カメラの位置関係その2
仮想カメラの位置関係その2

 

ここでは仮想カメラが持っている情報は位置と角度だけだったのでTransformの値がそのままシーンのカメラに適用されます。仮想カメラではキャラクターを追いかける設定もできるので、その場合はキャラクターとの位置関係を計算した上でカメラの位置を決めていきます。

仮想カメラそのものが映像を描画している訳ではないので、仮想カメラ同士を切り替える場合はフェードイン/フェードアウトで画面を切り替えるのではなく、仮想カメラによって計算されている位置から別の仮想カメラで計算される位置までカメラオブジェクトがアニメーションする形で移動します。これは「ブレンド」と呼ばれていて、2つの仮想カメラの設定を繋ぐような形で表現されます。

もちろん、ブレンドすることなくカットを瞬時に切り替えることもできるので、表現したい方法に合わせて選択できます。

 

オブジェクトを配置

簡単にゲームオブジェクトを配置して仮想カメラの動きを確かめてみます。「Plane」と「Sphere」あたりを配置してみて、「Sphere」を映し続ける感じで仮想カメラを動かしてみます。

よく見る配置
よく見る配置

 

カメラにオブジェクトを映し続けるには、『CinemachineVirtualCamera』コンポーネントの「LookAt」の項目にオブジェクトへの参照をセットします。例えばここでは「Sphere」オブジェクトをヒエラルキーウィンドウからドラッグ&ドロップして「LookAt」にセットしてみます。

オブジェクトをセット
オブジェクトをセット

 

するとGameウィンドウでは以下のように表示されます。なんだかそれっぽい。

下の画像で中央に表示されている黄色の点はターゲットとなるオブジェクトの位置を表しています。青色のエリアはソフトゾーンと呼ばれていて、このエリア内にいる間カメラに映し続けます。外側の赤色のエリアはノーパス(no pass)エリアでターゲットがこのエリアに入らないようにしています。

Gameウィンドウでガイドが表示される
Gameウィンドウでガイドが表示される

 

セットした直後は表示されていませんが、実はデッドゾーンと呼ばれる領域も存在します。『CinemachineVirtualCamera』コンポーネントの「Aim」の項目では、カメラをオブジェクトに向ける(回転させる)ときの設定を行うことができます。この中にデッドゾーンの設定(図の青色の部分)を行う項目があります。

デッドゾーンの設定
デッドゾーンの設定

 

例えば上のようにデッドゾーンの値を変更すると、下の画像のように青色のソフトゾーンの内側に、透明な領域が表示されます。ターゲットとなるオブジェクトがデッドゾーンにいる場合、カメラはターゲットを追いかけません。オブジェクトがソフトゾーンに入ると、デッドゾーンの中に戻すようにカメラを回転させます。

デッドゾーンの表示
デッドゾーンの表示

 

ゲームを実行してカメラの回転を確認

ゲームを実行して確認してみましょ。

ゲーム実行中にSphereオブジェクトの『Transform』のpositionを人力で変更してます。下のgifはX軸方向で変化させていて、Sphereオブジェクトをカメラに映し続けようとしています。また、Sphereオブジェクトがデッドゾーン(ここでは画面中央付近)にある場合はカメラの角度が変わっていない点にも注目です。

横方向の移動をカメラが追いかける
横方向の移動をカメラが追いかける

 

こちらはY軸方向の値を変化させています。Planeオブジェクトに隠れた後でもカメラはしっかりと追い続けます。

縦方向の移動をカメラが追いかける
縦方向の移動をカメラが追いかける

 

Bodyの項目で出る警告

ちなみにここまで触れてきませんでしたが、Bodyの項目で警告が出ているかもしれません。上の方にある「Follow」の項目にオブジェクトへの参照をセットしていない場合、「Followを使わない場合はDo Nothing(何もしない)に変更してください」という趣旨の警告が表示されるので、Bodyのプルダウンから「Do Nothing」を選択しておくとグッド。

警告が出ている
警告が出ている

 

「Do Nothing」を選択すると以下のように警告が消えるとともにプロパティも表示されなくなります。

Bodyでは何もしない
Bodyでは何もしない

 

このBodyプロパティはカメラがターゲットとなるゲームオブジェクトを追いかける時に使う設定です。オブジェクトを追いかけるというとAimの方も似たようなことをしていますが、Aimはカメラ自体の位置は動かさずに回転させて被写体を捉えます。こちらのBodyはカメラ自体の位置を動かしていきます。

試しにちょっと使ってみましょうか。

新しく仮想カメラを作って、先ほど使っていた仮想カメラを非表示にします。新しく作った仮想カメラではFollowの項目に「Sphere」オブジェクトをセットします。

Followの項目にオブジェクトをセット
Followの項目にオブジェクトをセット

 

Bodyの項目ではカメラとオブジェクトとの位置関係をオフセットとして決めることができます。オブジェクトが動いた時にはこの距離を守りながらカメラで追いかけていきます。ここではFollow Offsetの項目でYを [2] に変更しました。

Bodyのプロパティ
Bodyのプロパティ

 

ゲームを実行してカメラの移動を確認

ゲームを実行して確認してみましょ。

Followの場合はカメラ自体が移動しているのが分かります。また、Sphereが移動開始してからほんのちょっと遅れてカメラが移動を開始していることに気付くかもしれません。これはBodyのプロパティで設定されている各軸の「Damping(減衰)」が影響していて、カメラマンが被写体の動きを確認してからカメラごと移動するようなリアルな撮影を表現できます。人間である以上、目で見てから反応するというほんの少しのラグがあるので、それを表現できるんですね。

カメラごと移動して追いかける
カメラごと移動して追いかける

 

この機能はよくチュートリアルなどでスクリプトとして実装する部分です。カメラオブジェクトの位置からプレイヤーオブジェクトの位置を引いてオフセットを取得しておいて、プレイヤーオブジェクトのtransform.positionを毎フレーム確認してカメラの位置を変える、みたいなアレです。

機械的にオブジェクトの動作と完全に同期する場合はスクリプトで実装する時と同じ感じですが、微妙な遅れなどを意図的に表現したい場合にこちらが便利です。参照をセットするだけでいいのが楽ちんですからね。

 

Cinemachineはまだまだ機能がいっぱい!

ここまではCinemachineの基礎の基礎。まだまだたくさんの機能が控えています。

基礎部分でもちょっと覚えることがあったので大変だったかもしれませんが、実際に画面上で動かしてみるとイメージが湧いてくると思います。なので、ちょっとずつ機能を触ってみるのがグッド。このページで紹介したFollowとLookAtを使えるだけでも多少コーディングの負荷も減ります。

他の機能についてはそのうち別のページで紹介したいと思います(願望)

 

     

ゲーム開発の攻略チャートを作りました!

CTA-IMAGE

「ゲームを作ってみたいけど、何から手を付けていいか分からない!」


そんなお悩みをお持ちの方向けに、todoがアプリをリリースした経験を中心に、ゲーム作りの手順や考慮すべき点をまとめたe-bookを作成しました。ゲーム作りはそれ自体がゲームのように楽しいプロセスなので、「攻略チャート」と名付けています。


ゲームを作り始めた時にぶつかる壁である「何をしたら良いのか分からない」という悩みを吹き飛ばしましょう!