【Unity】ドット絵のキャラクターを動かす方法解説！

2024 2/08

2024年2月8日

Seo

URLをコピーする

URLをコピーしました！

こんにちは！ドット絵で作られたゲームはよく見かけるけど、どう作るんだろう？と思ったことはありませんか？

まず第一歩はドット絵のキャラクターを動かすところからです！

そこで本記事では、ドット絵のキャラクターに移動に合わせたアニメーションを設定する方法を解説していきます。

ドット絵のキャラクターを動かしてみよう

ここでは、ドット絵のキャラクターの移動に合わせたアニメーションを設定する方法を紹介します。

下のように、右に動く時は右への移動のアニメーション、

左に動く時は左への移動のアニメーションが再生されるように設定していきます。

ドット絵の素材を用意する

今回使うドット絵の素材は以下のサイトからお借りしました。

あわせて読みたい

「やさぐれひよこ素材」置き場

ドット絵の素材が用意できたら、ドラッグ＆ドロップでUnityのAssetsフォルダ内にインポートしましょう。

なお今回利用するスプライトシートは、利用する前に画像を分割する手順が必要になります。

スプライトシートを分割する方法については下の記事が参考になります。

スプライトシートではなく、最初から分割された画像素材をインポートして利用しても問題ありません。

本記事では下のように複数の画像素材が用意できたところからアニメーションの作成方法を解説していきます。

アニメーションを作成する

画像素材からアニメーションを作成していきます。

まずは右向きの移動のアニメーションを作成します。

下のように、右向きの画像素材全てをCtrlキーを押しながら選択します。

選択した状態でヒエラルキーウインドウにドラッグ＆ドロップしましょう。

するとアニメーションファイルの保存画面が表示されますので、名前を付けて保存しましょう。

保存が完了すると、下のようにアニメーションファイルとanimatorファイルが自動的に作成されます。

また、シーンにはアニメーションがついたキャラクターが自動的に配置されます。

プログラムを実行してみると、右向きの移動のアニメーションが確かに適用されていますね。

AnimatorControllerを設定する

同様の手順で、左に移動するアニメーション、その場で待機するアニメーションも作成しておきます。

これらのアニメーションを使って、AnimatorControllerを設定しましょう。

AnimatorControllerの詳しい設定方法は下の記事で解説しています。

下のようなAnimatorControllerを作り、stayの時は待機アニメーション、leftの時は左に動くアニメーション、rightの時は右に動くアニメーションを設定しました。

bool値としてleftとmoveを作り、遷移条件に利用しています。

例えばstayからleftに伸びる矢印のときは下のような遷移条件を設定しています。

AnimatorControllerが設定できたら、AnimatorのControllerに忘れずにセットしておきましょう。

スクリプトを作成する

キー入力でキャラクターを動かすスクリプトを作成しましょう。

今回は以下のようなスクリプトを作成しました。

public class Player : MonoBehaviour
{
    private Animator anim;
    public float speed = 2.0f;
    float v = 0;

    void Start()
    {
        anim = GetComponent<Animator>();
    }
    void Update()
    {
        v = 0;
        if(Input.GetKey("left")){
            anim.SetBool("left", true);
            anim.SetBool("move", true);
            v = -speed;
        }
        else if(Input.GetKey("right")){
            anim.SetBool("left", false);
            anim.SetBool("move", true);
            v = speed;
        }
        else{
            anim.SetBool("move", false);
        }
    }
    void  FixedUpdate(){
        this.transform.Translate( v/50, 0, 0);
    }
}

左矢印キーを押した時には左方向に動き、animatorのleftに遷移します。

右矢印キーを押した時には右方向に動き、rightに遷移しています。

何も入力がないと動かずにstayに遷移するプログラムになっています。

このプログラムをキャラクターにセットしてプログラムを実行してみると、

下のように移動とアニメーションが連動した動きができるようになりました。