Lesson 7.3 - タイトル

TextMesh Pro は、Unity でスタイリッシュなテキストを作成できるパッケージです。TextMesh Pro に不可欠なリソースとフォントをプロジェクトにインポートします。

1. トップメニューのドロップダウンから選択します：Window > Text Mesh Pro > Import TMP Essential Resources の順に選択します（画像 01）。

2. TextMesh Pro パッケージ全体が選択されていることを確認し、Import をクリックします（画像 02）。

3. トップメニューのドロップダウンから、以下の順に選択します：

Window > TextMeshPro > Import TMP Examples and Extras (画像 03).

4. ここで必要なのは Fonts パッケージだけです。TextMesh Pro のボックスのチェックを外して、不要なボックスの選択を解除します。フォント パッケージのみを選択するために、Fonts ボックスにチェックを入れ、Import をクリックします (画像 04)。

プロジェクトに必要なツールが揃ったので、いよいよタイトルを作成しましょう。Bangers というフォントを使用します。まず、Font Asset を作成します。

1. Assets の中の TextMesh Pro フォルダーに移動して、 Examples and Extras > Fonts > Bangers の順に移動して、新しい Font Asset を作成します （画像 05）。

2. Bangers を右クリックして Create > TextMesh Pro > Font Asset の順に選択します（画像 06）。

これにより、Fonts フォルダー内に「Bangers SDF」(画像 07) という新しい Font のアセットが作成されます。

これで Font アセットが利用できるようになったので、タイトル自体を作成します。

3. Hierarchy の中で右クリックし、UI > Text - TextMeshPro（画像 08）の順に移動して、シーンに新しい TextMesh Pro ゲームオブジェクトを作成します。

これで Game ビューにテキストが表示されるはずです(画像 09)。

4. このステップでは、テキスト（TMP）ゲームオブジェクトの親となる Canvas も作成します。 これを 「TitleCanvas」という名前に変更します (画像 10)。

• TitleCanvas が選択されていることを確認します。Canvas Scaler の Inspector で UI Scale Mode を Constant Pixel Size から Scale With Screen Size に変更して、タイトルを 16:9 のアスペクト比に比例した比率に保つようにします (画像 11)。

5. Canvas Scaler の下の Reference Resolution を X: 1920 Y: 1080 に変更し、タイトルが画面解像度に比例して中央に配置されたままになるように、Match の値を 0.5 に変更します (画像 12)。

6. Hierarchy ウィンドウに戻り、Text (TMP) の名前を「Title」に変更します (画像 13)。

7. Inspector で、TextMeshPro - Text (UI) に移動し、「New Text」を「The Chase」に変更します (画像 14)。

8. Rect Transform の下で、Width を 1280 に、Height の値を 250 に変更します（画像 15）。これにより、タイトルが画面上の transform position に均等にスケーリングされるようになります。さらに、画面上の必要な位置にタイトルを配置するために、X と Y の position の値を 0 に変更します。

9. Anchor Presets で、center、middle のボックスをクリックして、タイトルをビューの中央に配置したままにします(画像 16)。

この時点で、タイトルは以下のようになります (画像 17)。まだ中央に表示されていないことに注意してください。これはサイズを大きくすれば変わるでしょう：

タイトルアセットを作成したら、次は美的なデザインのタイトルに匹敵するようにアメコミ調のスタイライズドな表現をするような見え方にしましょう。

10. Inspector の TextMesh Pro - Text (UI) タブに戻ります（画像 18）。

• Font Asset を Bangers SDF に変更します。
• Font Size を 250 に変更します。
• Vertex Color を変更してフォントの色を 1 色にするか、Color Gradient を有効にしてグラデーションを使用することができます。このチェックボックスを有効にして、1 色目を「#FFD900FF」、2 色目を「#FF006FFF」、3 色目を「#FF005BFF」、4 色目を「#A500FFFF」にしました。
• Alignment を中央に変更します。

結果は以下のようになるはずです（画像 19）。

11. Inspector で、Extra Settings の下にある Bangers Atlas Material の三角形を展開し、Face と書かれた設定で、Color をライトピンクに変更し、Dilate の値を 0.5 に変更します（画像 20）。このようにすると、タイトルが大きく表示され、文字が重なります。

結果はこのようになります (画像 21) ：

12. テキストの周りに 3 色の境界線を作成すると、テキストがパッと現れるのに役立ちます (画像 22)。

• Outline の Color を Navy Blue に変更し、Thickness の値を 0.7 に変更します。Outline とは、テキストの外縁と一番外側の境界線要素のことです。
• Underlay は、一番内側のボーダー要素です。Underlay チェックボックスを有効にしてから、もう一度 Underlay フィールドを選択してプロパティを展開します。Underlay の色を Purple（Color 設定の Alpha が 255 に設定されていることを確認してください）、Offset X を 0.15、Offset Y を 0.2、Dilate の値を 0.62、Softness の値を 0.07 に変更します。
• Glow は、Outline と Underlay の中間の色です。Glow チェックボックスを有効にしてから、再度 Glow フィールドを選択してプロパティを展開します。Glow の色を Turquoise に変更し、Alpha を 255 に設定します。Offset の値を 1、Inner の値を 0.255、Outer の値を 0.7、Power 値を 0.3 に設定します。

タイトルは以下のようになります（画像 23）：

TextMesh Pro は、テキストのスタイリングに多くの柔軟性を提供します。さらにいっそうユニークに見えるようにしたい場合は、タイトルの設定を試してみてください。

これで定型化されたタイトルが完成しました。映画の最初にタイトルをフェードインしたりフェードアウトしたりしてみましょう。opacity（不透明度）や alpha channel の値をアニメーション化することでフェードインとフェードアウトを行います。まず、タイトルの Animation Track を作成します。

1. Timeline ウィンドウで右クリックして、新しい Track Group を作成します（画像 24）。

2. Track Group の名前を「Title Group」に変更します。

3. タイトルの Title Group に Animation Track を追加します（画像 25）。

4. Hierarchy 内の「Title」ゲームオブジェクトを空のアニメーショントラックにドラッグして、Create Animator on Title をクリックします（画像 26）。

タイトルのアニメーショントラックができたので、その不透明度をアニメーション化します。

5. 赤色の録画ボタンをクリックすると、タイトルのアニメーションが始まります。

6. Timeline の再生ヘッドカーソルが Frame 0 に設定されている状態で、Hierarchy ウィンドウで「Title」ゲームオブジェクトが選択されていることを確認します。次に、TextMeshPro - Text（UI）コンポーネント内の Inspector ウィンドウで Vertex Color を選択します（画像 28）。

7. A (alpha) の値を 0 に変更して、タイトルを透明にします（画像 29）。

8. Timeline で、Frame 番号 20 に向かってスクラブし、タイトルの alpha 値を 255 に戻して再び表示するようにします。これで、タイトルは完全にクリアな状態からフェードインします（画像 30）。

9. Graph エディターで個々のキーの時間と値を調整することで、タイトルのフェードインの見え方をさらに調整することができます。これは、キーを右クリックして Edit Key を選択することで実行できます。フェードイン時間を長くするために、キーの開始時間を 20 フレームインから 35 フレームインに変更してみてください (画像 31) と (画像 32)。

タイトルがフェードインしてきたので、アクションが始まったらフェードアウトしましょう。

10. Timeline を 約 81 フレームインにスクラブし、Graph エディターを右クリックして新しいキーを追加します（画像 33）。これにより、タイトルと同じ 255 alpha 値の新しいキーフレームが追加されるはずです。

11. 89 フレームインほど前にスクラブし、タイトルのアルファ値を 0 に変更してフェードアウトを作成します（画像 34）。

フェードアウトの設定を調整することで、より緩やかに見えるようになり、映像制作のタイミングに合わせた演出ができるようになりました。

12. 3 番目のキーフレームを右クリックして、Edit Key を選択し、時間を 65 フレームに変更します。4 番目のキーフレームを右クリックして、Edit Key を選択し、時間を 75 フレームに変更します（画像 35）。

13. このアニメーションの編集を終了するには、点滅する赤色の丸ボタンをクリックして保存してください（画像 36）。

14. また、タイミングが合うようになるまで遷移をクリックしてドラッグすることで、さらに調整することもできます（画像 37）。最終的なキーフレームを 85 フレームまでドラッグしてみてください（画像 38）。

最後に、作品の最初と最後にフェードインとフェードアウトを追加します。これを行うには、タイトルで行ったように、黒のイメージを作成し、その不透明度 (opacity) を調整します。

まず、キャンバスを覆うような黒い画像を作成します。

1. Hierarchy で、TitleCanvas を右クリックし、 UI > Image の順に選択します（画像 39）。

これにより、TitleCanvas の子である Image ゲームオブジェクトが作成されます（画像 40）。

2. Inspector で、Rect Transform の下の Anchor Presets を Stretch、Stretchに変更し、Alt/Optionキーと Shift キーを押しながら画像を拡大して、ビュー全体に収まるようにします（画像 41）。すると、すぐに白い画像が Game ビュー全体を覆っているのがわかるはずです。

3. 以下の Image の下で、色を白から黒に変更します (画像 42)。これにより、Game ビューの色が白から黒に変わります。

4. ここで Image の名前を「FadeInToBlack」に変更します（画像 43）。

これで黒い画像ができました。タイトルと同じように、その不透明度 (opacity) をアニメーション化してフェードインとフェードアウトを作成しましょう。

5. Timeline で、Title Group を右クリックし、Add Animation Track を選択します（画像 44）。

FadeToBlack ゲームオブジェクトの Inspector で値を変更しながら作成した新しいアニメーショントラックを編集するには、Timeline の右上隅にある鍵のアイコンをクリックしてロックします（画像 45）。

6. FadeInToToBlack を空のアニメーショントラック上にドラッグして、Create Animator on FadeInToBlack を選択します (画像 46)。

7. 録画ボタンを押して、FadeInToBlack ゲームオブジェクトの不透明度 (opacity) をアニメーションさせます。

a. Timeline を 0 frames にスクラブし、Image の下の Inspector で色をクリックして、A（alpha 値）を 255に変更します（画像 47）。

b. 10 frames にスクラブし、A 値を 0 に変更します。 これでビデオはフェードインします。

c. フェードアウトするには、frame 485 のフレームで新しいキーを作成し、FadeInToBlack の alpha 値が 0 のままであることを確認します。

d. 515 フレームで最終フレームを作成し、FadeInToBlack のalpha 値を 255 に設定します。フェードアウトは、Graph エディター上ではこのように表示されるはずです（画像 48）。フェードインとフェードアウトをどの程度思い切ったものにするかによって、これらの値を自由に調整してください。

この授業では、TextMesh Pro を使ってスタイリッシュなタイトルを作成する方法と、Timeline を使ってタイトルとビデオ自体をフェードインおよびフェードアウトする方法を学びました。