エフェクトハウスでの2D画像によるアニメーションの作り方の紹介です。
2Dアニメーションの作り方
アニメーションシケーンスを使う
エフェクトハウスでは、連番の画像ファイルを用意すればそれを切り替えて表示するアニメーションがすぐ作れます。
アセットでTexture Sequenceを指定。
ファイル名が連番（xx1.png, xx2.pngなど。ただし20枚以下）になっているものを選択します。
トータルで200MB以下。
すると１つのシーケンスデータとしてあつかわれます。
アセットでインポートしたシーケンスを選択すると、インスペクターでアニメーションのプレビューが確認できます。
次はヒエラルキーでImageオブジェクトを作って割り当てればオッケーなのですがTextureとして指定しようとするとファイル名がでてきません。
そこでImageを作ったら、インスペクターで「Add Component」を実行。
「Animation>Animation Sequence」があるので選択。
あとは追加された「Animation Sequence」のプロパティで「Texture Sequence」を指定すればOK。
スクリプト
「Animation Sequence Controller」と連結して使います。
診断物でランダムからの停止をする場合、
・Animation Sequenceのインスペクタで「random」再生をする
・タップしたらスクリプトから「Pause」でとめる
でOK。
特定のフレームを表示したい場合、たとえば２フレ目なら
・スクリプトのFromを２，Toを２
・スクリプトのPlayへ実行を送る
で大丈夫。
ヴィジュアルスクリプト
アニメーションシケーンスを使う
アニメーションシケーンスは「Animation Sequence Controller」ノードから制御することができます。
以下はエフェクト開始後にシーケンスアニメをPlay=再生します。利用するアニメーションシーケンスのイメージをノードに接続しておいてから利用しましょう。
画像の位置・回転・拡大を制御する
画像の位置を動かしたりするアニメーションの制御です。
ヴィジュアルスクリプトを使うことで位置や回転しつづけるように制御できます。
ヒエラルキーで画像オブジェクトを選択。インスペクターの画面でPosition(位置）、Rotation（回転）、Scale(拡縮）の先頭にある丸いポッチをビジュアルスクリプトのパネルへドラッグします。
回転の場合、ドラッグを離すと「Get Rotation」「Set Rotation」などのように選択肢が出ます。
位置を取得したい場合は「Get～」を、位置を変更したい場合は「Set～」を選びます。
常時イベントが発生するのは「Update」です。
Updateから、「回転を取得」ノード、「再計算」するノード、「回転を設定し直す」ノードをつなげば、常時画像を回転させることができます。
TikTokでエフェクトが作れるEffect Houseの使い方はこちら。
