Lesson 7.3 - タイトル

1. 授業概要

2. TextMeshPro のインストール

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

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

画像 01：TMP Essential Resources のインポート方法

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

画像 02：パッケージをインポートするためにチェックしなければならないボックス

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

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

画像 03：TMP フォントのインポート方法

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

画像 04：フォントのみを選択した場合の TMP Examples と Extras

3. テキストの追加とスタイリング

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

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

画像 05：Fonts フォルダー内の Bangers

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

画像 06：Font Asset の作成方法

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

画像 07：Bangers フォントの上に Bangers SDF がある

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

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

画像 08：TextMesh Pro ゲームオブジェクトの作成方法

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

画像 09：Game ビュー内のテキスト

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

画像 10：Hierarchy 内の TitleCanvas

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

画像 11：Canvas Scale Factor を Scale With Screen Size へ変更する方法

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

画像 12：Canvas Scaler の設定を調整する方法

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

画像 13：Title ゲームオブジェクト

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

画像 14：テキストの変更する場所

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

画像 15：Rect Transform の値を変更する

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

画像 16：Center、Middle の Anchor Preset

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

画像 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 を中央に変更します。

画像 18：設定を調整した TextMesh Pro - Text (UI) セクション

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

画像 19：基本的な調整を行ったタイトル

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

画像 20：Extra Settings の調整

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

画像 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 に設定します。

画像 22：タイトルの周りに境界線を作成するために必要な追加設定

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

画像 23：完成したタイトル

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

4. テキストのフェードイン/フェードアウト

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

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

画像 24：Timeline ウィンドウで右クリックして、新しい Track Group を作成

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

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

画像 25：Title Group へのアニメーショントラックの追加

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

画像 26：アニメーショントラックを「Title」に割り当てる

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

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

画像 27：録画ボタン

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

画像 28：TextMeshPro - Text (UI) 下の Vertex Color

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

画像 29：Color の A の値を調整する場所

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

画像 30：約 20 Frame で 255 に戻ったアルファ値

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

画像 31：Graph エディターでの個々のキーの調整

画像 32：2 番目のキーフレームを 35 フレームインに移動して、フェードインがより長い時間にわたって発生するようにしました

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

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

画像 33：新しいキーを追加してフェードアウトを開始する

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

画像 34：アルファ値を 0 に設定すると、タイトルのフェードインとフェードアウトが可能になります

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

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

画像 35：キーを右クリックしてキーフレームの設定を変更する

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

画像 36：録画ボタンをもう一度クリックして録画を終了する

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

画像 37：録画終了後のアニメーションの調整

画像 38：最終キーフレームを frame 85 に戻す

5. ビデオのフェードイン/フェードアウト

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

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

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

画像 39：黒の画像の作成

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

画像 40：Hierarchy 内の Image ゲームオブジェクト

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

画像 41：Anchor Preset を stretch、stretch に変更

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

画像 42：Image の色を黒に変更

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

画像 43： Image の新しい名前「FadeInToBlack」

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

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

画像 44：Add Animation Track の設定

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

画像 45：Timeline をロックする方法

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

画像 46：空のアニメーショントラックを FadeInToBlack に割り当てる

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

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

画像 47：FadeInToBlack の alpha 値を調整する場所

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

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

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

画像 48：映像がフェードアウトしたときの Graph エディターと Game ビュー

6. まとめ

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