【Unity1】アニメーション実装！AnimationとAnimator Controller【ユニティちゃん縦スクロール7】

Unity5.1.1f1 Personal(2015年6月)

 

このコンテンツは、『ユニティちゃんライセンス』で提供されています

 

 前回の続きです〜

今回は、ユニティちゃんに走りとジャンプのアニメーションを加えたいと思います〜

 

今回のような2D画像のアニメーションを詳しくまとめたエッセンスをご用意しましたので、こちらもご参照下さい〜

 

 

 【目標】走りとジャンプのアニメーションを付ける！

 

①走りアニメーションを作成する！

まずは走りアニメーションを作成します〜HierarchyビューのPlayerを選択し、

 

 

その状態でWindow>Animationをクリックし、

 

 

こんな表示があったらCreateボタンを押し、

 

 

もし上の表示が出なかったらAnimationビューのCreateNewClipをクリックし、

 

 

Dash@Playerという名前でAnimationを保存し、

 

 

AddProperty>SpriteRenderer>Spriteを選択し、

 

 

Projectビューからユニティちゃんドット絵素材(Co89)>ユニティちゃん_走りからユニティちゃん_走り_0〜8をまとめてドラッグし、Animationビューへドロップ！(2枚のSprite画像があるかもしれませんが、それらは削除して下さい)

 ドラッグ＆ドロップ！

 

表示されたSprite画像は、 Animationのタイムラインでいう0:00〜0:08に綺麗に並べて下さい〜

 

0:00〜0:08に綺麗に並べ直す

 

これで走りアニメーションが付きました〜が・・・この状態だとものすごいスピードでアニメーションしていて気持ち悪いので、animationウィンドウのSamples(1秒間に何コマのアニメーションにするか)を60から15にして、アニメーションスピードをゆるやかにします〜

 

60から15へ変更

 

これでちょうどいいスピードになりました〜ゲームを実行してみます〜

 

めり込んどる・・・

 

ユニティちゃん_待機のSprite画像のPivotをCenterからBottomに変更しましたが、走りやジャンプのSprite画像のPivotはまだCenterのままなので、このような結果となってしまいました〜ので、変更します〜

 

ユニティちゃん_走りのSprite Editorの設定 PivotをBottomに変更

 

ついでにこのあと使うジャンプアニメーションのPivotもBottomに変更しておきます〜

 

ユニティちゃん_ジャンプのSprite Editor設定 PivotをBottomに

 

それでは再度、ゲームを実行してみましょう〜

 

走ってます

 

②ジャンプアニメーションを作成する

現在Dash@Playerというアニメーションのみが存在してますが、もうひとつJump@Playerというアニメーションを作成し、条件によってアニメーションを変えていきましょう〜

 

HierarchyビューにあるPlayerを選択し、WindowからAnimationを再度選択します〜

 

 

 次にDash@Playerと書かれている欄をクリックし、Create New Clipという項目がありますのでクリックします〜

 

 

Jump1@Playerという名前で保存します！

 

 

するとDash@Playerと同じ画面が出てきますので、Add Property > Sprite Renderer > Spriteを選択し、Project欄のユニティちゃんドット絵素材(Co89)>ユニティちゃん_ジャンプからユニティちゃん_ジャンプ0と1をAnimationウィンドウに貼り付けます〜

 

今回Samplesは60のままで大丈夫です〜

 

画像を2枚配置 Samplesは60のまま

 

この要領で、

 

名前:Jump2@Player Sprite画像:ユニティちゃんジャンプ2,3　Samples:15

 

名前:Jump3@Player Sprite画像:ユニティちゃんジャンプ4,5　Samples:60

 

名前:Jump4@Player Sprite画像:ユニティちゃんジャンプ6,7　Samples:15

 

名前:Jump5@Player Sprite画像:ユニティちゃんジャンプ8,0　Samples:60

 

と作成して下さい〜

 

これでジャンプアニメーションは完成しました！

あとは条件を指定して、走りアニメーションから今作成したジャンプアニメーションに切り替えればOKです〜

 

続いてHierarchyのPlayerを選択した状態で、Window>Animatorウィンドウを開いて下さい〜

 

 

先ほど作成したAnimationが配置されています〜

 

 

③Animator Controllerでアニメーション同士を繋げる！

それではアニメーション同士を繋げていきます〜

 

まずは配置を軽く整理しましょう！

 

 こんな感じの配置

 

次にアニメーションを右クリックして、MakeTransitionを選択します〜

 

最初はAnyStateからJump1@Playerへ矢印を引きます〜

 

 

同じ要領で、以下のようにTransitionで繋いでください〜

 

 

そうしたらアニメーションを切り替えるスクリプトを記述します〜その前に・・・その条件用の変数を作っておきます〜

 

Animatior画面の左側にあるParametersを開くとパラメータ設定画面が出てくるので、＋ボタンを押しBoolを選択すると、パラメーターを作成できます〜

 

 

今回パラメーターはisGrounded(Bool)、velY(float)、Jump(Trigger)の３つを作ります〜

 

 

続いて先ほど作成したパラメーターを使って、アニメーションが切り替わる条件を設定します！最初のAnyState→Jump1@Playerの切替条件は、Jumpトリガーが実行されたら・・・という条件に設定します〜

 

赤丸印のところをクリックすると、Inspectorにアニメーション切替内容が出てきまして、ちょっと下のほうにConditionsという欄がありますので、Conditionsのプラスボタンを押してJumpを選択して下さい〜また、HasExitTimeのチェックは外してTransitionDurationを0にしておいて下さい〜

 

 

同じように設定していきます〜

 

Jump1@Player→Jump2@Player

 

 

Jump2@Player→Jump3@Player

 

Jump3@Player→Jump4@Player

 

Jump4@Player→Jump5@Player

 

Jump5@Player→Exit

 

お疲れ様です〜

 

それでは次に、アニメーションを切り替える処理を作成していきましょう〜

 

④パラメータを切り替えアニメーションを遷移させる

これでアニメーションが揃い、アニメーションを繋げ、アニメーションを切り替える判定用のパラメーターができました〜

 

あとはスクリプトからパラメーターを切り替えるだけです〜PlayerScriptに加筆していきます！

 

 

UpdateメソッドからAnimメソッドを呼び出します〜

 

Animメソッドではvelocityを使いY軸方向の移動速度を取得し、SetFloatによってその値をアニメーターで作成した変数に反映しています〜上昇している時はプラス、下降している時はマイナスの値が入ります〜

 

また、既にあるisGrounded変数も、SetBoolによってアニメーターに作成した変数に反映しています〜

 

最後にJumpメソッドにて、SetTriggerによってjumpトリガーをtrueにしています〜トリガーはBool型と似ていますが、1フレームだけtrueを実行したら即座に自動的にfalseに変更されます〜falseに戻す処理を書かなくていいので、非常に楽です〜

 

【結果】

 

完全にジャンプしております〜

 

今回はここまで、ありがとうございました〜

 

【Unity開発1】キャラクターを自動で移動させる【ユニティちゃん横スクロールアクション2D:1/11】

【Unity開発1】壁にぶつかった時にキャラクターを反転させる【ユニティちゃん横スクロールアクション2D:2/11】

【Unity開発1】キャラクターをジャンプさせる！【ユニティちゃん横スクロールアクション2D:3/11】

【Unity開発1】キャラクターをカメラが追いかける！【ユニティちゃん横スクロールアクション2D:4/11】

【Unity開発1】uGUIを使って点数を表示する！【ユニティちゃん横スクロールアクション2D:5/11】

【Unity開発1】タイトル画面とゲームオーバー画面を作る！【ユニティちゃん横スクロール2D:6/11】

【Unity開発1】アニメーションを付ける！【ユニティちゃん横スクロールアクション2D:7/11】

【Unity開発1】バグ発見！無限にジャンプできちゃう！【ユニティちゃん横スクロールアクション2D:8/11】

【Unity開発1】ボタン長押しでジャンプ力を強くしたい！【ユニティちゃん横スクロール2D:9/11】

【Unity開発1】足場を下から突き抜けて、そのまま乗っかりたい！【ユニティちゃん横スクロールアクション2D:10/11】

【Unity開発1】ランダムで足場を自動生成する【ユニティちゃん横スクロールアクション2D:11/11(Fin)】