Windows11の教科書

ウィンドウズ11やスマホで困ったことを調べたブログ

【TikTok Effect House】2Dアニメーションの作り方[スクリプト・シーケンス]

エフェクトハウスでの2D画像によるアニメーションの作り方の紹介です。

2Dアニメーションの作り方

アニメーションシケーンスを使う

エフェクトハウスでは、連番の画像ファイルを用意すればそれを切り替えて表示するアニメーションがすぐ作れます。

 

アセットでTexture Sequenceを指定。

 

ファイル名が連番(xx1.png, xx2.pngなど。ただし20枚以下)になっているものを選択します。

トータルで200MB以下。

 

すると1つのシーケンスデータとしてあつかわれます。

アセットでインポートしたシーケンスを選択すると、インスペクターでアニメーションのプレビューが確認できます。

 

次はヒエラルキーでImageオブジェクトを作って割り当てればオッケーなのですがTextureとして指定しようとするとファイル名がでてきません。

そこでImageを作ったら、インスペクターで「Add Component」を実行。

 

「Animation>Animation Sequence」があるので選択。

 

あとは追加された「Animation Sequence」のプロパティで「Texture Sequence」を指定すればOK。

 

 

ヴィジュアルスクリプト

アニメーションシケーンスを使う

アニメーションシケーンスは「Animation Sequence Controller」ノードから制御することができます。

 

以下はエフェクト開始後にシーケンスアニメをPlay=再生します。利用するアニメーションシーケンスのイメージをノードに接続しておいてから利用しましょう。

 

画像の位置・回転・拡大を制御する

画像の位置を動かしたりするアニメーションの制御です。

ヴィジュアルスクリプトを使うことで位置や回転しつづけるように制御できます。

 

ヒエラルキーで画像オブジェクトを選択。インスペクターの画面でPosition(位置)、Rotation(回転)、Scale(拡縮)の先頭にある丸いポッチをビジュアルスクリプトのパネルへドラッグします。

 

回転の場合、ドラッグを離すと「Get Rotation」「Set Rotation」などのように選択肢が出ます。

位置を取得したい場合は「Get~」を、位置を変更したい場合は「Set~」を選びます。

 

常時イベントが発生するのは「Update」です。

Updateから、「回転を取得」ノード、「再計算」するノード、「回転を設定し直す」ノードをつなげば、常時画像を回転させることができます。

 

 

 

TikTokでエフェクトが作れるEffect Houseの使い方はこちら。

www.kyoukasho.net

 

 

[記事]

Written by @EffectTaro

 

Tiktok Effect House Creator. Video Effect Creator.

TIKTOK:https://www.tiktok.com/@effecttaro

YOUTUBE:Effect Taro - YouTube

TWITTER:Effect Taro (@KomatterG) / Twitter

このブログは、ネットや書籍上の情報、個人の体験や感想を中心にまとめたものです。 正確性を期していはいますが、間違い・誤訳等あるかもしれません。 当サイトの情報によって生じたいかなる損失について一切の責任を負わないものとします. あらかじめご了承ください。

利用規約・プライバシーポリシー |〇問い合わせ