devlog [naru design]

プログラミングやテクニカルな内容の覚え書き。

簡単なキーフレームアニメーションを作成し、スクリプトからそれらを再生する方法。

操作動画

補足説明

1. Cubeを作成

キーフレームアニメーションを設定するオブジェクトを作成します。
HierarchyへCubeを追加して、Animationコンポーネントを追加します。

2. キーフレームアニメーション作成

HierarchyのCubeを選択した状態でAnimationウィンドウでAdd Curveをクリックします。
アニメーションの保存先と名前(Anim1)を指定してSaveをクリックします。
ProjectのAssetsにAnim1が作成されます。
位置が変化するアニメーションを作成したいので、TransformのPosition横の+をクリックします。
0秒の所、アニメーションウィンドウで赤い縦線が0秒のところにある状態でCubeの位置を画面左外へ動かします。
アニメーションウィンドウで再生ボタンをクリックすると設定したアニメーションが再生されます。
0秒の時点では画面左外、1秒の時点では画面中央、2点を補完するキーフレームアニメーションができました。

次に、画面右外から中央へ移動するアニメーションを作成します。
アニメーションウィンドウのAnim1と表示されている所をクリックするとプルダウンメニューが開き、新たなアニメーションクリップを作成する[Create New Clip]が現れます。これを選択します。
先ほどと同様に保存先と名前(Anim2)を指定してSaveをクリックします。
ProjectのAssetsにAnim2が作成されます。
0秒の位置を選択し、Cubeを画面右外へ移動します。
アニメーションを再生すると、Cubeが画面右外から画面中央へ移動します。

この時点で、CubeのAnimationコンポーネントには2つのアニメーション(Anim1, Anim2)が設定されています。

3. スクリプト作成

Animationコンポーネントに設定されているアニメーションを再生するためのスクリプトを作成します。
ここでは、画面に2つのボタンを作成し、それをクリックするとそれぞれのアニメーションが再生されるようにします。

AssetへC#スクリプト(TestAnim)を追加します。

作成したスクリプトをHierarchyのCubeへ追加します。

4. 完成

シーンを再生すると画面に2つのボタンが表示されます。
ボタンをクリックすると、それぞれに割り当てられたアニメーションが再生されます。

Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Trackback URL: