【Unity】アニメーションのお勉強(基本編)

皆さんAnimationを使っていますか。

動き物を作る時に使えると便利なアニメーションなのですが、
ケロは全然使ってませんでした。(- .-)ヾ ポリポリ

アニメーターのフローがどうも馴染めなくて、
触ろうともしてませんでした。
(;^_^A


動き物を作ろうと思うと必要になるので、
勉強していきたいと思います。
(°-°;)ヾ(-_- ;) 今更かよ…


簡単なアニメーションなら作成した事はあったのですが、
キャラクターの動作など作った事がなく、使い方を知りませんでした。
一から勉強と言う事で、お勉強をしてみたいと思います。
(;^o^) \(ToT )小学生か!


既にご存じの方は傍観して頂けると幸いでっす。(..*) オハズカシイ・・


Unityのアニメーションは、Mecanimと言う機能でアニメーション作成から
実行までをエディターで一貫して操作できる機能です。

本来、複雑なスクリプトを組まないとできないアニメーションですが、
Unityなら簡単に作成できるようになっています。

アニメーションの再生は、時間経過に沿ってパラパラ漫画の様に
設定した絵が上書きされて行く感じになります。

ざっくりと説明するとこんな感じなんですが、
実際にどんな感じの物が作れるか試したので、動画にしてみました。

ケロたんコーラス隊でっす。

スクリプトを組まなくても、これくらいなら簡単に作れる所が魅力です。
作り方は、アニメーションウィンドウを開いて時間グラフに
座標などを入力して、記憶させればPLAYと同時に実行してくれます。

実際に作ってみないと分からないので、
簡単な物を作りながら説明していきたいと思います。

設定はandroidです。
UFO1.jpg
Imageを追加して、UFOのスプライトをアタッチします。
このUFOを動かすアニメーションを作ります。

UFOのオブジェクトを選択した状態で、
UFO2.jpg
ウィンドウ→アニメーション→アニメーションを開きます。

なにやら開きました。これがAnimationウィンドウです。
UFO3.jpg
このままでは、何もできないので初期設定をします。

まずは、作成のボタンを押さないと始まらないのですが、
ボタンを押すと、AnimationとAnimatorコントローラーの
二つのファイルが作成されます。

保存先を作っておくと分かりやすいので、
Resourcesフォルダ内にAnimationsフォルダを作成して、
そこに二つのファイルを保存するようにします。

保存先を用意したので、作成をクリックします。
UFO4.jpg
ファイル名と保存先を聞いてくるので、用意したフォルダを指定して
名前はなんでもいいです。
今回は、UFO@moveにしておきます。

保存ができたら、
UFO5.jpg
Animationウィンドウの表示にグラフが追加されて、
フォルダ内には、二つのファイルが作成されます。

Animatorコントローラー
UFO6.jpg
これがAnimationを管理してくれます。

UFOのインスペクターを見ると
UFO8.jpg
Animatorコンポーネントが追加されて、
コントローラーに、このファイルがアタッチされています。
この部分は、Animationを作成すると自動的にセットされる部分なので、
気にしなくてもいいですが、他のアニメーションを呼び出したい時などは、
変更する事もできます。

Animation
UFO7.jpg
このファイルが作成されたアニメーションになります。

Animationファイルのインスペクターでは、
UFO9.jpg
ループの設定が行えます。
単純にループを解除したい場合は、ループ時間のチェックを外すと
一度だけの再生を行えます。

コントローラーが、必要な時にAnimationを呼び出し、
呼び出されたAnimationは、設定された情報を再生する。

二つのファイルは、こんな感じで機能しています。


それでは、UFOを使ってアニメーションを作って行きます。
ウィンドウ→アニメーション→アニメーションで開きます。
UFO10.jpg
アニメーションウィンドウでは、
タイムラインに必要な動きを設定する事で再生が行われます。

UnityのPLAYを押すとセットしたObjectが生成されますが、
生成された所がタイムラインの開始点0:00秒となります。

SetActiveで隠していたObjectを表示した場合、表示した時が0:00秒となります。
プレハブも生成された時が0:00秒です。


タイムラインには、座標などのTransform、ObjectのImageを時間毎に設定できます。
生成されたObjectは、タイムラインに沿って指定された動きを再生していきます。

それでは、UFOの動きを作ってみたいと思います。
UFOの初期座標をX-550、Y0に移動させて、Animationウィンドウを開きます。
UFO12.jpg
プロパティを追加からRectTransformのAnchoredPositionの+を押します。

0:00秒と1:00秒にひし形のマークが追加されましたが、
これはkeyと言う物で、keyの部分で座標などを切り替えるようにします。
keyは追加・削除ができるので、切り替えポイントの増減が可能です。

UFOを左側によせたので、1秒で右はしに移動させてみます。
UFO13.jpg
タイムラインの秒の帯をクリックして下さい。(赤枠部分)
分かりにくいのですが、白いグリッド線がクリックした秒に移動すると思います。
これがタイムラインのカーソルになります。

グリッド線をkeyのある1:00秒に移動させます。
UFO14.jpg
1秒後のUFOの座標を、X550、Y0の位置に移動させたいので、
Positionを登録しないといけないのですが、このままでは登録できません。

登録の方法はレコーディングと言って、スクショの矢印のボタンを押す必要があります。
Recボタンを押すと秒の帯と対応した部分、今回はPositionなのですが、
赤い表示に変わります。

この状態でグリッド線の位置の座標を入力してやるとRecされる仕組みになっています。
実際にUFOのX座標を550に変更します。

変更後は、もう一度Recボタンを押して確定させます。
表示が水色に戻れば完了でっす。

座標登録が終わったので、ウィンドウの再生ボタン▶を押してみます。
シーンビューのUFOがタイムラインに合わせて動いたと思います。

1秒だと動きが早すぎるので、少し遅くしてみます。
UFO15.jpg
1秒のkeyの上側をドラッグして、3秒まで移動させます。
タイムラインの尺が1秒ほどしか表示されてない場合は、
マウスのホイールを回すと尺の拡縮ができるので、必要にあわせて広げて下さい。

この状態で再生すると右端まで行ったUFOが左端にワープします。

アニメーションは初期設定でループ再生になっているので、
設定された秒まで終了すると再度0:00秒からの再生になります。

なので、UFOを左端に戻す設定をします。
UFO17.jpg
6:00秒にkeyを追加します。
keyの追加は、赤丸の部分をダブルクリックすると追加できます。

追加したkeyの部分にグリッド線を移動させて、
Rec→座標入力をします。

座標は、X-550、Y0

これで再生するとUFOが左右に移動するようになります。
ただ、移動するだけではUFOっぽくないので、揺れを入れてみます。

揺れてるようにみせるには、傾きが必要になるので、
UFO18.jpg
プロパティ追加からRotationを追加します。

傾きは、0.5秒毎に反転させたいので、
UFO19.jpg
Rotationの帯上で0:30のライン上をダブルクリックしてkeyを追加します。

0:30に追加したのは、タイムラインは1:00=0:6秒に設定されているので、
0.5秒に設定したい時は、0:30に合わせる必要があります。

UFO20.jpg
0:30にグリッド線を移動させて、Rec開始です。
回転のZ軸を10度に変更します。

ここからは、0.5秒毎に-10度、次は10度と交互に設定します。
UFOが両端、0:00秒、3:00秒、6:00秒の時は、傾き0度にします。

全てのkeyが設置できると、こんな感じになると思います。
UFO21.jpg
これで設定が終わったので、Recボタンを押して確定させます。

実際の動画を

本物のUFOを見た事がないので、こんな感じで動くかわかりませんが、
雰囲気はだせたかなと思います。

動作の処理は、こんな感じで作る事ができるのですが、
正直、keyを追加するだけで手間が掛かります。

これならDoTween使った方が早くない?となります。
なので余りAnimationを使う事もないのですが…

実は、Animationを使う場面があります。
歩行や動作などの処理は、Animationが重宝します。

実際にAnimationを作ってみます。
UFO22.jpg
3枚のロボのスプライトを用意しました。
動作の3パターンです。

この3枚のスプライトを時間経過で切り替えて、
動いているように見せる事をAnimationでやります。

まず、androidの設定をして、Imageを追加します。
Imageはロボにリネームして、スプライトに一枚目のロボをアタッチします。
UFO23.jpg
ロボをクリックしてAnimationウィンドウを開きます。

3枚のスプライトを選択して、タイムライン上にアタッチします。
UFO24.jpg
アタッチするとスプライトがタイムライン上に表示されます。
UFO25.jpg
スプライトに連動するkeyをドラッグすると任意の秒数に移動させる事ができます。

足の踏みかえを表現したいので、
UFO26.jpg
1枚目と3枚目のスプライトを追加でアタッチして、
スクショのように配置します。

スプライトの間隔は、一動作0:20秒で設定しています。

この機能は、Imageコンポーネントのスプライトを
タイムラインで指定した時間に、アタッチしたスプライトに
自動的に差し替えをしてくれる便利なものです。


これを再生すると

タイムラインのスプライトの間隔を広げれば、ゆっくりした動きに
狭ければ早い動きになります。

アクション系の動作などには、必要不可欠かと思います。

移動のアニメーションは、座標が固定されるので使いにくいのですが、
スプライトの差し替えは、移動中のオブジェクト上で再生されるので、
動作のアニメーションは重宝します。

他にも設定はできるのですが、説明してると終わらないので、
基本的な使い方は、これくらいにしておきます。

次回は、複数の動作Animationクリップを作成して、
条件にあわせて切り替える事をまとめたいと思います。
(o・・o)/~マタネェ

この記事へのコメント