【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)の3つを作ります〜
続いて先ほど作成したパラメーターを使って、アニメーションが切り替わる条件を設定します!最初の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】