こんにちは、ともくんのゲーム作り部屋にようこそ！
このページでは、
「カメラにアニメーションを付けてみたい！」
「カメラにもっと動きを付けたい！」
というお悩みの方に向けた内容となっています。
Unityでゲーム画面を表示させるのに使うカメラオブジェクトには、アニメーションの機能を付けることができます。
アニメーションとは、通常フレーム毎に画像や画面を切り替えて動きを付けるものですが、カメラのアニメーションも同じように、フレーム毎に座標や向きを変動させることで、様々な動きを付けることができます。
例えば、プレイヤーが見上げた時の視点の移動や、キャラクターの登場シーンのカメラワークといった際に、アニメーションの機能を活用することができます。
そこで、このページでは、Unityでゲーム画面を映し出すカメラオブジェクトにアニメーションの動きを付ける方法についてまとめていきます。
カメラにアニメーションの動きを付ける方法
カメラオブジェクトにアニメーションを付けるとどんな動きができるのか、また実際にアニメーションを付ける基本的な方法までを紹介していきます。
カメラアニメーションとは？
カメラオブジェクトに、様々な動きのあるアニメーションを付けてあげることをカメラアニメーションといいます。
冒頭でも少し解説しましたが、アニメーションは静止画などの画像を切り替えて表示させることで、パラパラ漫画みたいに動いているように見せる技術のことです。
カメラオブジェクトのアニメーションの場合は、画像ではなくカメラの座標位置や向きを変動させて動きを付けてあげることで、画面に変化を与えることができます。
例えば、カメラを上に移動させて、プレイヤーの上からの視点に切り替える際の動きや、
プレイヤーの遠くから近づく際の動きなどをカメラアニメーションで作ることができます。
なお、Unityのアニメーションの機能については、以下の記事でも解説していますので、良かったら参考にしてみてください。
カメラにアニメーションを付ける基本的な方法
カメラオブジェクトにアニメーションで動きを付ける基本的な方法として、以下の4つの作業を行っていきます。
- Animationファイルを作成する
- キーフレームを設定していく
- アニメーションを再生するタイミングを設定する
- スクリプトからアニメーションを再生する
ここでは、先ほど紹介した通常の視点と上からの視点を切り替える際の動きをアニメーションで作ってみます。
Animationファイルを作成する
まずは、動きを付けるためのAnimationファイル(Animation Clip)を作成していきます。
アニメーションを付けたいカメラオブジェクトを選択した状態で、メニューの「Window」から「Animation」の中の「Animation」を選択します。
すると、以下のようなAnimationウィンドウが開くので、画面の真ん中にある「Create」を選択します。
Animationファイルが作成されるので、名前を決めて保存しておきます。
ここでは、「CameraMove」という名前にしておきます。
これで、カメラの動きを作る新しいAnimation Clipが作成されました。
なお、Animation Clipが作成されると同時に、アニメーションの切り替えなどを行うAnimator Controllerが作成されて、カメラオブジェクトにはAnimatorコンポーネントが自動的にアタッチされるようになります。
キーフレームを設定していく
次に、時間軸におけるキーフレームの設定を行っていきます。
キーフレームとは、アニメーションで動いている際の特定のフレーム地点での位置や向きを指定しているもので、このキーフレームを元にアニメーションの動きを作っていくことになります。
ここでは、キーフレームにカメラの座標位置と回転の向きを指定してアニメーションを作っていきたいので、Animationウィンドウの左側の「Add Property」を選択して、「Transform」の中にあるカメラの「Position」と「Rotation」を+ボタンで追加します。
すると、以下のように、それぞれのプロパティの値が表示されるようになり、また時間軸でキーフレームの地点が表示されます。
デフォルトでは、現在の位置と回転の向きの値が最初の「0:00」と最後の「1:00」の地点に入っていて、最初のキーフレームは現在の位置で問題ないので、最後のキーフレームの地点の値を変更していきます。
「1:00」の時間軸の部分をクリックした後、左側にある録画ボタンをクリックします。
この状態でシーンモードの画面に戻り、カメラの座標位置や回転の向きを変更させると、キーフレームにその変更した値が反映されるようになります。
アニメーションの最後は、オブジェクトの上からの映像を表示させたいので、カメラをオブジェクトの頭上に移動させて、Rotationを回転させてカメラを下向きにしておきます。
これで戻ってもう一度録画ボタンを押して止めて、アニメーションの再生ボタンを押してみると、
上のような動きのあるカメラ映像がループで流れるようになります。
なお、それぞれの時間軸を指定した状態で、「Add keyframe」をクリックすると、その時間に新しくキーフレームを追加することができるので、動きをより複雑化したり、カメラの位置をより細かく指定することができます。
アニメーションを再生するタイミングを設定する
先ほど作成したアニメーションを、再生するタイミングを設定していきます。
まず、デフォルトのままだとアニメーションはループ再生されてしまうため、プロジェクトウィンドウから「CameraMove」のAnimation Clipを選択して、インスペクターウィンドウの「Loop Time」の項目のチェックを外しておきます。
次に、Animation Clipを作成した際に一緒に作成されるAnimator Controllerをプロジェクトウィンドウから開きます。
このAnimator Controllerは、Animation Clipをまとめているもので、アニメーションの切り替えや再生のタイミングなどを設定することができます。
現時点では、「Entry」から「CameraMove」に線が繋がっていますが、これだとゲーム開始と同時にアニメーションが自動で再生されてしまうため、少し変更を加えていきます。
画面の何も無い部分を右クリックして、「Create State」の中にある「Empty」を選択して新しいStateを作成します。
このStateはダミーとなるので、特に設定はせず「Start」などの名前に変更しておきます。
そして、緑の「Entry」を右クリックして、「Set StateMachine Default State」を選択して、先ほど作った「Start」に矢印を繋いでおきます。
これで、アニメーションが自動的に再生することが無くなりました。
次に、逆再生のAnimation Clipも作成して、視点を戻す動きも作りたいので、「CameraMove」を選択して、「Ctrl+D」で複製しておきます。
この複製されたStateの名前を「CameraReverseMove」に変更し、インスペクターウィンドウのSpeedの値を「-1」にして逆再生するように設定しておきます。
これで、Animator Controller側での設定は完了しました。
なお、「CameraMove」と「CameraReverseMove」のアニメーションには、線が繋がっていませんが、ここでは直接スクリプトから再生するようにしていきます。
スクリプトからアニメーションを再生する
最後に、カメラオブジェクトにスクリプトをアタッチして、アニメーションを再生する処理を行っていきます。
ここでは、スペースキーを押したらアニメーションが再生されて、カメラが移動して視点が変わるという処理を作っていきます。
using UnityEngine;
public class CameraController : MonoBehaviour
{
Animator animator;
int direction = 1; // どちらのアニメーションを再生するかを判定する
bool isMoving = false; // カメラが動いているかどうかを判定する
Vector3 prePos;
void Start()
{
animator = GetComponent<Animator>();
}
void Update()
{
// スペースキーを押した場合
if (Input.GetKeyDown(KeyCode.Space) && isMoving == false)
{
// 上にカメラを移動する
if (direction == 1)
{
animator.Play("CameraMove"); // 通常のアニメーションを再生する
direction = -1;
isMoving = true;
}
// 下にカメラを移動する
else if (direction == -1)
{
animator.Play("CameraReverseMove"); // 逆再生のアニメーションを再生する
direction = 1;
isMoving = true;
}
}
// カメラが動いているかどうかをチェック
if (prePos != transform.position)
{
isMoving = true;
}
else
{
isMoving = false;
}
prePos = transform.position;
}
}スペースキーを押した場合の処理の中で、23行目と30行目でAnimatorコンポーネントのPlayメソッドで、引数に指定したアニメーションを再生する処理を行っています。
また、再生と逆再生を判定する変数としてint型のdirectionを使い、カメラが動いているかどうかもbool型のisMovingで判定するようにしています。
これで、アニメーションが再生されている間は、次のアニメーションが動かないようになり、またカメラが上に移動した状態でスペースキーを押したら、通常の状態に戻ってくるという処理を作っています。
実際にゲームを実行してみると、
スペースキーを押すと、カメラが上に移動して頭上からの視点になり、もう一度押すと最初の視点に戻るようになります。
子オブジェクトに入れて使用する
ここまででカメラにアニメーションを付けることができましたが、一つ注意しておくべきことがあります。
アニメーション機能では、カメラオブジェクトのPositionとRotationに直接値を入れて変動させる処理を行っています。
そのため、カメラオブジェクトをインスペクターウィンドウやスクリプトから直接移動させたり回転させたりしてしまうと、想定と異なるアニメーションの動きになってしまいます。
そこで、カメラオブジェクトを子オブジェクトに入れておくことで、アニメーションで設定するPositionやRotationの値を、親オブジェクトとの相対位置として指定することができます。
これにより、カメラではなく親オブジェクトを動かすことで、子オブジェクトのカメラの位置も移動することができますが、カメラのアニメーションは親オブジェクトからの位置になるため影響しなくなります。
例えば、プレイヤーにカメラを追従させるような処理を作る際に、プレイヤーの子オブジェクトにカメラを配置してから、カメラのアニメーションを作成していきます。
すると、
プレイヤーを移動させながらでも、視点移動するといったアニメーションを付けることができます。
まとめ
このページでは、Unityでカメラにアニメーションの動きを付ける方法についてまとめていきましたが、いかがでしたでしょうか？
カメラにアニメーションを付ける場合は、カメラオブジェクトのAnimation Clipを作成して、キーフレームで位置や回転の向きを変動させることでできます。
また、カメラを子オブジェクトに入れておくことで、親側で移動や回転の処理を作ることができます。
視点の移動やゲーム内での迫力あるシーンなどを作るのに、アニメーションは非常に活用できます。
最後までお読みいただきまして、ありがとうございました！
コメント