こんにちは、ともくんのゲーム作り部屋にようこそ！
このページでは、
「アニメーションカーブってなに？」
「アニメーションカーブの使い方が知りたい！」
というお悩みの方に向けた内容となっています。
Unityでアニメーションを作成する際に、アニメーションカーブという設定項目があります。
アニメーションカーブというのは、アニメーションの各キーフレームを繋いでいる曲線のことで、アニメーションをどう動かすかを表しているものになります。
このアニメーションカーブを変化させることで、動きのタイミングを調整したりアニメーションに緩急を付けるという調整を行うことができます。
そこで、このページでは、Unityでアニメーションを作る際に使うアニメーションカーブについて、どんな機能なのか、また使い方までをまとめていきます。
アニメーションカーブとは？
まずは、アニメーションカーブがどういうものなのか紹介していきます。
アニメーションによる数値の変化を曲線で表しているもの
アニメーションカーブとは、冒頭でも解説した通り、アニメーションのそれぞれのキーフレームを繋いでいるカーブのことを指しています。
もう少し詳しく言えば、アニメーションの動きに伴う数値の変化を補間している曲線のことで、この曲線を使って補間した値に合わせてアニメーションが動いていくことになります。
例えば、以下のようにオブジェクトのX座標を0の位置から5の位置まで移動させるアニメーションを作成したとします。
すると、最初の0の位置のキーフレームと、最後の5の位置のキーフレームを繋ぎ、その間の数値を補間した以下のようなアニメーションカーブが自動的に作成されます。
このアニメーションカーブは、横軸がアニメーションの再生時間、縦軸がここではX座標の値を表しています。
アニメーションの再生時間が進むのに合わせて、X座標が0から5まで徐々に変化していくことになるので、以下のように滑らかに移動するようになります。
このようにアニメーションカーブは、キーフレーム同士を繋いで時間軸における数値の変化を曲線で表しているものになります。
アニメーションカーブを調整して緩急を付けられる
このアニメーションカーブの曲線を変化させることで、アニメーションの動きのタイミングを調整したり、緩急を付けることができるようになります。
例えば、円形のオブジェクトを上から落として床で弾ませるようなアニメーションを作る場合、デフォルトのアニメーションカーブのままだと、以下のようにただ上から下にオブジェクトが移動しているだけのように見えてしまいます。
そこで、上から下に移動する場合は、段々とY座標の変化量が増えるような曲線にして、下から上に戻る場合は、反対に段々と変化量が減るような曲線にしてみます。
すると、以下のように同じアニメーションでも、オブジェクトが床で弾んでいるような動きを作ることができます。
上記はあくまでも一例ですが、アニメーションカーブを調整するだけで、動きに緩急を付けることができているのが分かります。
アニメーションカーブの基本的な使い方
ここからは、アニメーションカーブの基本的な使い方について紹介していきます。
ここでは、以下のようにオブジェクトが横に移動するだけの簡単なアニメーションを作成して、説明していきます。
ちなみに、このアニメーションのキーフレームは、最初と真ん中と最後の3つの座標の位置を指定して作成しています。
アニメーションカーブの見方・設定
まず、アニメーションカーブの設定を開いていきます。
アニメーションカーブは、アニメーションを作成するAnimationウィンドウの下部にある「Curves」を選択します。
すると、以下のように時間軸におけるグラフが表示されると思います。
このアニメーションはX座標の値だけが変化しているので、分かりやすいように「Position.x」を選択しておきます。
上記の赤線で表されているのがアニメーションカーブで、それぞれの時間におけるX軸の座標の変化を表しています。
キーフレームを設定している部分をクリックすると、以下のように白い直線が表示されます。
これは接線と呼ばれるもので、この接線を使って、
- 前のキーフレーム(左)からの線をどのくらいの角度で入れるか
- 次のキーフレーム(右)までの線をどのくらいの角度で出すか
を決めていて、アニメーションカーブの曲線を変化させることができます。
実際にこの接線をマウスでドラッグしてみると、接線の向きを変化させることができ、それに合わせて曲線が変化するようになります。
また、曲線の中でダブルクリックをすると、新たにキーフレームが作成されて、その場所の接線を設定することができます。
接線のタイプを変更してカーブを編集する
接線を使ってアニメーションカーブを編集していくことになりますが、接線はマウスでドラッグするだけでなく、キーフレームを右クリックすることで、接線のタイプを変更することができます。
接線を指定する際のタイプは、
- Clamped Auto：自動で接線を調整する(新)
- Auto：自動で接線を調整する(旧)
- Free Smooth：マウスで自由に接線を調整する
- Flat：接線を水平にする
- Broken：左右の接線を別々に調整する
上記の5つがあります。
Clamped Auto：自動で接線を調整する(新)
Clamped Autoは、Unity側で接線を自動で設定してくれるタイプで、デフォルトの設定となります。
このClamped Autoは、カーブが滑らかになるように値を自動で補間してくれるので、緩急は付かないもののアニメーションが円滑に流れていくようになります。
また、Clamped Autoにしていると、以下のようにキーフレームの値を変化させた場合、その値に合わせて接線の向きをリアルタイムに調整してくれます。
Auto：自動で接線を調整する(旧)
AutoもClamped Autoと同じく、接線を自動で設定してくれるタイプで、旧式の設定になります。
Clamped Autoと異なる点としては、以下のようにキーフレームの値を変化させても、接線の向きは変わりません。
基本的には、このAutoは使わずにClamped Autoを使うことになると思います。
Free Smooth：自由に接線の向きを調整できる
Free Smoothは、接線の向きをマウスで自由に調整できるもので、先ほど紹介しましたが、マウスカーソルでドラッグすることで、向きを変更できます。
例えば、Free Smoothを使って、真ん中のキーフレームの接線の向きを変えて曲線を以下のように変化させてみます。
すると、最初はゆっくり動いて、徐々にスピードが上がって移動させる動きを作ることができます。
今度は、反対に接線を逆向きにしてみます。
すると、真ん中の地点で一度座標が戻り、それからもう一度前に進むような動きになりました。
このように、Free Smoothを使うことで接線を自由に調整して、アニメーションの動きに変化を付けることができます。
なお、Clamped Autoを選択していても、マウスを使って調整した場合は、自動的にこのFree Smoothの設定に変更されます。
Flat：接線の向きを水平にする
Flatは、その接線の向きを水平にするタイプの設定で、選択すると以下のように接線が横向きにまっすぐになります。
これでアニメーションを動かしてみると、真ん中の地点で一瞬停止してから、再度動き出すようになりました。
ちなみに、この状態でもう一つキーフレームを追加して、同じX座標の地点でFlatに設定してみます。
すると、お互いのキーフレームの間が水平となり変化がなくなるため、以下のようにその間は一時停止するようになります。
Broken：左右の接線を別々に調整する
これまでは接線を全て直線として向きだけを変えてきましたが、Brokenを選択すると、接点から左右に出ている接線の向きを別々に調整することができるようになります。
このBrokenにした場合は、「Left Tangent」で左の接線の設定、「Right Tangent」で右の接線の設定、「Both Tangent」で両方の接線の設定を行うことができます。
そして、それぞれの接線の設定の中で、
- Free：左右の接線を自由に調整できる
- Linear：近くのキーフレームを直線で繋いで接線として使う
- Constant：階段状に変化させる
- Weighted：カーブへの影響度合いを変える
上記の4つから接線のタイプを選択することができます。
Free：接線を自由に調整できる
Freeは、接線の向きを自由に調整することができる設定で、マウスを使って向きを変更することができます。
例えば、Freeに設定することで、以下のように左右の接線の向きをそれぞれ異なる向きにすることができ、とがった部分のある形状のグラフができ上がります。
これで再生してみると、
真ん中の地点でオブジェクトがぶつかったような動きを作れているのが分かります。
Linear：近くのキーフレームを直線で繋いで接線として使う
Linearは、そのキーフレームと近くにあるキーフレームを繋いだものを接線として、アニメーションカーブが作られるようになります。
つまり、左の接線の設定であれば左側にある一番近いキーフレーム、右の接線の設定であれば右側にある一番近いキーフレームを繋いで接線とします。
そのため、接線として繋いだキーフレーム側でもLinearを設定している場合は、アニメーションカーブが直線になります。
例えば、真ん中のキーフレームの左の接線をLinearにして、最初の地点のキーフレームの右の接線もLinearにすると、アニメーションカーブが真ん中までは直線となります。
すると、以下のようにオブジェクトが等速で動いているのが分かります。
Constant：階段状に変化させる
Constantは、今までのように補間値を使って、滑らかにアニメーションを動かすのではなく、キーフレームとキーフレームの間を定数として変化させず、そのキーフレームの地点で階段状に値を変化することができる設定です。
例えば、真ん中のキーフレームの両方の接線の設定をConstantにした場合、アニメーションカーブは以下のような階段状の形になります。
これで再生をすると、
先ほどまでのように滑らかにオブジェクトが動くのではなく、ワープするように動くようになります。
このConstantの設定を使うタイミングとして、スプライト画像によるアニメーションの切り替えタイミングに動きを合わせたいというような場合に使います。
Weighted：カーブへの影響度合いを変える
Weightedは、接線の長さを変更して、アニメーションカーブへの影響度合いを変えることができる設定です。
例えば、真ん中のキーフレームの両方の接線をWeightedにした場合、それぞれの接線の端っこをマウスでドラッグすることで、長さを変更することができるようになります。
今回は、以下のように接線の向きを水平にして、それぞれの長さを横に伸ばしてあげることで、アニメーションカーブを調整しています。
アニメーションを再生してみると、
Flatの時よりも、オブジェクトの動きにメリハリが付いているのが分かります。
まとめ
このページでは、Unityのアニメーションを作成する際に使うアニメーションカーブについて、どんな機能なのか、また使い方までをまとめていきましたが、いかがでしたでしょうか？
アニメーションカーブとは、アニメーションのキーフレームを繋いでいる曲線のことで、座標やスケールなど値の変動を表しています。
このアニメーションカーブに変化を付けることで、アニメーションに緩急を付けたり動きにメリハリが出るようになります。
アニメーションを作る際は、このアニメーションカーブが非常に重要になってくるので、色々と設定してより緩急のあるアニメーションを作っていきましょう。
最後までお読みいただきまして、ありがとうございました！
コメント