今回はUnityで2D画像からアニメーションを作成する、実装方法のメモです。
基本的な仕組みを知るって感じで、移動のアニメーションを作成していきます。アクションゲームやトップダウン式のゲームで使える感じのものですね。
はじめに
Unityのインストール方法・日本語化は下記から。
Unityのヴァージョン
今回使用するのは「Unity 2020.3.21f1」ヴァージョン。2Dテンプレートで作成しています。
2Dキャラクターの「歩く」アニメーションの超基本を作成していきます。
事前準備
まずは新しいシーンを作成。AnimSampleとしておきます。
今回は、画像からアニメーションを作成するので、画像をアセットストアから持ってきます。アセットストアから「top down 2d」で検索してFREEのアセットをダウンロードします。
いつもの様にパッケージからインポートしますが、今回は全てではなく、「idle」と「walk」画像の部分だけをインポート。
インポートしたらフォルダの場所を適当に変更しておきます。
作成開始
ここから実際に作成していきます。
プレイヤーの作成
まずはヒエラルキーに「空のオブジェクトを作成」、名前をPlayerにしておきます。
コンポーネントを追加から「スプライトレンダラー」を選択。スプライトにアイドル状態の画像をセット。
画像サイズが小さいので、下記の様にスケールを変更する方法もありますが。
インポートした画像をすべて選択して、「ユニット毎のピクセル数」を10に変更しておき、スケールは全て１のままにしておきます。
プレイヤーを動かすスクリプト
次にプレイヤーを動かすスクリプトです。
動かす方法はいくつかありますが、今回は細かいところは抜きにして簡単に行きます。まずはスクリプトを作成。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);
}スクリプトで実装していますが、アニメーションの「プロパティを追加」で実装することもできます。
どっちが良いかは難しいところですが、後者の場合、コライダーを追加していると、コライダーが変わらないので使いにくいかな。
とりあえず移動アニメーションの基本の基本と言う感じです。重力ありにすればアクションゲームに利用できる感じになりますね。
トップダウン式のゲームの場合は、上下の移動もあるので、それは次回のパート２で。