今回はUnityで2D画像からアニメーションを作成する、実装方法のメモです。
基本的な仕組みを知るって感じで、移動のアニメーションを作成していきます。アクションゲームやトップダウン式のゲームで使える感じのものですね。
はじめに
Unityのインストール方法・日本語化は下記から。
Unityのヴァージョン
今回使用するのは「Unity 2020.3.21f1」ヴァージョン。2Dテンプレートで作成しています。
2Dキャラクターの「歩く」アニメーションの超基本を作成していきます。
事前準備
まずは新しいシーンを作成。AnimSampleとしておきます。

今回は、画像からアニメーションを作成するので、画像をアセットストアから持ってきます。アセットストアから「top down 2d」で検索してFREEのアセットをダウンロードします。


いつもの様にパッケージからインポートしますが、今回は全てではなく、「idle」と「walk」画像の部分だけをインポート。

インポートしたらフォルダの場所を適当に変更しておきます。

作成開始
ここから実際に作成していきます。
プレイヤーの作成
まずはヒエラルキーに「空のオブジェクトを作成」、名前をPlayerにしておきます。

コンポーネントを追加から「スプライトレンダラー」を選択。スプライトにアイドル状態の画像をセット。
画像サイズが小さいので、下記の様にスケールを変更する方法もありますが。

インポートした画像をすべて選択して、「ユニット毎のピクセル数」を10に変更しておき、スケールは全て1のままにしておきます。

プレイヤーを動かすスクリプト
次にプレイヤーを動かすスクリプトです。
動かす方法はいくつかありますが、今回は細かいところは抜きにして簡単に行きます。まずはスクリプトを作成。PlayerMovingにでもしておきます。

左右に動くようにスクリプトを下記の様に変更。
using System.Collections; using System.Collections.Generic; using UnityEngine; public class PlayerMoving : MonoBehaviour { [SerializeField] private float speed; private Rigidbody2D body; private float InputX; private void Awake() { body = GetComponent<Rigidbody2D>(); } private void Update() { InputX = Input.GetAxisRaw("Horizontal"); body.velocity = new Vector2(InputX * speed, body.velocity.y); } }
Playerオブジェクトにスクリプトをくっつけて、コンポーネントを追加から「2DRigidbody」を追加、重力スケールは0にしておきます。

これで一度再生してみて、キーボードの「A」「D」で左右に動けばOK。
アニメーション設定
次にアニメーションを作成していきます。
Playerオブジェクトにコンポーネントを追加から「アニメーター」を追加。

ウィンドウから「アニメーション」と「アニメーター」を選択してウィンドウを表示します。

アニメーションウィンドウから「作成」をクリック。Animフォルダにidleと言う名前で作成します。

下記のようにidleのアニメーションクリップとPlayerのアニメーションコントローラーが作成されます。

アニメーションウィンドウを開いて「新しいクリップを作成」から「sidewalk」を作成。
横向きに歩くアニメーションを作成していきます。

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

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

アニメーター設定
アニメーターウィンドウを開いて、「+」からパラメーターを追加。sidewalkと言う名前でBoolを追加。
idleを選択して、遷移を作成してsidewalkにつなげます。逆に、sidewalkからidleも遷移を作成します。

遷移条件を設定。
idleからsidewalkのconditionsにsidewalkのtrueをセット、sidewalkからidleは反対のfalseをセットします。

スクリプトでsidewalkにBool値をセットします。
using System.Collections; using System.Collections.Generic; using UnityEngine; public class PlayerMoving : MonoBehaviour { [SerializeField] private float speed; private Rigidbody2D body; private float InputX; private Animator anim; private void Awake() { body = GetComponent<Rigidbody2D>(); anim = GetComponent<Animator>(); } private void Update() { InputX = Input.GetAxisRaw("Horizontal"); body.velocity = new Vector2(InputX * speed, body.velocity.y); anim.SetBool("sidewalk", InputX != 0); } }
一度、試しに動かすと、若干反応が鈍い感じに動きます。
アニメーションの動作までの時間を0に変更。

また、右方向に動く場合は良いですが、左方向の場合はムーンウォークみたいな動きになるので反転させる必要があります。
これは、大まかに2パターンあってtransformのX方向のスケールを-1にする下記のパターンか。
private void Update() { InputX = Input.GetAxisRaw("Horizontal"); if (InputX > 0.01f) transform.localScale = Vector3.one; else if (InputX < -0.01f) transform.localScale = new Vector3(-1, 1, 1); body.velocity = new Vector2(InputX * speed, body.velocity.y); anim.SetBool("sidewalk", InputX != 0); }
もしくはスプライトレンダラーのXの反転を「有効/無効」で切り替える下記のパターン。
private SpriteRenderer rend; rend = GetComponent<SpriteRenderer>(); private void Update() { InputX = Input.GetAxisRaw("Horizontal"); if (InputX > 0.01f) rend.flipX = false; else if (InputX < -0.01f) rend.flipX = true; body.velocity = new Vector2(InputX * speed, body.velocity.y); anim.SetBool("sidewalk", InputX != 0); }
スクリプトで実装していますが、アニメーションの「プロパティを追加」で実装することもできます。
どっちが良いかは難しいところですが、後者の場合、コライダーを追加していると、コライダーが変わらないので使いにくいかな。
とりあえず移動アニメーションの基本の基本と言う感じです。重力ありにすればアクションゲームに利用できる感じになりますね。
トップダウン式のゲームの場合は、上下の移動もあるので、それは次回のパート2で。