【Unityメモ書き4】アニメーション

クロ

今回はUnityに備わっている
アニメーションの使い方です
アニメーションというかモーションにちかいでしょうか

Unityのアニメーションは
3D,2Dともに同じ処理で管理するから
一つ覚えればかなり役に立ちそうね

霊夢
魔理沙

冬月は2D,UIのフェードインやシーン切り替えでの移動等
オブジェクトやUIの操作に使ってるぞ
うまく使えばトランスフォーマーみたいな車からロボットの変更アニメーションなんかもできそうだな

ゲームは中身のゲーム性も重要ですが
こういう見やすい設計にするのも重要です
ということで今回はオブジェクトの動かし方を書こうと思います

妖夢

クロ

最低限アニメーションで必要なのは
上の画像で赤で囲った部分の
Animator ControllerとAnimationの2つになります

Animator Controllerは名前の通り
複数のアニメーションを管理して
AアニメーションからBアニメーションへ変更する、といったような管理するものね

霊夢
魔理沙

Animationは霊夢が言った
AアニメーションやBアニメーションに当たるところで
アニメーションそのものになるな

Animator ControllerはProjectで右クリックメニューから生成できます
できたものをHierarchyのアニメーションさせたい
オブジェクトにドロップすれば登録できます

妖夢
クロ

次にAnimationを作成します
最初は1アニメーションに一つ作っておくと管理しやすいと思います
ここから色々新しい画面を使う必要があります

UnityのメニューバーのWindowから
Animatorを表示して、これはAアニメーションからBアニメーションへと
アニメーションの遷移を設定する画面になるわ

霊夢

魔理沙

で、こっちがAnimationを操作するときに使うUIだな
こっちはフレームごとに座標や色を設定して
アニメーションを作っていく画面になるぞ

AdobeのFlash Professionalを触ったことある人は
直感的に使い方がわかるかもしれません
動かしたいフレームを設定して、Sceneで座標を設定していく感じです

妖夢
クロ

変化させた箇所があると
Animationのフレームの箇所に赤、もしくは黒の点として残ります
移動後の位置を設定するだけで補完をしてくれるので途中の設定は必要ありません

アニメーションの設定方法としては
Add Propertyをクリックすると
設定しているGameObjectの子object一覧が表示されるわ

霊夢

魔理沙

子のObjectからアニメーションさせたい子Objectを選択して
するとRect Transformなどフレームアニメーション可能な一覧が出てくるので
座標を動かしたい場合はPositionを大きさを変えたい場合はScaleを選択するぞ

選択すると、右にタイムランみたいな表記がされますので
その任意の時間をクリック、変化させたい結果の座標や大きさ、色などを設定してください
そうするとタイムランを動かすと徐々に変化していくのがわかります

妖夢
クロ

上のデバッグ再生の項目も赤色になっていると思います
このときはアニメーションの設定中の意味になるので、座標を変更させても画面が変わることがなく
アニメーションの座標が変わるようになっています

フェードインアニメーションなら
画面外から透過状態から画面内に不透過状態にする
ようにすればそれらしく見えるわ

霊夢

魔理沙

アニメーションができたら
今度はAnimatorの画面に移るぞ
先程作ったAnimationをどういう風に動かすかを設定していくぞ

緑色のEmptyは最初から作られています
そこから矢印が伸びるますが
その矢印の順にアニメションが再生される様になっています

妖夢
クロ

上の画像の場合ですと
EmptyからStart → Start_ListAnimation → End_ListANimationへ
処理が流れるようになっています

矢印は必ずEmptyからつなげる必要があるわ
次につなげたい開始の項目を右クリックするとメニューの一番上
Make Transactionを選択するの

霊夢
魔理沙

そうすると、項目から矢印が伸びるから
その矢印を次のつなげたいアニメーションの項目をクリックすると
矢印がつながるぞ

矢印が繋がったら、アニメーション終了後に
次のアニメーションへ勝手に切り替えて再生するようになります
流しっぱなしのアニメーションならこれで完了です

妖夢
クロ

アニメーションの再生を任意に行いときもあるので
次にフラグを設定して
設定したタイミングでアニメーションを行うようにします

Animatorの左側のリストには
アニメーションの再生するタイミング調整用の
変数やフラグの設定ができるようになっているわ

霊夢

魔理沙

左上の+ボタンがあるので+をクリックするとリストを増やすことができるぞ
int型bool型などフラグの型の設定もできる
この変数をスクリプトで変化させて任意のタイミングでアニメーションを再生させるんだな

登録したフラグは矢印に対して設定していきます
画像の場合はStartとStart_CommonUIAnimationの遷移を
制御する形になります

妖夢
クロ

設定の仕方は右下部にあるConditionsの+ボタンを押すと
リストが追加されるので、左側に登録したフラグ名を、右側に遷移できる値を入力します
あとはスクリプトで変数を変化させれば動きます


public class BattleMainScript : MonoBehaviour
{

    // アニメーションの管理
    // 前面スクリーン
    ///  前面スクリーン 
    public GameObject mFrontScreenObject; ← Inspectorで該当のGameObjectを設定しておく
    ///  前面スクリーンAnimator 
    private Animator mFrontScreenAnimator;

    /// ==============================================================
    ///  初期化処理 
    /// -------------------------------------------------------------- 
    /// 
    /// ==============================================================
    void Start ()
    {
        // アニメーター取得
        if (mFrontScreenObject != null)
        {
            // 前面スクリーン
            mFrontScreenAnimator = mFrontScreenObject.GetComponent();
        }
    }

    /// ==============================================================
    ///  更新処理 
    /// -------------------------------------------------------------- 
    /// 
    /// ==============================================================
    void Update ()
    {
     // アニメーションのフラグを操作する
         mFrontScreenAnimator.SetBool("isStart", true);

         // アニメーションの再生時間を取得
     mAnimatorStateInfo = mFrontScreenAnimator.GetCurrentAnimatorStateInfo(0);
         mAnimeTimeLength = mAnimatorStateInfo.length;
         mAnimeTimeCur = 0;
    }
}

いろいろ端折ったけど
アニメーション内のフラグを操作する方法を書いてみたわ
2点説明するわね

霊夢
mFrontScreenAnimator.SetBool("isStart", true);

キモとなるのがこれだな
設定しているフラグを変更する関数になるぞ
SetBoolは設定した型に合わせて変更してくれ

第1引数に変数名
第2引数に変数値を入力します
すると即値が挿入されてアニメーションが再生されるようになります

冬月の設計はこんな感じです
あまり効率的な方法では無いと思いますが
わかりやすいかなと思います

mAnimatorStateInfo = mFrontScreenAnimator.GetCurrentAnimatorStateInfo(0);
mAnimeTimeLength = mAnimatorStateInfo.length;
mAnimeTimeCur = 0;
クロ

こっちは必要ない人もいると思いますが説明しようと思います
これはアニメーションの再生時間を取得するものです
細かく説明します

GetCurrentAnimatorStateInfoが
アニメーションの情報を取得する関数ね
ここに総再生時間があるわ

霊夢
魔理沙

mAnimatorStateInfo.lengthが再生時間ね
再生時間を計算してこの数値と同じだったら
再生終了しているって感じにするぞ

mAnimeTimeCurが再生時間を図る変数です
変数名はなんでも良いけど、これに毎フレーム
Time.deltaTime(更新時間)を足していって再生時間と同じだったら終了、という処理にします

妖夢
クロ

これで一通りのアニメーションはできるはずです
3Dのアニメーションなどは変更する必要があるかもしれませんが
基本は同じとなります

あと、アニメーションには
再生タイミングに任意の関数を呼び出すことが可能よ
やり方は簡単よ

霊夢

魔理沙

Animationのタイムランの上部をクリックすると青い棒が出てくるぞ
これはこの位置で任意の関数を呼ぶためのものだ
上の画像の場合は3回呼ばれることになっているな

Inspectorには
動作させたい関数のリストボックスが表示されます
Scriptに記述されている関数すべてが表示されるようです

妖夢
クロ アニメーションの方法はこんな感じです
これをするだけでぐっと完成度は上がりますので
皆様も一手間してみてはどうでしょうか?

気軽にコメントをどうぞ!

この記事に関すること冬月に聞きたいこと等、小さいことでもコメントしていただける嬉しいです。
冬月に直接連絡したい方は下のお問合せフォームをお使いください。(メール送信されます)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。
※メールアドレスは公開されることは有りません。


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

Android | iOS | Unity | ゲーム製作の関連記事