Mobをルート通りに移動させるには2 スプライトアニメーションの作成
前記事では、とりあえずキューブをルート通りに移動させるところまで出来た。
このキューブに画像を付けて、歩行アニメーションを表示したい。
右方向に進んでいたら右を向いた画像を、上方向なら後ろ姿の画像に切り替える方法も含めてメモ。
- 1:こんな感じのキャラチップを用意する。
- 2:スプライトを分割する
- 3:キューブを表示しないようにする
- 4:Mobキューブにスプライトを配置する
- 5:アニメーションを作る
- 6:コントローラーは、1つだけ置いておいて、あとは削除する。
- 7:Animator画面でステートを並べる
- 8:パラメーターを用意する。
- 9:ステートを繋ぐ
- 10:MobCudeに配置したスプライトにAnimatorをつける
- 11:スクリプトからパラメーターdirectionを変更する
- 12:停止させる
1:こんな感じのキャラチップを用意する。
2:スプライトを分割する
下記の記事を参考に、スプライトを分割しておく。
スプライトのアニメーション - ロバメモ - 素人のUnity覚書と奮闘記
分割すると、こんな感じでスプライトが沢山できる。
左上=0、右下=19 になるみたい。
3:キューブを表示しないようにする
今、こんな感じで黒いキューブが見えてるので、Mesh Rendererのチェックを外してレンダリングしないようにする。
4:Mobキューブにスプライトを配置する
子オブジェクトとして、分割したスプライトの1つ(どれでもOK)を配置する。
5:アニメーションを作る
例えば、左向きの歩行アニメーションを作る場合。
(1)画像の場合、該当するスプライトは12,13,14番目になるので、この3つを選択してヒエラルキーにドラッグ&ドロップする。
(2)下記画像のように、保存先とファイル名が聞かれるので、適当な名前をつけて保存する。
ここでは、 ant_left_walk.anim とした。
保存すると、アニメーションファイルとコントローラーファイルの2つが作成される。
コントローラーファイルは、自動的にスプライトと同じ名前になるみたい。
(3)とりあえず、必要なアニメーションを作る。
同じ要領で、右向き(right)、上向き(top)、下向き(bottom)を作成する。
6:コントローラーは、1つだけ置いておいて、あとは削除する。
コントローラーの名前をわかりやすくしておく。ここでは controler とした。
このコントローラーでアニメーションを切り替える仕組みを作る。
7:Animator画面でステートを並べる
コントローラーをAnimator画面で編集する。画面は、Window - Animator で出せる。
(1)とりあえず、AnimationファイルをAnimator画面に全てドラッグ&ドロップする。
(2)top - bottom - right - left の順番に画像のように並べる。
このグレーやオレンジのものをステートという。ステートが切り替わると、アニメーションも切り替わるようになっている。
矢印は無視してOK。
Entryから伸びるオレンジは、最初に再生するアニメーションを設定するもの。 とりあえず、無視でOK。
8:パラメーターを用意する。
ステートを切り替える判断材料となるパラメーターを用意する。
Animator画面の左側にParamatersというタブがあるので、それをクリックして、プラスボタンで追加できる。
directionは、Int型で、方向を指示するための変数。
1=top 2=bottom 3=right 4=left
9:ステートを繋ぐ
ステートを右クリックして、Make Transitionを選択し、繋げたいステートをクリックすると矢印ができる。
walkからwalkへ、残る3方向のどこから転換してもいいように、繋げておく。
例:他のステートからbottom_walkへ繋げる場合
(1)矢印をクリックして、インスペクターを見る。
(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)同様に、待機中のスプライトアニメーションを作成し、ステートを追加。
(2)パラメーターでbool stopを作る。
(3)設定する
Has Exit Timeのチェックを外す。
walk → idle stop=true
idle → walk stop=false
以上。