夏も終わって涼しくなってきました。私の時代です。お塩です。
最近TikTokエフェクトにちょこっと触れる機会がありましたので、おさらいも兼ねてエフェクトの作り方をご紹介します。(長くなるので今回はカメラのエフェクト設定過程だけ！ARカメラ部分やエフェクトの申請等はまた今度！ごめんなさい！)
TikTokEffectについて
TikTokでユーザーが利用することができる機能の一つにTikTokエフェクトという機能があります。
これはスマホ/PC等に搭載されているカメラを通して、人や風景を映した際に様々なエフェクトを表示することができる機能となっています。
カメラで顔をトラッキングして頭の上に帽子を表示したり、人物以外の部分に背景を追加したり、3Dモデルを利用してちょっとしたゲームを遊ぶことも可能です。
エフェクト制作者/ユーザーの発想力次第でおもしろ動画を作ることができます。
EffectHouseの導入
TikTokエフェクトは、EffectHouseというアプリケーションを使用することで作成が可能です。
EffectHouseはTikTok公式よりダウンロードが可能です。
https://effecthouse.tiktok.com/download
ログインにはTikTokのアカウントを使用します。
EffectHouseでは、EffectHouseに標準で用意されているプリセットや、各種フィルター機能、フェイストラッキング機能、2D、3Dの素材など、様々な機能を組み合わせてエフェクトを作成します。
また、ビジュアルスクリプティング機能によって複雑な制御も可能で、ミニゲームのようなエフェクトを作成することも可能です。
作成したTikTokエフェクトはEffectHouse内のSubmitボタンよりTikTokへ公開の申請をすることができ、審査を経て承認されることでTikTok上へ公開することができます。
また、EffectHouseには多くのリファレンスとチュートリアル動画、クリエイター同士で情報を共有し合うためのDiscordコミュニティが存在しています。
TikTokのARエフェクト制作に興味があり、EffectHouseの技術について深堀したい方や、他のエフェクト作者の作品を参考にしてみたい方はDiscordのコミュニティに参加してみると良いかと思います。
エフェクト制作
というわけで本題です。
今回は下記のようなARエフェクトを作成してみます。
ホラーチックな雰囲気を出すために下記の要素を盛り込みました。
- 映像をモノクロに
- 画面の端を暗くする
- 走査線
- 人型の影
- 人物の背後に表示
1~3はカメラ効果、4~5は演出となります。
今回は1~3までの工程について紹介します。
新規プロジェクトを作成して準備が完了したら、順にエフェクトを設定していきます。
１．映像をモノクロに
カラー映像が主流になった昨今ではなかなかモノクロの映像を見る機会も無いようなものかと思いますが、監視カメラといえば 暗視機能によるモノクロ、緑がかったモノクロという先入観があるため、今回はモノクロの映像にしてみました。ちょっと異質でいいですよね。
まず、画面左のHIERARCHYパネルの空白部分で右クリック＞Add Object＞PostEffect＞Filterを選択します。
続いて画面右側のINSPECTORパネルより、Filter＞ColorCorrection＞Saturation(彩度)を-1.00に設定します。
モノクロにする設定については以上ですが、他にも色調や明るさ関連の設定が並んでいるので必要に応じて調整をしましょう。
２．画面の端を暗くする
これも映像作品でよく目にする演出ですが、画面の端を暗くすることでより没入感が生まれます。
画面中央を強調することで被写体を強調したり、古いカメラのような表現ができます。
カメラ全体に対してフィルター機能を適用するため、先ほど追加したFilterにAdd component＞Post Effect＞Post Processを追加します。
更にAdd EffectsでVignette(ビネット)エフェクトを設定します。
今回想定しているエフェクトにはデフォルトの設定値で丁度よい塩梅でしたので、そのままとしました。
モノクロ映画のような雰囲気がでてきましたね
3．走査線
こちらもカメラ全体に掛けるエフェクトでです。
今回はPhotoshopにてテクスチャとなる画像を用意して、表示する方法を取りました。
EffectHouseでは、外部から素材を使用する場合、8MBまでのファイルサイズ制限があるため、素材を使用する場合はファイルサイズに注意しましょう。
Photoshopを起動し、サイズは1080*1920pxの縦長サイズで新規プロジェクトを作成します。
レイヤー上に何も情報がない場合はフィルターギャラリーを開くことができないため、背景を白で塗りつぶします。
フィルター＞フィルターギャラリー＞ハーフトーンパターンを選択し、パターンタイプを「線」に設定します。
サイズやコントラストを調整して表示、PNG形式などで実際に書き出します。
これで素材の準備は完了です。
続いてEffectHouse側で作成した画像を取り込みます。
画面左下のASSETSパネルより作成した画像をインポートして登録します。
次にHIERARCHYパネルよりAdd object＞3D＞Imageで画像を読み込みます。
作成したImageを選択し、右側のINSPECTORパネルからTextureを設定します。
画像が画面全体に掛かるようScaleを調整したらBlend ModeをOverlayへ変更します。
デフォルトでは走査線が強かったのでOpacity(不透明度)を0.30へ設定しました。
今回のエフェクトの被写体は人ではないため、PREVIEWパネルから背景を変更してみましょう。
それっぽい雰囲気が出てきたのではないでしょうか？
一度端末プレビュー機能を使用して手持ちの端末でエフェクトを確認してみましょう。
画面右上のPreview in TikTokボタンを押下します。
QRコードが生成されますので、スマホ側のTikTokアプリからQRコードリーダー機能で読み取ります。
するとカメラが起動してエフェクトをプレビューすることができます。
カメラ効果が正しく動作していることを確認できました。
また、スマホ画面左下のEffectHouseアイコンをタップすることでエフェクトのプレビューを無効にすることが可能です。
引き続きARカメラ(今回はDeviceTracker)機能を使用して、人影を背景に追従させる設定を行っていく…のですが、EffectHouseのプレビュー機能が正常に動作しなくなることもあり、現在挙動について確認中です。
EffectHouseのバージョンによるものなのか、環境によるものかは確認できていませんが、後編で解消できていれば合わせて記載します。
ということで続きは後編をお待ちください！
おわりに
今回はカメラ効果の設定方法のみとなりますが、後編ではARトラッキングや、申請や公開手順について記載予定です。
EffectHouseは基本的なフィルター機能や3Dモデルに始まり、フェイストラッキングなどのAR系の機能等がデフォルトで用意されており、素材の自作等行わずとも手持ちのスマホで手軽にエフェクトを作成して試せるところがよいですね。
皆さんも機会があればARエフェクトを作成して遊んでみてはいかがでしょうか