簡単な2Dアニメーション-左右移動の基本-【Unityゲーム制作】

今回は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で。

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