見出し画像

Unity2Dでキーボードを使って、アニメーションつきのキャラクターを上下左右に動かす

よーへん(バーチャル学芸員・バーチャルライブコーダ)

Vアイドル相方からドット絵アニメーションどう?というお誘いを頂いたので、Asepriteというアプリケーションを使ってアニメーションを作成しました。ついでなのでUnityで動かしてしまおう!ということで、Unity2D初挑戦してみることにしました。

完成はこのようになります。

アニメーションを読み込む

Asepriteで作成したアニメーションをUnity2Dで読み込むようにするには一定の手順が必要です。けっこう大変なので、それをある程度のところまでやってくれるUnityパッケージを使用してUnityで使える.anim形式のアニメーションに変換します。

0.ドットのグリッドが見えにくい場合は、「View」メニュー→「Grid」→「Grid Setting」で「Width」「Height」をそれぞれ「1」にしてガイド線をつくる

1.Asepriteで上下左右と待機モーションを作成し、保存する。ファイルはそれぞれ別に作成し、合計5つのファイルが保存されているか確認する。書き出すときは「Sprite」メニュー→「Trim」でトリミングしておくとGood

画像2

2.Unity2Dでプロジェクトを作成する

3.ここからUnityパッケージをダウンロードして、「Assets」フォルダにドラッグ&ドロップしてインポートする

4.1.で保存したAsepriteのファイルを「Assets」フォルダにドラッグ&ドロップしてインポートする。あらかじめモーションごとにフォルダを作っておくとGood

5.Asepriteのファイルをインポートするとアニメーションを分割した画像ファイルができるので(下の図)

画像3

それを「Hierarchy」にドラッグ&ドロップする(下の図)

画像4

6.保存場所を聞かれるので、保存する。そうすると自動的に「Animator Controller」「.anim」ファイルが作成される

画像1

7.「Hierarchy」にオブジェクトができているので、それを「Assets」にドラッグ&ドロップしてPrefab化する

8.全モーションに対して4.から6.を行う

Animator Controllerを作成してアニメーションと遷移先を設定する

.animの作成ができたらAnimator Controllerをキャラクターに設定して、遷移先を設定した上でスクリプトを書きます。3Dとほぼ同じですが、レイヤーの順番を気にする必要がでてきたりとけっこう細かいところで調整がいりました。

1.「Assets」を右クリックし、「Create」→「Scene」で新しくSceneを作成し、「アニメーションを読み込む」7.でPrefab化したものを「Hierarchy」にドラッグ&ドロップして配置する

2.1.のPrefabをクリックし、「Inspector」→「Animator」→「Controller」にAnimator Controllerが入っていたら、右側の◎ボタンを押して「None」を選択する。ここではAnimator Controllerを空の状態にしておく

3.「Assets」を右クリックし、「Create」→「Animator Controller」で新しくAnimator Controllerを作成する。WalkAnimator Controllerなどに名前を変えておく

4.「Hierarchy」にあるキャラクター(Prefab)をクリックし、「Inspector」→「Animator」→「Controller」に3.で作ったAnimator Controllerをドラッグ&ドロップする

5.「Windows」メニュー→「Animation」→「Animator」を選択し、Animatorウィンドウを開く

6.「Parameters」タブをクリックし、「+▼」→「Int」を選択して「change」などのパラメーター名を設定する

画像5

7.Animatorウィンドウの何もないところで右クリックをし、「Cteate State」→「Empty」を選択する

8.新しいStateができるので、クリックして「Inspector」から名前を「idol」などに変更する

9.7.で作ったStateをクリックして、「Inspector」の「Motion」に静止状態のアニメーションが入った.animファイルをドラッグ&ドロップする

画像6

10.7.から9.を繰り返し、「Charadown」「CharaUp」「CharaL」「CharaR」(上方向移動・下方向移動・左向き移動・右向き移動)のstateを作成する。上方向移動は後ろ姿のアニメーション、下方向移動は正面のアニメーションを適用することに注意。多くの2Dゲームでの移動は上方向に移動すると後ろ姿が映っているため

11.「Any State」を右クリックして「Make Transition」を選択する。そうすると矢印が伸びるので、「Charadown」をクリックする

画像7

12.「CharaUp」「CharaL」「CharaR」も同様に「Any State」から矢印を出してこのようにする

画像8

13.作成したUpに向かう矢印をクリックし、「Inspector」から「Conditions」を下記のようにする

画像9

14.そのまま上のSettingsの横の▶を開き、下記のように設定する。特にいちばん下の「Can Transition To」のチェックを外すことをお忘れなく。これを外さないとすごい速さで「AnyState」との遷移が起こって静止している状態になってしまい、アニメーションが再生されなくなってしまう

画像10

15.「CharaDown」「CharaL」「CharaR」も同様に13.14を行う。ただ「Conditions」の「Equals」の横の数値を下記のようにする
・CharaDown　0
・CharaL 　3
・CharaR　2

キーボードに合わせてキャラクターが移動するスクリプトを書く

基本的には3Dと同じですが、2DのRigidbodyなどをつける必要があります。

1.「Hierarchy」にあるキャラクター(Prefab)を選択し、「Inspector」の下にある「Add Component」をクリックして「Rigidbody 2D」を選択して適応する。設定は下記のようにする

画像11

2.「Assets」を右クリックして、「Create」→「C#Script」を選択する

3.できたファイルに対して、MoveControllerなど名前をつける

4.「Hierarchy」にあるキャラクター(Prefab)をクリックし、「Inspector」の空いているところに2.をドラッグ&ドロップして適用する

5.「Assets」にあるMoveControllerスクリプトをダブルクリックして、下記のように入力する。入力したら保存して「Play」ボタンを押し、キーボードの矢印キーに合わせて動くか確認する

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class MoveController : MonoBehaviour
{
//スピード調節
  public float speed;

       private Animator animator;

       private void Start()
       {
           animator = GetComponent<Animator>();
           
       }


   // Update is called once per frame
   void Update()
   {
       Vector2 dir = Vector2.zero;

       if (Input.GetKey(KeyCode.LeftArrow))
           {
               dir.x = -1;
               //アニメーションの遷移切り替え
               animator.SetInteger("change", 3);
           }
           else if (Input.GetKey(KeyCode.RightArrow))
           {
               dir.x = 1;
               animator.SetInteger("change", 2);
           }

           if (Input.GetKey(KeyCode.UpArrow))
           {
               dir.y = 1;
               animator.SetInteger("change", 1);
           }
           else if (Input.GetKey(KeyCode.DownArrow))
           {
               dir.y = -1;
               animator.SetInteger("change", 0);
           }

//Rigidbodyを使って移動させる
           GetComponent<Rigidbody2D>().velocity = speed * dir;
       
   }

   
   
}

この記事が気に入ったらサポートをしてみませんか？