ホーム DoRuby Unityで作る‼︎2Dアニメーション編
Unityで作る‼︎2Dアニメーション編
 

Unityで作る‼︎2Dアニメーション編

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

Unityの中に取り込んだプレハブにアニメーションをつけるアレソレ

 こんにちはtokinです。
前回作った部屋の窓の外で雪が降っているようにしたいので、雪の結晶が落ちていくアニメーションを付けていきます。
前回の記事はこちら「Unityで作る‼︎2Dテクスチャ組込編

下準備

 アニメーションをつけるためにも設定するための下準備が必要です。まずモーションをつけたいプレハブのスプライトデータにAddComponentからAnimatorを付けます。次にAssetsの下にアニメーションを入れるフォルダを作成し、その中に右クリック→AnimationとAnimatorControllerを作成します。AnimatorContorollerはAnimationを動かすリモコンのようなものでAnimatorはそれをプレハブに繋げる為の組み込み口となります。
enter image description here

 次にAnimatorウィンドウを開いた状態でAnimatorを選択すると中にAnimationを組み込むことができます。ドラッグしてAnimationを繋げるとEntryからオレンジの矢印が飛び出し組み込んだAnimationをさす状態になります。アニメーションは絶え間なく再生し続けてほしいため、組み込んだAnimationを選択しInspectorに表示されるループ部分にチェックを入れましょう。
enter image description here

 ここまでの工程が完了したらヒエラルキーにあるプレハブのAnimatorの中に先ほどのAnimatorContorollerをドロップして組み込みます。これでこの組み込んだスプライトデータのアニメーションを設定することができます。
enter image description here

アニメーションを作る

さて、早速アニメーションをつけていきましょう。
 Animatorを組み込んだデータを選択した状態でAnimationウィンドウを開きましょう。ここで先ほど組み込んだAnimationデータを設定することができます。しかしこの状態ではまだ何も設定することができません。まずAddPropertyを開きます。ここでアニメーションを設定する項目を増やすことができます。
enter image description here

上下に動かす

 試しに雪が上から下に落ちるように設定します。
まず枠部分を図のように設定します。上の枠はフレーム数でアニメーションの尺を表します。アニメーションをゆっくり再生したいときは少々多めに取るなどして徐々に調整していきましょう。Sampleは1コマ何フレームかを設定できます。試しにフレーム数を150に設定しこの中にアニメーションキーを打っていきます。赤いラインを打ちたい箇所に持っていき先ほど増やした項目「Position」のY座標を記入してエンターを押すとキーが打たれます。どんなキーを打てばいいか迷ったときは、スプライトデータのPositionのXYZの文字上を長押ししながらドラッグすると値ごとスプライトデータも動くので動かしながら理想の位置を探していきましょう。
上下に動かすためにはPositionのY座標を変動させることが必要です。0フレーム目のキーを(X-0.25,Y2.97,Z-1)に、150フレーム目のキーを(X-0.25,Y-0.94,Z-1)にします。雪は夜の壁と親子関係にあるため、Z-1で夜の壁より手前に表示されるようになります。これで夜の壁をバックに上から下へ滑らかに落ちていきます。
enter image description here

回転させる

次は雪の結晶を回転させます。回転させるときはAddPropertyからRocationを追加します。
そしてRocationのZ値に0~360の値をくわえキーを打ちます。0フレーム目に(Z0)、150フレーム目に(Z360)を打つとちょうど綺麗に一回転するようになります。途中でZ値の値をずらしたキーを打てば回転に変化をつける事もできます。
enter image description here

横に動かす

最後に雪の結晶を蛇行しながら落とすようにします。先ほどの一直線に落ちていくように設定したキーの間にXを変更させたキーを入れていきます。キーを打ちたいフレームに赤いラインを持って行った状態でスプライトデータの場所を移動させるとそのままアニメーションのPosition部分にも記入されます。
アニメーションは下のCurveからも設定でき、動きの強弱にこだわりたい場合などはこちらの調整もおすすめです。これでアニメーションの完成です。
enter image description here

終わりに

SpriteStudioなど動画作成ソフトで作ったアニメーションを取り込む事も可能ですがUnityで作るとPosition,Scaleの他にカラーなど幅広く調整することができます。Unityでもぜひアニメーション制作を試してみてください。

記事を共有

最近人気な記事