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

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

【Unity開発】2Dアニメーションの作り方 Animation, Animator Controller【ひよこエッセンス】

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


スポンサーリンク

Unity5.1.1p1 Personal(2015年6月)

 

f:id:hiyotama:20150504205926p:plain

 

ひよこエッセンスの時間です〜

Unity開発でよく出てくるパターンをエッセンスとしてまとめておきます〜

今回は2Dアニメーションの設定についてです〜

2Dアニメーションまとめ

 

①Sprite画像の切り離し

 

それではまず画像の切り離しから〜

2Dアニメーションに使われる画像は、だいたい下の画像のように1枚に複数の絵が描かれていますので、切り離します〜

下の画像をProjectビューに入れて下さい〜

 

f:id:hiyotama:20150506085827p:plain

 

f:id:hiyotama:20150506090250p:plain

ProjectビューへImport

 

続いてplayer画像のInspectorビューの設定です〜TextureTypeをSprite(2D and UI)、Sprite ModeをMultiple、Filter Mode をPointにして下さい〜

 

Sprite(2D and UI)は、Unity2D開発で2D画像を扱うSpriteオブジェクトや、UnityのUIを扱うuGUIのImageオブジェクト等で使える画像タイプです〜

 

Multipleは、1枚の画像を複数枚に切り離して使う設定です〜

 

Pointは、2D画像のドットを綺麗に表示するための設定です〜

 

f:id:hiyotama:20150506090618p:plain

 

それではSprite Editorボタンを押し、画像を切り離し設定をしていきましょう〜

 

f:id:hiyotama:20150506103924p:plain

 

左上のSliceをクリックすると、Type、Pivot、Methodという項目が出てきます〜

 

Typeは切り離し方を表し、AutomaticだとUnityが自動的に分割してくれて、Gridを選ぶと自分で切り離す範囲を指定します〜今回はAutomaticです!

 

Pivotは画像の中心点を表します〜Rigidbodyを使って重力で地面に着地するなら、地面との距離がよく分かるBottomがオススメです〜

 

Methodは、選択済みの画像に関する設定です〜Unityの公式ドキュメントには、Delete existing とすると選択済みの部分をすべて置き換え、Smart とすると既存のものを保持または調整しつつ新規の矩形を作成すると書いてありますが、これらの違いはよくわかりません〜Safeについては、既に選択済みの範囲はそのまま残して、まだ選択されていない画像があれば切り離してくれます〜今回はDelete existingを選択します〜

 

f:id:hiyotama:20150506092842p:plain

綺麗に切り離される

 

そしたらSprite Editor画面は閉じて下さい〜すると、Apply(適用)しますか?と聞かれるので、Applyしましょう〜

 

f:id:hiyotama:20150506093058p:plain

Applyを選択

 

これで画像が切り離されました!

 

f:id:hiyotama:20150506093143p:plain

 

②Spriteアニメーション

それではアニメーションの設定をしていきます〜まずは基本的なSpriteアニメーションからです〜Projectビューの切り離されたplayer_0とplayer_1を選択し、Hierarchyビューへドラッグ&ドロップして下さい〜

 

f:id:hiyotama:20150506093549p:plain

ドラッグ&ドロップ!

 

するとSprite画像の1枚目の名前でオブジェクトができ、ゲーム画面にひよこが出現します〜

また、ProjectビューのSprite画像がある階層にAnimationとAnimator Controllerが作成されているのが確認できます〜

 

f:id:hiyotama:20150625101119p:plain

 

これらはフォルダに整理し、名前を変更しておくと管理しやすいのでおすすめです〜

 

f:id:hiyotama:20150625101309p:plain

管理しやすいように整理

 

※※※Unity5.1.0までのバージョンではSprite画像をドラッグ&ドロップした時に名前を付けて保存することができましたが、Unity5.1.1からは自動的にSprite画像の名前を付けて保存されるようになりました※※※

 

次に作成されたオブジェクトのInspectorビューを見てみると、作成されたAnimator ControllerのAnimatorコンポーネントがついています〜

Sprite画像をまとめてドラッグ&ドロップすると、自動でアニメーションを付けてオブジェクトを作成してくれるわけです〜

 

ちなみにAnimatorControllerで自動生成されたStateの名前ですが、Unity5.0より前のバージョンだと自分で名前を付けられたのですが、Unity5.1からは自動的にSprite画像の名前が付いてしまうようになってしまいました〜

 

f:id:hiyotama:20150714121023p:plain

State名が自動的に付くようになった

 

State名はこれはAnimationの名前を変えても連動して変更することはできませんので、Stateを選択した状態でInspectorビューから名前を変更して下さい〜

 

f:id:hiyotama:20150714121324p:plain

InspectorビューからState名を変更

 

というわけで、これでアニメーションの作成は完成です〜Gameを実行してみて下さい!

 

f:id:hiyotama:20150506093854p:plain

高速ではばたくピヨ

 

ちょっとスピードが早いので、速度を落としましょう〜Hierarchyビューのplayer-1を選択した状態で、Animationビューを開いて下さい〜Animationビューは、Sceneビューの上から選択できます〜

 

f:id:hiyotama:20150506094221p:plain

 

Animationの表示が無い時は、Sceneビュー右上から追加できます〜

 

f:id:hiyotama:20150506094350p:plain

Add Tab>Animation

 

そこにも無い場合は、タスクバーのWindow>Animationで開けます〜

 

f:id:hiyotama:20150506094521p:plain

Window>Animation

 

すると、下のような画面が表示されているかと思います〜

 

f:id:hiyotama:20150506094941p:plain

 

赤枠のSamplesは、このアニメーションが1秒間で何コマ使うかを設定しています〜この場合、1秒間12コマでアニメーションが構成されています〜もしSampleが60だったら、1秒間に60コマ分になるので、より細かいアニメーションが設定できるというわけです〜

 

その右側の赤枠0:00〜1:00が、1秒間のアニメーションを表しています〜今回は0:00でひよこの羽が上、0:01でひよこの羽が下というアニメーションを繰り返しているため、つまり1/12秒のアニメーションを繰り返していたため、とてもスピードが早かったわけです〜それではちょうどいいスピードに設定致します〜その前に、右側のplayer_1 : Spriteを開くとひよこの画像が表れて分かりやすいので、そうします〜

 

f:id:hiyotama:20150506095926p:plain

矢印ボタンで画像が表示される

 

続いて、新しくplayer_0のSprite画像を3コマ目に持ってきます〜

 

f:id:hiyotama:20150506100220p:plain

ドラッグ&ドロップ!

 

そして、1コマ目を0:00、2コマ目を0:06、3コマ目を1:00に設定します〜

 

f:id:hiyotama:20150506100507p:plain

 

これで1秒間に1回はばたくアニメーションが完成しました〜

 

f:id:hiyotama:20150506093854p:plain

ゆっくりはばたくピヨ

 

③Positionアニメーション

Spriteアニメーションは画像を切替えるだけでしたが、ここにPositionアニメーションを追加することで、位置を変えながらアニメーションさせることができるようになります〜Add Property>Transform>Positionにあるプラスボタンを押して下さい〜

 

f:id:hiyotama:20150506100857p:plain

Add Property>Transform>Position

 

するとplayer_1 : Positionという項目が出てくるので、更に矢印ボタンを押すと、Position.x、Position.y、Position.zという項目が出てきます〜

 

この状態で1コマ目のひよこのダイヤマークをクリックすると、Position欄にX:0、Y:0、Z:0という位置情報が表れます〜コマごとにこの位置情報を設定して、アニメーションをさせていくというわけです〜

 

f:id:hiyotama:20150506102536p:plain

ダイヤマークをクリックするとコマごとにPositionを設定できる

 

それでは何匹かひよこを追加して、以下のように設定して下さい〜

 

f:id:hiyotama:20150506103227p:plain

 

これでひよこが羽ばたきながら、上下に移動するアニメーションができあがっているはずです〜

 

f:id:hiyotama:20150506103544p:plain

上下に羽ばたくピヨ

 

2Dアニメーションは基本的にSpriteアニメーションとPositionアニメーションが触れれば、だいたいのことはできるかと思います〜

 

以上、ひよこエッセンスでした〜

ありがとうございました〜