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

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

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

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