UnityのTimelineで逃げ恥OP風シーンを作りました

先日参加した結婚式で、動画作成を依頼されました。作成した動画の中に「逃げるは恥だが役に立つ（逃げ恥）」オープニングの雰囲気を入れることになり、それをUnityで作りました。

それっぽい雰囲気で盛り上げるのが目的なのでオリジナル要素も入ってますが、せっかくなので作り方を紹介したいと思います。
なお、作成には以下のツールを使っています。

Unity2017.3.1.f1

Photoshop CC 2018

Blender 2.79

1. 逃げ恥で参考にした箇所
2. 3Dテキストの作成
3. Unityでエフェクトをつける
4. Timeline機能でテキストをタイミングよく表示させる
5. 書き出し
6. (補足)Blenderでモデルを作るときにつまづいた箇所と解決方法
7. 終わりに

1. 逃げ恥で参考にした箇所

逃げるは恥だが役に立つ（逃げ恥）は、2016年にTBSでドラマ放映されました。今回参考にしたのはオープニングで、3Dの大きなテキストがたくさん出てくるところです。

オープニングは、例えば下記で確認できます。

Paravi(パラビ) - 人気番組が楽しめる動画配信サービス

2. 3Dテキストの作成

はじめはAfter Effectsで作っていたのですが、After Effectsではプレビュー表示とエンコード時間がかかり、作成時間が読めなくなるという問題がありました。そこで、Unityのタイムラインで作る方向に切り替えました。

3Dテキストは、下記を参考にさせていただきBlenderで作りました。BlenderではMaterialは設定せず、すべてUnity側で調整しました。

【Blender】3Dな文字の作り方【テキスト】

Blenderで作るとこのようになります。

Blenderで作った3DTextの例

なお、Blenderを使う上でつまづいたところを、「6. (補足)Blenderでモデルを作るときにつまづいた箇所と解決方法」でまとめていますのでよかったら参照ください。

(注) After Effectsの場合、3Dテキストを標準機能で作れるのでBlenderは不要です。

3. Unityでエフェクトをつける

3-1. 3Dテキストの配置

まずは配置します。

3DテキストをUnityに配置した例

次に、Materialを新しく作って、色、透過率などを変更します。

3DTextのMaterial設定

「逃げ恥」では、3Dテキストが透けて見えていたので、Rendering ModeをOpaqueからFadeに変更します。

次に、Albedoの色を変更して、透過率を50%程度に下げます。また、環境光の影響を受けずに好きな色を再現できるよう、Emissionを有効にして色を設定しました。この時点でこのようになります。

Materialを調整した3Dテキストの例

3-2. 文字と一緒に出てくるパーティクル

「逃げ恥」のオープニングでは、3Dテキストが現れるとき、色々な図形と一緒に表示される場合がありました。下記を参考にさせていただきました。

【Unity】パーティクルに複数の種類のテクスチャを使う - おもちゃラボ

追加したのは下記です。

Particleの発生源となるGameObject

CameraのPositionがx,y,z全て0のとき、rotation.x=-180にしておくことで、奥からカメラ方向にパーティクルが飛ぶようにしました。

Particleの回転

0〜360度に設定することで、ランダムな方向で発生させました。

複数テクスチャを使うパーティクルコンポーネントの設定例

テクスチャを新規にPhothoshopで作成

まず、単色(ここでは青色)の長方形を作り、その中に白色の図形を入れていきます。

複数テクスチャの原型

プリントスクリーンでキャプチャし、青い四角形(と白色の図形)以外を切り取ってからPhotoshopで開き、「クイック選択ツール」を選択して、青色付近をマウスでなぞっていきます。

Photoshopのクイック選択ツールの場所

次に、「編集」->「消去」を選択して、選択部分を消します。

Photoshopでの選択範囲の消去方法

このようになります。

Photoshopで選択範囲を消去した結果

あとは、このレイヤーの不透明度を変更します。

Photoshopでのレイヤー不透明度の変更箇所

初期値100%に対して、60%まで落としてみました。

Photoshopで不透明度を60%まで落とした結果

これをUnityで使用すると、このようになります。MaterialはUlint/Textureにしています。

3Dテキストにパーティクルをつけた結果

参考までに、作成した図形を公開します。自由に使っていただいて大丈夫です。

particle5.png - Google ドライブ

3-3. レンズフレア

これは逃げ恥にはなかったですが、文字の出力方向に合わせて移動させてみました。Unityでレンズフレアを使うには、まず下記のアセットをインポートしておきます。

Lens Flares | Particles & Effects | Unity Asset Store

次に、空のGameObjectを作り、Lens Flareコンポーネントをアタッチします。

UnityによるLensFlareコンポーネント追加方法

コンポーネント内の「Flare」に先ほどインポートしたアセットを指定します。今回は「85mm Flare」を指定しました。あとは3D文字に近い色に調整します。

UnityのLens Flareを調整した結果

3-4. 紙吹雪

オリジナルを参考にして、薄いピンク色の紙吹雪を再現しました。方法はこちらを参考にさせていただきました。

【Unity】パーティクルで紙ふぶきを散らす - テラシュールブログ

紙吹雪が出る仕組みを作った後、発生源のrotation.z=-90に設定し、画面の右から飛んでくるようにしました。

紙吹雪を追加した例

3-5. バブル

これも逃げ恥にはなかったですが、文字の出現に合わせてバブルを表示させました。ちょうどよいアセットがあったので、そのまま使いました。

Jiggly Bubble Free | Environment | Unity Asset Store

文字色に近い色に調整しました。こんな感じです。

Unityでバブルエフェクトを追加した結果

4. Timeline機能でテキストをタイミングよく表示させる

作成した3Dテキストや各種エフェクトは、Timeline機能を使って表示させました。Timelineの使い方はこちらにまとめたので、詳細説明は省略します。

【Unity2017.2.0f3版】Unityタイムラインの５つの基本機能の使い方と、Cinema Directorとの違いを整理しました - CrossRoad

まず、表示させたい3Dテキストを並べます。

3Dテキストを並べた結果

そして、Timelineを使って文字の出現タイミングを設定していきます。今回、縦方向の文字は１文字ずつ表示させたので、例えば「ブライダルメイド」は、このように１文字ずつ出現タイミングを設定しました。

1文字ずつの出現タイミングをUnityのTimelineで調整した例

エフェクトのタイミングも同様です。レンズフレアは文字の出現に合わせて移動させたので、このようにposition移動を設定しました。

Lens Flareの出現タイミングをUnityのTimelineで調整した例

文字と一緒に表示されるパーティクルについては、Active Trackを使って指定時間だけ表示されるように設定しました。

パーティクルの出現タイミングをUnityのTimelineで調整した例

あとは、単に文字が表示されるだけだと単調なため、Cameraオブジェクトを少しずつ引くと同時に、背景の画像も動かしています。

Cameraと背景画像のpositionをUnityのTimelineで調整した例

最終的にこのようになります。当日使用した動画では新婦の映像も入れましたが、ここでは省略しています。

みなとみらいの風景はこちらを使わせていただいております。
File:MinatoMirai21.jpg - Wikimedia Commons

5. 書き出し

Unity Editorで再生しながら、画面キャプチャーソフトで画面を録画します。私はMacだったのでQuick Time Playerの標準機能で画面収録を使いました。Windows10(Fall Creators Update以降)の場合は、WindowsキーとGを同時押しすれば、画面を録画することができます。