Unity5(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

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

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

Unity5.1.1f1 Personal(2015年6月)

 

f:id:hiyotama:20150622010040p:plain

ユニティちゃんライセンス

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

 

 前回の続きです〜

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

 

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

 

 

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

 

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

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

 

f:id:hiyotama:20150622190917p:plain

 

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

 

f:id:hiyotama:20150427095323p:plain

 

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

 

f:id:hiyotama:20150622191041p:plain

 

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

 

f:id:hiyotama:20150622191352p:plain

 

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

 

f:id:hiyotama:20150622191236p:plain

 

AddProperty>SpriteRenderer>Spriteを選択し、

 

f:id:hiyotama:20150427100231p:plain

 

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

f:id:hiyotama:20150622191712p:plain

 ドラッグ&ドロップ!

 

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

 

f:id:hiyotama:20150622192100p:plain

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

 

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

 

f:id:hiyotama:20150622192210p:plain

60から15へ変更

 

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

 

f:id:hiyotama:20150622192345p:plain

めり込んどる・・・

 

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

 

f:id:hiyotama:20150622192644p:plain

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

 

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

 

f:id:hiyotama:20150622192943p:plain

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

 

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

 

f:id:hiyotama:20150622193022p:plain

走ってます

 

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

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

 

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

 

f:id:hiyotama:20150427095323p:plain

 

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

 

f:id:hiyotama:20150622193324p:plain

 

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

 

f:id:hiyotama:20150622193449p:plain

 

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

 

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

 

f:id:hiyotama:20150622193729p:plain

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

 

この要領で、

 

f:id:hiyotama:20150622194030p:plain

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

 

f:id:hiyotama:20150622194447p:plain

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

 

f:id:hiyotama:20150622194603p:plain

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

 

f:id:hiyotama:20150622194944p:plain

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

 

と作成して下さい〜

 

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

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

 

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

 

f:id:hiyotama:20150427104227p:plain

 

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

 

f:id:hiyotama:20150622195242p:plain

 

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

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

 

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

 

f:id:hiyotama:20150623082616p:plain

 こんな感じの配置

 

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

 

f:id:hiyotama:20150623082725p:plain

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

 

f:id:hiyotama:20150623082756p:plain

 

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

 

f:id:hiyotama:20150623082841p:plain

 

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

 

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

 

f:id:hiyotama:20150427110014p:plain

 

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

 

f:id:hiyotama:20150427141320p:plain

 

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

 

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

 

f:id:hiyotama:20150427142455p:plain

 

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

 

f:id:hiyotama:20150427142724p:plain

Jump1@Player→Jump2@Player

 

 

f:id:hiyotama:20150623084214p:plain

Jump2@Player→Jump3@Player

 

f:id:hiyotama:20150623084325p:plain

Jump3@Player→Jump4@Player

 

f:id:hiyotama:20150623084443p:plain

Jump4@Player→Jump5@Player

 

f:id:hiyotama:20150623084721p:plain

Jump5@Player→Exit

 

お疲れ様です〜

 

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

 

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

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

 

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

 

 

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

 

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

 

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

 

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

 

【結果】

f:id:hiyotama:20150427114302p:plain

 

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

 

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

 

【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)】