今回はUnityの2Dゲームで画像からアニメーションを作成する実装方法のメモです。
基本的な仕組みを知る感じで、左右移動のアニメーションを作成していきます。アクションゲームやトップダウン式のゲームで使える感じのものですね。
はじめに
Unityのバージョンは2021.3.14f1、2Dで作成しています。
下記のような感じでキャラクターが左右に移動した時、歩いているアニメーションを実装します。

事前準備
まずは元となる画像をアセットストアから持ってきます。アセットストアから「top down 2d」で検索してFREEのアセットをダウンロードします。


いつもの様にPackageからインポートしますが、全てではなく、「idle」と「walk」だけをインポートします。

実装開始
ここから実際に作成していきます。
プレイヤーの作成
まずは横向きの「idle」状態の画像を画面にドラッグアンドドロップします。

画像サイズが小さいので、スケールを変更しておきます。

次に「AddComponent」から「Rigidbody2D」を追加、重力スケールを0にしておきます。

プレイヤーを動かすスクリプト
次にキャラクターを動かすスクリプトです。動かす方法はいくつかありますが簡単に下記のように作成。
using UnityEngine; public class PlayerMove : MonoBehaviour { private float speed = 5.0f; private Rigidbody2D _rb; private void Start() { _rb = GetComponent<Rigidbody2D>(); } private void Update() { float InputX = Input.GetAxisRaw("Horizontal"); _rb.velocity = new Vector2(InputX * speed, 0); } }
スクリプトをアタッチします。

再生してみて、キーボードの「A」「D」で下記のように左右に動けばOK。この時点では張り付けた画像だけなのでアニメーションは無いです。

スクリプトの参考は下記。
アニメーション設定
次にアニメーションを作成していきます。「Window」→「Animation」を選択します。

「Create」をクリック、idleと言う名前で作成します。


idleが作成されたら、「CreateNewClip…」から「sidewalk」を作成。


「hero-walk-side」のフォルダ内の画像を全て選択してドラッグアンドドロップ。

これでアニメーションが出来ますが、再生マークを押してみると動きが早いので、「|」を横に伸ばして自然な動きにします。

アニメーター設定
「Window」→「Animation」→「Animator」を選択します。

Parametersにタブを切り替えて、「+」からBoolパラメーターを追加。sidewalkと言う名前にしておきます。

idleを選択して、「MakeTransition」を選択してsidewalkにつなげます。反対のsidewalkからもidleに繋げます。

遷移条件を下記のようにセットします。Conditionsにsidewalkのtrueをセット、sidewalkからidleは反対のfalseをセットします。

スクリプトの変更
スクリプトを下記のように変更して、sidewalkにBool値をセットします。
using UnityEngine; public class PlayerMove : MonoBehaviour { private float speed = 5.0f; private Rigidbody2D _rb; private Animator _anim; private void Start() { _rb = GetComponent<Rigidbody2D>(); _anim = GetComponent<Animator>(); } private void Update() { float InputX = Input.GetAxisRaw("Horizontal"); _rb.velocity = new Vector2(InputX * speed, 0); _anim.SetBool("sidewalk", InputX != 0); } }
この状態で動かすと、右方向に動く場合は良いですが、左方向の場合はムーンウォークみたいな動きになるので反転させる必要があります。
今回は下記のように、RigidBodyやAnimationと同じようにSpriteRendererコンポーネントを取得してfilepを利用して反転させています。
private void Update() { float InputX = Input.GetAxisRaw("Horizontal"); if (InputX > 0.01f) _rend.flipX = false; else if (InputX < -0.01f) _rend.flipX = true; }
transformのX方向のスケールを変更、アニメーションの「プロパティを追加」などで実装することもできます。
とりあえず左右に移動する場合の基本アニメーションと言う感じです。地面を作成して重力をつけるとアクションゲームに利用できる感じになりますね。