Tiktokエフェクト事始め

はじめに

2025年1月、InstagramのAR開発機能が終了したのをきっかけに、TiktokのAR制作に取り組んでみることにしました。最近は、Tiktokエフェクトに関する相談も増えてきてたので、ちょうどいい機会です。

完成イメージ

Instagramでは人間の顔認識しか対応していませんでしたが、Tiktokでは猫の顔認識が可能です。
この機能に以前から興味があったので、今回はそれを活かしてこんな感じのミーム系猫フィルターを作ってみることにしました。

制作の流れ

まずは、Tiktok公式の開発ツール EffectHouse をインストールし、新規プロジェクトを作成します。

目元を加工してみる

ヒエラルキに「Cat Face Stretch」を追加し、ランドマークポイントを操作して顔の形を編集します。細かな調整は効きづらいですが、ツール自体は直感的でわかりやすいです。

少し大きなタレ目にしてみました。

キラキラと涙の装飾を入れてみる

PNG素材をアセットに登録し、ヒエラルキに「Pet Face Sticker」を追加、スナップ位置を調整します。

また、Pet Face StickerにLookAtコンポーネントを追加することで、Billboarding設定としました。

キラキラにフェードアニメーションを追加してみる

演出の経過時間を管理するために、ローカル変数SequenceTimeを登録し、更新します。

SequenceTimeをもとに、SetOpacityノードでステッカーの不透明度を操作します。

対象のパッチを全選択→右クリック「Create Subgraph」、さらに右クリック「Convert to Subgraph Instance」で使い回し可能なノードグループが作成できます。全てのキラキラにSubgraphの処理を適用します。

こんな感じ。

タップで見た目を切り替えてみる

ScreenTap、LoopingCounter、SetVisibilityノードの組み合わせで実現できました。

完成！

エディタ右上の「Preview in Tiktok」からTiktok上のカメラでQRを発行し、テストできます。

今後も、別のエフェクトを作りながら、研究して行きたいと思います。