こんにちは、Unityエンジニアのオオバです。
TextMeshPro(テキストメッシュプロ)の始め方を解説します。
UnityのUI上にテキストを表示させる場合、
TextMeshPro一択 です。
Unityが提供するUIシステム(uGUI)にも
Textと呼ばれる機能がありますが、
UIデザイナーの皆さんの要望には答えられない です。
具体的には次の2点。
- 文字間変更できない(カーニングできない)
- アウトライン表示すると透明度でアニメーションすると汚い
大きくこの2つを解決することができるTextMeshPro。
- とりあえず触ってみたい
- 少し気になっている
という方に向けてわかりやすく解説していきます。
👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!
TextMeshProのインストールは不要
TextMeshProを使うために特別準備は不要です。
本記事はUnity2020.3.19f1を使用しています。
現バージョンで TextMeshProはUnityに
最初からインストールされています。
もしインストールされていない場合は
パッケージを確認ししましょう。
![【初心者向け】TextMeshProの始め方_0](https://i.gyazo.com/b8682788d7ab9d9f6354573b83e863a1.png#291__500)
Window > PackageManager
![【初心者向け】TextMeshProの始め方_1](https://i.gyazo.com/1200e6581d638430cac0274c019c1d79.png#750__471)
- ① : Packages: Unity Registry をプルダウンから選択
- ② : TextMeshPro をクリック
- ③ : Install ボタンをクリック
これでインストールされます。
実際にTextMeshProを使っていきましょう。
ヒエラルキーにTextMeshProを追加
![【初心者向け】TextMeshProの始め方_2](https://i.gyazo.com/2c07b5f65c12c5a34e53a5c6d81be467.gif)
ヒエラルキーを右クリック > UI > Text - TextMeshPro
をクリック。 ![【初心者向け】TextMeshProの始め方_3](https://i.gyazo.com/0b7df6130e152c49444736ddf16ca405.png#562__227)
すると TMP Importer というウィンドウが表示されます。
Import TMP Essentials をクリックして
ウィンドウを閉じます。
ちなみに Import TMP Essentials とは
TextMeshProのデフォルト設定ファイルのインストールです。
今後開発していく上でカスタムするファイル群となります。
本記事は初心者向けのため割愛。
![【初心者向け】TextMeshProの始め方_4](https://i.gyazo.com/eafe9dad9426b0943cd31e01727c825b.png#744__304)
このように Text(TMP) が追加されました。
ちなみにTMPとは TextMeshPro の略。
デフォルトのTextと区別するために記述されていると思われます。
ではTextMeshProでテキストを描画していきましょう。
これだけは覚えておこうTextMeshProの6つの機能
TextMeshProの機能はメッチャあります(笑)。
一度に覚える量としては多すぎるため、
まずは基本となる6つの機能を紹介します。
![【初心者向け】TextMeshProの始め方_5](https://i.gyazo.com/cbc0d305e9bea01435cbae872d23d591.png#348__500)
- ① : テキスト入力欄
- ② : テキストのサイズ
- ③ : テキストカラー
- ④ : 文字間(カーニング)
- ⑤ : 行間
- ⑥ : 整列(各方向に文字を揃えられます)
とりえあえずテキストを使う上で代表的なもの6つ。
まずはこれだけ覚えましょう。
従来のTextでは、できなかった文字間指定を
取り上げて解説します。
文字間指定はSpacing Options
![【初心者向け】TextMeshProの始め方_6](https://i.gyazo.com/dcb05d5ed971ee869655b8cc52ac0cbe.png#562__74)
文字間は Spacing Options の
Character で指定します。
![【初心者向け】TextMeshProの始め方_7](https://i.gyazo.com/1f131aadc9ecf62bfd741b2d9da2f075.png#750__247)
![【初心者向け】TextMeshProの始め方_8](https://i.gyazo.com/323d721b8a3e05164a92029648274dc1.png#750__247)
待望の文字間を指定できるようになりました。
![【初心者向け】TextMeshProの始め方_9](https://i.gyazo.com/f9eabf06362c334c2c10f93445716916.gif)
プログラミングすればアニメーションも可能です。
まとめ : 【初心者向け】TextMeshProの始め方
記事の内容を簡単にまとめます。
- TextMeshProは特別なインストール不要
- Import TMP Essentials する
- 従来のTextと同じようにuGUIで使用可能
- 文字間の指定が可能になった!
こんな感じです。
最初からUnityにインストールされているため、
TextMeshProを始めること自体は超簡単 でしたね。
本記事では従来のTextと大した進化の差を
感じなかったかも知れません。
あえて言うなら行間指定ができるようになったくらい。
(これだけでもすごいのですが)
TextMeshProをあなどらないで下さい。
本記事はあくまで導入編です。
- フォントを変えたい
- アウトラインを表示したい
- 飾り文字を使いたい
- 他にどんな便利機能があるの?
などなど。
これらについては 別記事 で詳しく、
わかりやすく 解説していきます。
TextMeshProは今後のUnityのUIを支えていく重要な機能 の1つです。
今マスターしておいて損はないです。
ぜひともUIデザイナー自身がUnity上でさわってみて理解し、
ワンステップ上のUIデザイナー を目指してみてはいかがでしょうか。
![](https://i.gyazo.com/470722b63a1aa2135d3de2bdebccd4cb.jpg#1920.0__1280.0)
この記事が気に入ったらフォローしよう
「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
ぜひチャンネル登録をお願いします!
最後まで読んでいただきありがとうございました!
すばらしいTextMeshProライフをお過ごしください。
- TextMeshPro v3.0.6
- Unity2020.3.19f1