Unity簡単2Dゲームの作り方【第3回】キャラクターアニメーションとカメラ追従を実装する | Unity入門の森 ゲームの作り方

Unity簡単2Dゲームの作り方【第3回】キャラクターアニメーションとカメラ追従を実装する

【Unity入門】簡単2Dゲームの作り方|初心者でも作れるジャンプアクション【全6回】

この講座では、Unity初心者の方でも作れる「2D横スクロールアクションゲーム」を作成していきます。

前回まででプレイヤーを左右に動かして地面にいるときだけジャンプできるようにしました。

前回の記事:

Unity簡単2Dゲームの作り方【第2回】プレイヤーの移動とジャンプを実装する
この記事は「初心者でも作れるUnity簡単2Dゲームの作り方講座」の第2回です。前回の記事では完成イメージを確認し、Unity 2Dプロジェクトの作成、Gameビューの16:9設定、旧Input Systemの設定、素材の読み込み、背景・地...

今回は Player が動いているように見せるために、Player の向きを変えて、歩きアニメーションを追加し、さらにゲーム内カメラがプレイヤーを追いかけるようにしていきます。

プレイヤーが進行方向を向くようにする

現在の Player は、左に進んでも右に進んでも見た目の向きが変わらない状態です。

このままでも移動はできますが、右に進むときは右向き、左に進むときは左向きになっていた方が自然です。

では、どのように Player の向きを変えればよいのでしょうか。

最初に思いつくのは Rotation かもしれません。

Scale の X を -1 にして反転させる方法もあります。

ですが今回は、Unity 2D で Sprite を左右反転させるために用意されている SpriteRenderer の Flip を使います。まず、Hierarchy で Player を選択しましょう。

Inspector にある SpriteRenderer コンポーネントを見ると、Flip という項目があります。Flip の X にチェックを入れてみましょう。

すると、Player の画像が左右に反転します。

今回は、この Flip X をスクリプトから切り替えて、Player が進む方向に合わせて向きを変えられるようにします。

スクリプトを書こう

Project ウィンドウから Assets > Scripts フォルダを開き、PlayerController2D をダブルクリックで開きましょう。

開けたら、以下のマーカー部分を追記しましょう。

PlayerController2D

スクリプトの解説

今回追加したのは、Player の向きを変えるための処理です。

まず、次の部分で SpriteRenderer を入れるための変数を用意しています。

次に、Start の中で Player に付いている SpriteRenderer を取得しています。

これで、スクリプトから Player の SpriteRenderer を操作できるようになります。

次に、左矢印キーを押したときの処理を見てみましょう。

左矢印キーを押しているときは、horizontalInput に -1 を入れています。これは前回作成した、左に移動するための処理です。
さらに今回は、playerSprite.flipX = true; を追加しています。

flipX は、SpriteRenderer の Flip X と同じ意味です。

true にすると、Inspector で Flip X にチェックを入れた状態になります。つまり、左矢印キーを押したときに Player の画像を左右反転させています。

次に、右矢印キーを押したときの処理です。

右矢印キーを押しているときは、horizontalInput に数値の1を入れています。これは右に移動するための処理です。
playerSprite.flipX = false; にすると、Flip X のチェックを外した状態になります。つまり、右矢印キーを押したときは、Player の画像を元の向きに戻しています。

今回の処理を簡単にまとめると、次のようになります。

押したキー horizontalInput flipX
左キー -1(左に進む) true(反転する)
右キー 1(右に進む) false(反転しない)

押したキーに合わせて flipX を切り替えることで、Player が進む方向を向くようになります。

動作を確認しよう

ここまでできたら、Ctrl + S でスクリプトを保存します。保存できたら Unity に戻りましょう。ゲームを再生して、左矢印キーと右矢印キーで Player を動かしてみます。

左に移動したときは Player が左を向き、右に移動したときは Player が右を向けば成功です。

Unity6でアニメーションを作ろう

次は、Player が歩いているように見せるために歩きアニメーションを作成していきます。

アニメーションを作ろう

Project ウィンドウの Assets フォルダ内で右クリックをして、Create > Folder を選択します。作成したフォルダの名前を Animations に変更しましょう。

次に、Assets > 横スクロールアクションゲーム画像素材 を開きます。その中にある プレイヤー1 と プレイヤー2 をまとめて選択します。Scene ビューにドラッグ&ドロップしましょう。

すると、アニメーションを保存する画面が開きます。先ほど作成した Animations フォルダを開き、名前を walk にして保存しましょう。

これで、プレイヤー1 と プレイヤー2 を切り替える歩きアニメーションが作成されます。

ここまでできたらゲームを再生して Scene ビューを確認してみましょう。

Scene ビューに配置されたひよこが歩いているように動いていれば成功です(↑の参考動画はゆっくり動いていますが動画化する際のフレーム数調整の影響です。実際はもっと速く動いてると思いますがそれで問題ないです)。

これがアニメーションです。ただし、今アニメーションしているのは、Scene ビューに新しく配置されたオブジェクトです。

このアニメーションを既に作成している Player に使いたいです。

一度再生を止めましょう(再生したままで修正したものは再生終了時に元に戻るので再生を止めてから作業します)

再生を止めたらHierarchy に作成されたアニメーション用のオブジェクトを削除します。

また、Project ウィンドウに プレイヤー1_0 という Animator Controller が作成されています。

これは先ほどアニメーション用に作成したオブジェクトのために自動で作成されたものです。

今回は既に用意しているPlayer に walk アニメーションを使いたいので、この プレイヤー1_0 も削除しておきましょう。

次に、作成された walk を、Hierarchy にある Player にドラッグ&ドロップしましょう。

すると、Player に Animator コンポーネントが追加されます。

これで Player に歩きアニメーションを設定できました。もう一度ゲームを再生してみましょう。

Player が歩くように動いていれば成功です。

ただし、このままだと Player が止まっているときも歩き続けてしまいます。

そこで、Animator の再生速度をスクリプトから制御し、Player が歩いているときだけアニメーションが再生されるようにします。

スクリプトを書こう

Project ウィンドウから Assets > Scripts フォルダを開き、PlayerController2D をダブルクリックで開きましょう。

開けたら、以下のマーカー部分を追記しましょう。

PlayerController2D

スクリプトの解説

ここでは、Player が歩いているときだけアニメーションを再生する処理を追加しています。

まず、次の部分でアニメーションの再生速度を設定する変数を作成しています。

walkAnimationSpeed は、歩きアニメーションの速さです。初期値は 1f なので、通常の速さで再生されます。Inspector から数値を変更できるため、歩きアニメーションが速すぎる、または遅すぎると感じたときに調整できます。

次に、Animator を入れるための変数を作成しています。

Animator は、Player に設定したアニメーションを再生するためのコンポーネントです。

今回は、この Animator の speed をスクリプトから変更して、アニメーションを止めたり再生したりします。

Start の中では、Player に付いている Animator を取得しています。

これでスクリプトから Player の Animator を操作できるようになります。

次に、Update の中を見ていきましょう。

ここでは、最初にアニメーションの再生速度を 0 にしています。Animator の speed が 0 になると、アニメーションの再生が止まります。つまり、キーを何も押していないときは、Player の歩きアニメーションが止まるようになります。

そのあと、左矢印キーまたは右矢印キーが押されたときだけ、次の処理でアニメーションを再生しています。

左矢印キーを押しているときは、Player を左に移動させながら、画像を左向きに反転させ、歩きアニメーションを再生します。

右矢印キーを押しているときは、Player を右に移動させながら、画像を右向きに戻し、歩きアニメーションを再生します。

今回の処理をまとめると、次のようになります。

押したキー horizontalInput flipX speed (Animator)
左キー -1(左に進む) true(反転する) walkAnimationSpeed
右キー 1(右に進む) false(反転しない) walkAnimationSpeed
入力なし 0 0

最初にアニメーションを止めておき、左右のキーが押されたときだけ再生することで、Player が歩いているときだけ歩きアニメーションが動くようになります。

ちなみに……

ここで少し疑問に思うかもしれません。今回の処理では、Update の最初で必ずアニメーションの速度を 0 にしています。

そのあと、左矢印キーまたは右矢印キーが押されていた場合だけ、アニメーションの速度を walkAnimationSpeed に変更しています。

「最初に 0 にしているなら、キーを押しているときも 0 と walkAnimationSpeed が何度も切り替わって、アニメーションがチカチカするのでは?」

と思うかもしれません。ですが、この処理ではチカチカしません。以前、Update は 1 フレームごとに実行されると説明したと思います。ここで大切なのは、Update の中に書いた処理が 1 行ずつ画面に反映されるわけではないということです。

画面に反映されるのは Update の処理が一通り終わったあとなので、途中で一瞬 0 になった状態は見えません。そのため、キーを押している間は歩きアニメーションが再生され、キーを離したときだけアニメーションが止まります。

動作を確認しよう

ここまでできたら、Ctrl + S でスクリプトを保存します。保存できたら Unity に戻りましょう。ゲームを再生して、Player を左右に動かしてみます。

左矢印キーまたは右矢印キーを押している間だけ Player が歩くように動き、キーを離したときにアニメーションが止まれば成功です。

ですが、歩きアニメーションの速度が少し速すぎると感じませんか?速度変更をしてみましょう。

一度ゲームの再生を止めて、Hierarchy から Player を選択しましょう。

Inspector にある PlayerController2D の中にある、Walk Animation Speed という項目の数値を 0.5 に変更しましょう。

変更できたら、もう一度ゲームを再生します。

Player を左右に動かしたとき、歩きアニメーションの速度が自然になっていれば成功です。

ジャンプ中はアニメーションを止めよう

ここは正直、ゲーム性やキャラデザインなどにも依存する部分ですが、空中で足がバタバタしてしまうのを止めたい場合もあると思います。

そこで、ジャンプ中もアニメーションを止めるようにしてみましょう。

Project ウィンドウから Assets > Scripts フォルダを開き、PlayerController2D をダブルクリックで開きましょう。

開けたら、以下のマーカー部分を追記しましょう。

PlayerController2D

スクリプトの解説

今回追加したのは、次の部分です。

処理内容はとてもシンプルです。isGrounded は、Player が地面にいるかどうかを確認するための変数でした。

  • isGrounded が true:Player が地面にいる状態
  • isGrounded が false:Player が地面にいない状態

今回使っている ! は、「ではない」という意味です。つまり、!isGrounded「地面にいないなら」という意味になります。

そのため、この処理は「Player が地面にいないなら、アニメーションの速度を 0 にして止める」という意味になります。左矢印キーや右矢印キーを押しているときは、一度 playerAnimator.speed に walkAnimationSpeed が入ります。しかし、そのあとに Player が地面にいないかを確認しています。ジャンプ中は isGrounded が false になるため、最後に playerAnimator.speed = 0f; が実行されます。その結果、ジャンプ中は左右キーを押していても、歩きアニメーションが止まります。

動作を確認しよう

ここまでできたら、必ず Ctrl + S でスクリプトを保存します。保存できたら Unity に戻りましょう。ゲームを再生して、左右に移動しながらジャンプしてみます。

地面を歩いているときだけ歩きアニメーションが再生され、ジャンプ中にアニメーションが止まれば成功です。

カメラを Player に追従させよう

ここからはCamera が Player を追いかける仕組みを作成します。
現在の状態では、Player が右に進んでいくと、いずれ画面の外に出てしまいます。

横スクロールアクションゲームではPlayer の移動に合わせて Camera も動く必要があります。

今回はまず横方向だけ追従するようにします。縦方向まで追従させると、Player がジャンプするたびに Camera も上下に動いてしまいます。そのため、画面が少し見づらくなったり、酔いやすくなったりすることがあります。

また、Camera が Player の位置に完全にピッタリついてくると、動きが急に見え、酔いやすくなることがあります。そこで今回は、Camera が少し遅れて滑らかに Player を追いかけるようにします。

スクリプトを書こう

Project ウィンドウから Assets > Scripts フォルダを開きましょう。Scripts フォルダの中で右クリックをして、Create > MonoBehaviour Script を選択します。名前を CameraFollow2D にしましょう。

作成できたら、CameraFollow2D をダブルクリックで開きます。

開けたら、以下の内容を記述しましょう。

CameraFollow2D

スクリプトの解説

まず、target には追いかける対象を入れます。今回の場合は、Player を追いかけたいので、あとで Inspector から target に Player を設定します。

Transform は、オブジェクトの位置、回転、大きさを持っているコンポーネントです。

Camera は Player の位置を知る必要があるため、Player の Transform を受け取れるようにしています。

次に、Camera の追従設定です。

smoothSpeed は、Camera が Player を追いかける速さです。

offset は、Player からどのくらいずらした位置に Camera を置くかを決める値です。
今回は X が 7、Y が 0、Z が -10 になっています。X は横方向、Y は縦方向、Z は奥行き方向です。2Dのゲームでは、Camera の Z は基本的に -10 にしておきます。

次に、Start の中を見てみましょう。

ここではCamera の Y 位置を fixedY に保存しています。今回は横スクロールのジャンプアクションゲームなので、Camera は横方向だけ Player を追いかけるようにします。ジャンプのたびに Camera が上下に動くと、画面が見づらくなります。そのため、Y 方向の位置は最初に決めた高さで固定します。

次に、LateUpdate の中を見ていきます。

LateUpdate は、他スクリプトを含めて Update の後に実行される処理です。Player が動いたあとに Camera が追いかけるようにしたいので、Camera の追従処理は LateUpdate に書いています(また、このスクリプトではUpdateは削除しています)。

次に、以下の部分で Camera が向かう位置を作っています。

X 座標には、Player の X 座標に offset.x を足した値を入れています。これにより、Player の横移動に合わせて Camera も横に動きます。

Y 座標には fixedY を入れているので、Player がジャンプしても Camera は上下に動きません。

Z 座標には offset.z を入れています。

最後に、Lerp を使って Camera をなめらかに移動させています。

Lerp は、スタート位置、目標位置、どのくらい近づけるかを入れると、その間の位置を計算してくれる機能です。これにより、Camera が targetPosition に一気に移動するのではなく、少しずつ近づくようになります。

動作を確認しよう

ここまでできたら、Ctrl + S で必ず保存して Unity に戻りましょう。まずは、CameraFollow2D を Hierarchy 内の Main Camera にドラッグ&ドロップしてアタッチします。

次に、Hierarchy から Main Camera を選択します。

Inspector に CameraFollow2D が追加されているので、Target に Player を割り当てましょう。

ここまでできたら、ゲームを再生して確認します。

Player が左右に移動したとき、Camera が横方向に追いかければ成功です。

ただし、ここで確認すると、背景が Camera についてこないことに気づくと思います。
一度ゲームの再生を止めましょう。Hierarchy にある背景を、Main Camera にドラッグ&ドロップして子オブジェクトにします。

これで Main Camera が親になり、背景は Camera の子オブジェクトになります。親である Camera が動くと、子である背景も一緒に動きます。もう一度ゲームを再生して確認しましょう。

Player を追いかけて Camera が動き、背景も画面についてくるようになれば成功です。

プロジェクトファイルのダウンロード

今回の講座で作ったプロジェクトファイルのダウンロードリンクを用意しました。

プロジェクトファイルのダウンロードはこちら >>

まとめ

今回はプレイヤーキャラクターとカメラの動きを仕上げていきました。

まず、Player が移動する方向を向くようにしました。

次に、歩いているときだけ歩きアニメーションが再生されるようにしました。

さらに、ジャンプ中は歩きアニメーションを止める処理も追加しました。

最後に、Camera が Player を横方向に追いかけるようにして、横スクロールアクションゲームらしい画面の動きにしました。

これで、ジャンプアクションゲームとしての基本的な仕組みはできました。

ただし、今の状態ではまだハプニング要素がありません。

次回からは敵キャラや当たるとゲームオーバーになるオブジェクトを追加していきましょう。

次の記事:

Unity簡単2Dゲームの作り方【第4回】敵の作成と踏みつけ判定・バウンド処理を実装する
この記事は「初心者でも作れるUnity簡単2Dゲームの作り方講座」の第4回です。前回は進む方向に合わせてプレイヤーの向きを変え、左右キーを押しているときだけ歩きアニメーションが再生されるようにしました。また、Main Camera が Pl...

【ゲームの作り方講座もプレゼント中!】

現場レベルのゲーム制作が、すべてここで学べます。

【永久会員チケット】

永久会員チケット|Unity入門の森

全講座を見放題で学ぶ

ソースコード・素材・プロジェクトすべて公開。
Unityの基礎から応用まで、一生使えるスキルを体系的に習得。

コメント

タイトルとURLをコピーしました