bekostation

Unityでゲーム作ってます

UnityのAnimation機能で2Dアニメを作ろう(入門編。Animationウィンドウとカラー変更アニメ)

動作環境・・Unity2017.2.1f1

身内のデザイン担当に向けた記事ですので悪しからず・・

 

Animationを開く

先ず、個人的にデフォルトのレイアウトが嫌いなので

2by3にする。

・エディタ右上のDefaultと書かれてるButtonを押し2by3を選択。

f:id:bekotaizi:20171229144101p:plain

 

・animationの開き方

Unityエディタ上部のタブから

Window→Animationを選択し開く。(Animatorではない注意)

f:id:bekotaizi:20171229144450p:plain

 

 その後Animationウィンドウが開くが作業しづらいので、

他のウィンドウとドッキング。

f:id:bekotaizi:20171229144838p:plain

 

Animationをさせるオブジェクトを用意する。

 

ここまでで、Animationをさせる下準備が整いました。

 

機能の練習として色が変化するだけの簡単なアニメを作ってみましょう。

 

 

先ずは画像の設定がSprite(2DandUI)と言う設定になってるか確認します。

f:id:bekotaizi:20171229152449p:plain

 

 

 

次に色を変化させる用のオブジェクトを用意します。

f:id:bekotaizi:20171229145500p:plain

 

次にNew Spriteというオブジェクトが生成されるので、名前を変更します。

キーボードのF2キーか変更したいオブジェクトの上でダブルクリック。

f:id:bekotaizi:20171229150619p:plain

f:id:bekotaizi:20171229151016p:plain

 

そして、作成したオブジェクトに画像を付加させます。

f:id:bekotaizi:20171229153211p:plain

 

f:id:bekotaizi:20171229153245p:plain

 

 

また直接画像をHierarchyビューにドラックしてもできます。

(こっちの方が簡単かもしれない。)

f:id:bekotaizi:20171229152734p:plain

 

f:id:bekotaizi:20171229152803p:plain

 

次に、Animationさせたいオブジェクトを選択します。

f:id:bekotaizi:20171229153625p:plain

その状態でAnimationウィンドウを開きます。

f:id:bekotaizi:20171229153718p:plain

そしてAnimationウィンドウとのCreateというボタンを押します。

f:id:bekotaizi:20171229153816p:plain

 

エクスプローラーが開くので名前をつけて保存しましょう。

(.anim)ってのが拡張子

f:id:bekotaizi:20171229153916p:plain

 

2つのデータが作成されます。

f:id:bekotaizi:20171229154311p:plain

 

AnimationClip

Animationで設定した情報が入ってる(角度や座標など)。

アニメをループさせるかどうかの設定もここでする。

f:id:bekotaizi:20171229154352p:plain

 

ゲームで使用する時にループ再生をさせたくないAnimationClipは設定で外しておきます。

f:id:bekotaizi:20171229161036p:plain

 

 

AnimationController

AnimationClipで設定したアニメを推移を管理するためのコントローラーです。

Animatorの設定で使用します。

 

なので、主人公のAnimationControllerなら。

PlayerAnimationControllerって名前などをつけた方が良いでしょう。

f:id:bekotaizi:20171229154719p:plain

 

色を変更させてみよう

Animationさせたいオブジェクトを選択してるか再確認します。 

f:id:bekotaizi:20171229155359p:plain

 

 次にAnimationウィンドウの赤い丸のボタンを押します。

f:id:bekotaizi:20171229155606p:plain

 

※赤い丸を押すとAnimation録画モードに入りますが、

うっかりすると全てがグチャグチャになるので

慎重にAnimationを設定していきましょう。

一応失敗してもCtrl+Zでアンドゥ(Undo)できますが・・

 

まず画像のColorを変更してみましょう。

f:id:bekotaizi:20171229155946p:plain

 

f:id:bekotaizi:20171229160017p:plain

 

適当に色を変更。

f:id:bekotaizi:20171229160116p:plain

 

次に適当なアニメフレームの位置をクリックして白い線を移動しましょう。

f:id:bekotaizi:20171229160307p:plain

 

そして、またColorを変更してみましょう。

f:id:bekotaizi:20171229160418p:plain

 

適当に色を変更

f:id:bekotaizi:20171229160507p:plain

 

 

さて、これでColor変更アニメは完成したので再生してみましょう。

 

先ず赤い丸のボタンを押してAnimation録画状態を解除します。

f:id:bekotaizi:20171229160722p:plain

 

そして三角のボタンを押してアニメを再生してみましょう

f:id:bekotaizi:20171229160853p:plain

 

 

すると、色が変化するアニメがループ再生されると思います。

 

 

アニメの削除と追加

更にアニメを追加したい場合は以下のボタンを押します。

f:id:bekotaizi:20171229161357p:plain

 

f:id:bekotaizi:20171229161516p:plain

 

また、アニメを削除したい場合は該当AnimationClipを削除するだけです。

f:id:bekotaizi:20171229161620p:plain

 

 

 

 

※Spriteってなに??

Unityで2D画像を取り扱う方法として主にSpriteとImageがあります。

大雑把に説明すると。

 

Image・・UI画像用として使用される。

 

HPやPlayerのライフやタイトルロゴなど。

利点としては、画面全体に画像が表示できるので

バン!!と主張したい画像がある時はこちら。

基本的にSpriteより全面に表示される。

 

しかし動的に管理するのにあんまり向いてないですし、

UIとUIが重なるとゲーム全体の処理低下の原因にもなります。

(気にするほどではない)

 

Sprite(Scriptではない)

 

UI以外のメイン処理画像として使われます。

主人公がジャンプしたり走ったりする画像や

ゲームステージや背景にはこちらのタイプを、

またアニメを推移するための機能としてAnimatorを使います。

 

なんでAnimationとAnimatorなんて似た名前つけたんでしょうね・・

 

 

 何かわからないことあったらこちらまで。

twitter.com