TextMesh Pro へのクイックスタート

1. TextMesh Pro を使ってみよう

このチュートリアルは、Unity 2019 LTS を使用して検証されています

TextMesh Pro は、ハイクオリティなテキストのための使いやすいシステムです。テキストの外観やフォーマットのオプションが豊富で、あらゆるプロジェクトのユーザーインターフェースにプロフェッショナルなタッチを簡単に加えることができます。

2. TextMesh Pro テキストオブジェクトの作成

1. GameObject ドロップダウンを使うか、Hierarchy ウィンドウで右クリックして、UI > TextMesh Pro - Text を選択します。

2. プロジェクトで初めて TextMesh Pro（TMP）を使用したとき、Unity は TMP Essentials と Examples & Extras パッケージのインポートを提案します（TextMesh Pro アセットパッケージをまだインポートしていない場合）。Import TMP Essentials をクリックし、ウィンドウを閉じます（画像 01）。

画像 01：また、TMP のインポートは、プロジェクト作成時にアセットパッケージとして含めることもできます。

3. Scene タブにテキストが表示されていない場合は、Hierarchy 上でクリックして強調表示させ、マウスカーソルが Scene ビューにある状態でキーボードの「F」キーを押します。

4. Inspector の右上にある鍵マークをクリックすると、「TextMesh Pro Text」オブジェクトにフォーカスを保持します。

5. Rect Transform の設定で、テキストエリアのサイズを 300×100 に設定します (画像 02)。

画像 02：Rect Transform は、テキストエリアの位置とサイズを制御します

6. Text Mesh Pro UGUI Inspector の Font Settings セクションで、テキストの折り返しとオーバーフローを有効にします (画像 03)。

画像 03：TextMesh Pro には、多彩なレイアウトと外観オプションが用意されています。

7. Material Preset や、各種フォントの設定を変えてみましょう。フォントの色を設定するには、画像 03 のように頂点の色を変更する方法と、Material の設定で設定する方法があります。Inspector の下部にある Material の三角マークをクリックすると、フォントの Face、Outlene、Underlay（ドロップシャドウ）の設定が表示されます (画像 04)。

画像 04：2 つのチェックボックスの外側にあるグレーのバーをクリックすると、そのフォントの特定の設定に関するプロパティの表示/非表示を切り替えることができます。

8. Outline セクションの右半分にあるチェックボックスをクリックし、セクション内の他の場所をクリックすると、その設定が表示されます。

9. テキストの色や太さを調整します (画像 05)。

画像 05：テキストにアウトラインを加えることで、混雑した環境でも見やすくなります。

10. Underlay と Face の設定を変更してみてください。右上の歯車をクリックして Reset を選択すると、デフォルトの設定に戻ります (画像 06)。

画像 06：このメニューでは、元のマテリアル設定に戻す、マテリアルのプロパティを転送する、そしてマテリアルのプリセットを作成することができます。

11. フォントの Material Preset を試してみて、必要に応じてフォント設定を調整します (画像 07)。

画像 07：TextMesh Pro には 3 つのマテリアルプリセットが同梱されており、様々な設定の効果を素早く試すことができます。

3. コードによる TextMeshPro オブジェクトへのアクセス

ここでは、日付と時刻の機能にアクセスするために、スクリプトで　System の名前空間（namespace）を使用しています。TextMesh Pro では TMPro の名前空間のみが必要です。

1. GameObjectドロップダウンから Create Empty を選択し、名前を「ClockDisplay」とします。

2. 「Clock」という新しいスクリプトを作成し、ClockDisplay にアタッチします。Project ウィンドウの Clock をダブルクリックして、Visual Studio または MonoDevelop を開きます。Start() メソッドは、今回の演習では使用しないので削除します。

3. 4 行目から、以下のように入力します：

4. 8 行目に、以下のように入力します：

5. Update の 17 行目に以下のように入力します：

6. これで Clock スクリプトの完成です。変更を保存して Unity に戻ります (画像 08)。

画像 08：完成した Clock スクリプト

7. 演習 1 で作成した TextMesh Pro オブジェクトを、Clock インスペクターの Clock Text と表示されたスロットにドラッグします。

8. プレイボタンを押すとデモが始まります。現在の日付と時刻が、TextMesh Pro の Text Inspector で指定した Material の設定で表示されます。

9. 準備ができたら、プレイモードを終了します。

4. TextMesh Pro で使用するためのフォントの準備

1. まだ Assets の中に Resources フォルダーがない場合は、Resources フォルダーを作成し、その中に「Fonts」というフォルダーを作成します。ここに、作成した Font Asset を格納します。

2. フォントファイル（OpenType または TrueType）を Resources フォルダーにドラッグします。

3. Window ドロップダウンから TextMesh Pro > Font Asset Creator を選択します。

4. Font Source スロットの横にある丸いボタンをクリックして、フォントを選択します (画像 09)。また、Project ビューからスロットにフォントを直接ドラッグすることもできます。

画像 09：Font アセットは、プロジェクト間で再利用することができます。

5. Generate Font Atlas をクリックします。

6. Save をクリックします。

7. Assets > Resources > Fonts と進み、フォントの名前を決めて Save をクリックします。

8. それでも Inspector に表示されない場合は、Hierarchy ウィンドウ内の TextMesh Pro Text オブジェクトをクリックして強調表示させます。

9. Font Asset の横の丸いボタンをクリックして、先ほど作成した Font Asset を選択します。

10. プレイモードに入ると、新しい Font Asset の動きが確認できます。

11. プレイモードを終了します。

TextMesh Pro は高い汎用性を持っています。ゲーム、グラフィックアプリケーション、ビデオなど、テキストを必要とするあらゆる場面で使用することができます。