【Unity】アニメーションのお勉強(クリップ遷移編)

2020/5/28一部修正
2020/6/7SetTriggerの修正・追記


アニメーションのお勉強と言う事で、
前記事で基本的な使い方を紹介しました。

スプライトの差し替えで動作を作る所まで出来たので、
今回は、複数のアニメーションクリップを条件に合わせて、
遷移させる事を勉強しようと思います。

アニメーションを作成すると二つのファイルが作成されます。
・Animation
・Animatorコントローラー

AnimatorコントローラーがAnimationを呼び出して、再生される仕組みになっていまが、
このAnimationファイルは、複数作る事ができます。

一つのAnimatorコントローラーに複数のAnimationを作成して、
状況に合わせて、Animatorコントローラーが必要なAnimationを選択して、
呼び出すように出来ています。

ざっくりと概要を書きましたが、なんのこっちゃ?
となりそうなので… (°0°)\(--; オイオイ

実際に作って行こうと思います。

まず、モーションのAnimationを作成したいので、
robo37.jpg
こんなスプライトをインポートしました。

前記事最後に登場したロボくんです。

今回は、ロボを使って向きを変えると
連動したアニメーションが再生されるようにしてみます。

一枚物のスプライトなので、SpriteEditorでスライスします。
robo8.jpg
裁断ができたので、アニメーションを作成していきます。

いつものようにandroidのセッティングをします。
robo76.jpg
Androidのセッティングが終わったらImageを追加してFieldとします。
Fieldの中にImageを追加して、ロボにリネームします。
ロボのスプライトは、1枚目の下向きで停止したスプライトをアタッチしておきます。

ロボの準備が出来たらAnimationウィンドウを開いて、
下向きなので、robo@Downで保存します。

robo@Downは下向きのモーションなので、
robo77.jpg
下向きの三枚のスプライトをアタッチします。

三枚のスプライトを踏みかえ動作になるように配置します。
robo78.jpg
少しおかしな配置ですが、修正するので無問題。

更に間にスプライト二枚を追加します。
robo79.jpg
0:10秒毎に足の動きを変える事で踏みかえてる様にみせます。
なので、0:20秒に足の揃った一枚目と0:30秒に右側の足が上がった
三枚目のスプライトを追加しました。

0:39秒に右側の足が上がったスプライトを入れているのは、
最後に設定したスプライトは、0:01秒しか再生されない為、
0:30秒に設置した足は0:31秒で終了します。

これでは、足の動きがおかしくなるので、
調整の為0:39秒に同じスプライトをセットしました。

再生すると、前回ブログの動画で挙げたロボの動きになります。
動画より少し動きは早いです。

下向きのモーションができたので、問題がなければ
上・右・左を追加します。

Animationウィンドウの左にrobo@Downがあります。
robo80.jpg
名前の横にある▼をクリックするとタブが開くので、
新しいクリップを作成をクリックします。

同じAnimatorコントローラーの元でAnimationを増やす場合は、
新しいクリップ作成から増やしていきます。

保存画面が表示されるので、robo@Upで保存します。
保存するとAnimationウィンドウの名前が
robo81.jpg
保存した名前に変わりタイムラインが空になったと思います。

これで新しいAnimationがつくれるので、上向きのスプライトをアタッチします。
robo82.jpg
作り方が同じになるので、右・左は端折りますが、
同じようにrobo@Right・robo@Leftも作ります。

これで、四方向のモーションクリップが作成できたので、
アニメーターのタブをクリックしてアニメーターウィンドウに切り替えます。
robo83.jpg
なにやらフローが作成されています。
最初は、全然意味が分からず触ってこなかったシロモノです。(;^_^A

分かると簡単なので、少し説明します。

・ステート
四角い物がありますが、ステートと言います。
Entry・AnyState・Exitの3つは最初から用意されています。
オレンジ色のステートは、robo@Downです。
最初に作ったアニメーションは、Entryに繋がった状態で生成されます。
後から追加したステートは、グレーになります。
新しいクリップを作成で追加したアニメーションもグレーになります。

・トランジション
矢印線を遷移の意味のトランジションといいます。
トランジションの矢印方向にステートを遷移する事が出来ます。
Entryからrobo@Downのトランジションを見ると、一方通行になっています。
この状態では、robo@DownからEntryに戻る事は出来ません。

・Entryステート
Animatorコントローラーが最初に呼び出すステートです。
Entryに繋がったアニメーションを自動的に再生します。

・AnyState
特殊なモーションを追加した場合、通常のモーションと分離したい時があります。
その場合、特殊なモーションだけをAnyStateから呼び出します。
あまり使う事は少ないかなと思います。

・Exit
AnyStateから派生したモーションを終了させて、
通常のモーションに戻したい場合に使います。

Exitまで遷移するとEntryに戻るようにできています。
特殊な動きを終わらせる場合などに使います。

アニメーターのフローは、こんな感じで出来ています。

最初に作ったアニメーションがEntryに自動的に繋がります。
追加したアニメーションは、グレーステートとなり、トランジションは用意されません。
なので、必要に合わせてトランジションを設定する必要があります。

ざっくり説明しましたが、分かりますかね~
(;^o^) \(ToT )セツメイガヘタデワカラン


それでは、繋がってないステートを繋ぎながら
遷移のさせ方をやっていこうと思います。

まず、グレーのステートがどこに繋がるか考える必要があります。
今回、キーボードの矢印keyでアニメーションを切り替えようと思うので、
状況を考えてみます。

最初は下向きが再生されています。
矢印keyを押す事で対応した方向のモーションを呼び出す必要があります。
となるとrobo@Downからは、残り三つが繋がってる必要があります。
robo84.jpg
robo@Downを右クリックするとタブが開くので、遷移を作成を選択します。
するとカーソルに矢印線が付いてくるので、その状態でグレーのステートをクリックします。
robo85.jpg
グレーのステートをクリックするとトランジションが固定されたと思います。
同じように残り二つのステートにもトランジションを追加します。

各ステートは、矢印keyを押すと、その方向に向きを変える必要があるので、
上なら下・右・左と言う感じでトランジションを設置します。
同じ要領で、全てのステートを接続すると
robo86.jpg
複雑ですが、こんな感じになると思います。

これで、全てのアニメーションを接続できたので、
呼び出せるようになったのですが、遷移させる条件が必要になります。

今回、矢印keyに連動させるので、keyの方向を認識させる必要があります。
そこで、条件設定をしていきます。

アニメーターの左上にパラメータータブがあるのでクリックします。
robo88.jpg
パラメーターに切り替えるとNameの枠の横に+があるのでクリックします。
なにやら見覚えのある型が表示されています。

今回ステートにナンバーを割り当てて、矢印keyからステートナンバーを
呼び出してみようと思うので、整数型intをクリックします。

intをクリックするとName設定になるので、numとしておきます。
robo93.jpg
Nameの横の数値は0のままでOKでっす。
これは、コードで言うとint num=0;と同じ意味です。

このint型num変数に数値を割り当てて、対応したステートを呼び出します。

ステートは、
robo89.jpg
Downを0番、Upを1番、Rightを2番、Leftを3番、とします。

まず、最初にDownからUpに遷移させる設定をします。
robo92.jpg
DownからUpに向かうトランジションをクリックします。
インスペクターを見るとトランジションの内容が表示されます。
設定するのは2つです。

終了時間ありのチェックを外します。
この時間ありの設定は、アニメーションを最後まで再生する物で、
遷移する際、前のアニメーションが終了するまで、次のアニメーションに
移らない事になります。

keyを押したのにラグる感覚になるので、
即、遷移の場合は外しておきます。

続いて、Conditionsの設定をします。
Conditionsの+をクリックして、
robo91.jpg
追加された項目は、左から

・パラメーターで作成した変数
パラメーターで複数の変数を用意した場合、この項目から選択します。
今回は、num一つだけです。

・比較演算子
変数と右端に入力する数値を比較する演算子です。
Greater、数値より大きい
Less、数値より小さい
Equals、数値と同じ
NoEqual、数値以外

・数値
変数と比較する数値

こんな感じで設定できます。

Conditionsは条件文になっています。
if文と同じようにとらえると分かりやすいと思います。

このトランジションはrobo@Upへ向かう物なので、
数値の部分は、robo@Upの番号である1を入力します。

コードで言うと、if(num==1){一番ステートへ移動}と同じだと思って下さい。

矢印keyを押すと対応したステートナンバーをnumにセットします。
このConditionsで条件判定させて合致すれば移動するといった仕組みです。

残りのトランジションも対応した数値を入力します。
robo94.jpg
robo@Downに向かうトランジションなら0番へ移動するので、こんな感じです。
終了時間ありのチェックも外します。


全てのトランジションの入力が完了したら、
いよいよスクリプトの出番でっす。ヽ(´▽`)/~♪マッテマシタ
SwitchScript

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

public class SwitchScript : MonoBehaviour
{
private Animator roboAnim; //ロボのアニメーター取得用変数
private int StateNum; //パラメーターnumに渡す変数

// Start is called before the first frame update
void Start()
{
roboAnim = GetComponent<Animator>(); //ロボのアニメーター取得
}

// Update is called once per frame
void Update()
{
//何かのkeyが押されたら
if (Input.anyKeyDown)
{
KeySelect();
}
}

//keyの判別とナンバーをnumに渡す
void KeySelect()
{
if (Input.GetKeyDown(KeyCode.UpArrow))
{
StateNum = 1;
}
if (Input.GetKeyDown(KeyCode.RightArrow))
{
StateNum = 2;
}
if (Input.GetKeyDown(KeyCode.DownArrow))
{
StateNum = 0;
}
if (Input.GetKeyDown(KeyCode.LeftArrow))
{
StateNum = 3;
}

//アニメーター内のnumにステートナンバーを渡す
roboAnim.SetInteger("num", StateNum);
}
}

スクリプトの内容は、単純にkeyに対応したナンバーを
パラメーターnumに渡すだけです。

アニメーター内のパラメーターに数値を渡す場合は、
GetComponentでアニメーターを取得して、
アニメーターに数値をセットすればOKです。

セットする際の注意点は、
パラメーターの変数は、スクリプトからはstringで指定する為、
変数名を””で囲う必要があります。
また、大文字、小文字の違いでも読み込めないので注意が必要です。

数値をセットするコマンドは、型によって変わります。

int型ならSetInteger(”パラメーターの変数”,数値)
これでアニメーターに渡す事ができます。

flot型ならSetFloat(”パラメーターの変数”,数値)
bool型ならSetBool("パラメーターの変数", trueまたはfalse)
となります。

trigger型は、AnyStateに繋がるアニメーションを再生します。

SetTrigger(”パラメーターの変数”)で呼び出す事ができます。
AnyStateとアニメーション間のトランジションに、
trigger型パラメーターをセットしておくとSetTriggerに反応して、
AnyState側のアニメーションに遷移してくれます。

AnyStateでも触れましたが、
特殊なアニメーションを通常アニメーションと切り分ける為に使います。

使い方はいろいろで、
特殊なモーションを分離したい時、複数のモーションを分離したい時、
時間変化でモーションが変わる、Sceneが変わるとモーションが変わる…

特殊な状況でアニメーションを変えたい時に使う事ができます。

それぞれの型を使えるようになると表現幅が広がるかと思います。

これで全ての設定が終わったので、
スクリプトをロボにアタッチしてPLAYしてみます。

手元が録画できないので、keyに対応した矢印を表示してみました。
矢印の向きが押してるkeyになります。

しかし、動画が小さくてあまりわかりませんね~ (~ヘ~;)ウーン

ま、切り替わっているのが分かればいいかと言う事でスルーします。
(;^o^) \(ToT )あんたほんとにそれでいいの

アニメーションのクリップ遷移について書いてみました。
いろいろと使える機能なので、試してみる事をおススメ致します。

今回は、クリップ遷移まで出来ました。
折角、アニメーションの切り替えができたのに動かせないのは、モッタイナイ( °o° )
次回は、移動処理を踏まえて更に踏み込んだアニメーションの作り方を
勉強してみたいと思います。

それでは、このへんで
( ^ 0 ^ )/~~~~see you again




追記
SetTriggerの説明が全然できてなかったので修正しました。
修正前を参考にされた方、申し訳ありません。(ToT)>゛スンマセン

この記事へのコメント