ef78121a-3961-5ed1-899e-71c2e8593f21__i18n_ja_jp:zx7pohSEomVRos4yXEn9KH

TextMesh Pro を使ってみよう

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

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

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

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

TextMeshPro_1.mp4

TextMesh Pro は、ハイクオリティなテキストのための使いやすいシステムです。テキストの外観やフォーマットのオプションが豊富で、プロジェクトのユーザーインターフェースにプロフェッショナルなタッチを簡単に加えることができます。このチュートリアルでは、TextMesh Pro で使用するためのフォントの準備、TextMesh Pro オブジェクトの新規作成、およびそれらのオブジェクトの変更について学びます。

Games

Film

Automotive

Unity で作る UI 入門

VR カリキュラムフレームワーク用リソース

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ここでは、日付と時刻の機能にアクセスするために、スクリプトで　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 行目に以下のように入力します： 

clockText.text = DateTime.Now.ToString();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. TextMesh Pro を使ってみよう

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

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

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

Complete this tutorial