Roba Memo - 素人のUnity覚書と奮闘記

素人のUnity覚書と奮闘記

Mobをルート通りに移動させるには2 スプライトアニメーションの作成

前記事
robamemo.hatenablog.com

前記事では、とりあえずキューブをルート通りに移動させるところまで出来た。
このキューブに画像を付けて、歩行アニメーションを表示したい。
右方向に進んでいたら右を向いた画像を、上方向なら後ろ姿の画像に切り替える方法も含めてメモ。

1:こんな感じのキャラチップを用意する。

f:id:nico-taniku:20170808152332p:plain

2:スプライトを分割する

下記の記事を参考に、スプライトを分割しておく。
スプライトのアニメーション - Roba Memo - 素人のUnity覚書と奮闘記
分割すると、こんな感じでスプライトが沢山できる。
左上=0、右下=19 になるみたい。
f:id:nico-taniku:20170808152849p:plain:h300

3:キューブを表示しないようにする

f:id:nico-taniku:20170808190355p:plain:w300
今、こんな感じで黒いキューブが見えてるので、Mesh Rendererのチェックを外してレンダリングしないようにする。
f:id:nico-taniku:20170809105637p:plain:w300

4:Mobキューブにスプライトを配置する

子オブジェクトとして、分割したスプライトの1つ(どれでもOK)を配置する。
f:id:nico-taniku:20170809110044p:plain:w200

5:アニメーションを作る

例えば、左向きの歩行アニメーションを作る場合。
(1)画像の場合、該当するスプライトは12,13,14番目になるので、この3つを選択してヒエラルキーにドラッグ&ドロップする。

(2)下記画像のように、保存先とファイル名が聞かれるので、適当な名前をつけて保存する。
ここでは、 ant_left_walk.anim とした。
f:id:nico-taniku:20170808153425p:plain:w200
保存すると、アニメーションファイルとコントローラーファイルの2つが作成される。
コントローラーファイルは、自動的にスプライトと同じ名前になるみたい。

(3)とりあえず、必要なアニメーションを作る。
同じ要領で、右向き(right)、上向き(top)、下向き(bottom)を作成する。

6:コントローラーは、1つだけ置いておいて、あとは削除する。

コントローラーの名前をわかりやすくしておく。ここでは controler とした。
このコントローラーでアニメーションを切り替える仕組みを作る。
f:id:nico-taniku:20170809112001p:plain:w300

7:Animator画面でステートを並べる

コントローラーをAnimator画面で編集する。画面は、Window - Animator で出せる。
(1)とりあえず、AnimationファイルをAnimator画面に全てドラッグ&ドロップする。

(2)top - bottom - right - left の順番に画像のように並べる。
このグレーやオレンジのものをステートという。ステートが切り替わると、アニメーションも切り替わるようになっている。
矢印は無視してOK。
Entryから伸びるオレンジは、最初に再生するアニメーションを設定するもの。 とりあえず、無視でOK。
f:id:nico-taniku:20170809110359p:plain:w600

8:パラメーターを用意する。

ステートを切り替える判断材料となるパラメーターを用意する。
Animator画面の左側にParamatersというタブがあるので、それをクリックして、プラスボタンで追加できる。
f:id:nico-taniku:20170809111300p:plain:w300
directionは、Int型で、方向を指示するための変数。
1=top 2=bottom 3=right 4=left

9:ステートを繋ぐ

ステートを右クリックして、Make Transitionを選択し、繋げたいステートをクリックすると矢印ができる。
walkからwalkへ、残る3方向のどこから転換してもいいように、繋げておく。
f:id:nico-taniku:20170808171509p:plain:w300

例:他のステートからbottom_walkへ繋げる場合

(1)矢印をクリックして、インスペクターを見る。
f:id:nico-taniku:20170808172829p:plain:h500

(2)Conditionsには、先ほど作成したパラメーターが選べるようになっている。
ここで、どのタイミングでステートを切り替えるかを設定する。
direction=2のときbottomのステートへ切り替えるようにする。

(3)Has Exit Timeのチェックを外す。
これは、アニメーションが最後まで再生してから切り替えるか、即時に切り替えるかを選択するもの。
即時に切り替える場合は、このチェックを外しておく。

このような感じで、walk部分のステートを繋げていく。
1=top 2=bottom 3=right 4=left

10:MobCudeに配置したスプライトにAnimatorをつける

作成したアニメーションコントローラーをスプライトにドラッグ&ドロップするとコンポーネントがアタッチされる。

11:スクリプトからパラメーターdirectionを変更する

このパラメーターを変更することで、アニメーションが切り替わるシステムになる。
前記事で作成したMobクラスに追加する。

・Animatorコンポーネントを取得する。
・Mobクラスのdirection値に応じて、設定する。

   Animator animator;

    void Start ()
    {
        animator = transform.Find ("Sprite").GetComponent<Animator> ();

    }

    void Update ()
    {
        //移動
        if (!is_stop) {
            distance = walk_speed * Time.deltaTime;

            if (direction == 1) {
                transform.localPosition += new Vector3 (0, distance, 0);
                if (change) {
                    if (transform.position.y >= next_position.y) {
                        direction = next_direction;
                        change = false;
                    }
                }
            } else if (direction == 2) {
                transform.localPosition += new Vector3 (0, -distance, 0);
                if (change) {
                    if (transform.position.y <= next_position.y) {
                        direction = next_direction;
                        change = false;
                    }
                }
            } else if (direction == 3) {
                transform.localPosition += new Vector3 (distance, 0, 0);
                if (change) {
                    if (transform.position.x >= next_position.x) {
                        direction = next_direction;
                        change = false;
                    }
                }

            } else if (direction == 4) {
                transform.localPosition += new Vector3 (-distance, 0, 0);
                if (change) {
                    if (transform.position.x <= next_position.x) {
                        direction = next_direction;
                        change = false;
                    }
                }
            }
            animator.SetInteger ("direction", direction);
        }
    }

12:停止させる

このままだと、停止中なのに歩行アニメーションが再生されたままになるので、待機させたい。
(1)同様に、待機中のスプライトアニメーションを作成し、ステートを追加。
f:id:nico-taniku:20170818081307p:plain:w500

(2)パラメーターでbool stopを作る。

(3)設定する
Has Exit Timeのチェックを外す。
walk → idle stop=true
idle → walk stop=false

以上。