クリエイターの教科書

ChatGPT, Stable Diffusion, Visual Studio, Excelなど教科書

【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」と連結して使います。

 

診断物でランダムからの停止をする場合、

・Animation Sequenceのインスペクタで「random」再生をする

・タップしたらスクリプトから「Pause」でとめる

でOK。

 

特定のフレームを表示したい場合、たとえば2フレ目なら

・スクリプトのFromを2,Toを2

・スクリプトのPlayへ実行を送る

で大丈夫。

 

 

ヴィジュアルスクリプト

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

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

 

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

 

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

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

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

 

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

 

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

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

 

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

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

 

 

 

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

www.kyoukasho.net

 

 

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

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