渋谷ほととぎす通信

「Unityをわかりやすく」初心者のためのゲーム作りブログ

【初心者向け】TextMeshProの始め方

【初心者向け】TextMeshProの始め方

こんにちは、Unityエンジニアのオオバです。

TextMeshPro(テキストメッシュプロ)の始め方を解説します。

UnityのUI上にテキストを表示させる場合、
TextMeshPro一択 です。

Unityが提供するUIシステム(uGUI)にも
Textと呼ばれる機能がありますが、
UIデザイナーの皆さんの要望には答えられない です。

具体的には次の2点。

  • 文字間変更できない(カーニングできない)
  • アウトライン表示すると透明度でアニメーションすると汚い

大きくこの2つを解決することができるTextMeshPro。

  • とりあえず触ってみたい
  • 少し気になっている

という方に向けてわかりやすく解説していきます。

👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!

TextMeshProのインストールは不要

TextMeshProを使うために特別準備は不要です。

本記事はUnity2020.3.19f1を使用しています。
現バージョンで TextMeshProはUnityに
最初からインストールされています。

もしインストールされていない場合は
パッケージを確認ししましょう。

【初心者向け】TextMeshProの始め方_0

Window > PackageManager

【初心者向け】TextMeshProの始め方_1

  • ① : Packages: Unity Registry をプルダウンから選択
  • ② : TextMeshPro をクリック
  • ③ : Install ボタンをクリック

これでインストールされます。

実際にTextMeshProを使っていきましょう。

ヒエラルキーにTextMeshProを追加

【初心者向け】TextMeshProの始め方_2

ヒエラルキーを右クリック > UI > Text - TextMeshProをクリック。

【初心者向け】TextMeshProの始め方_3

すると TMP Importer というウィンドウが表示されます。
Import TMP Essentials をクリックして
ウィンドウを閉じます。

ちなみに Import TMP Essentials とは
TextMeshProのデフォルト設定ファイルのインストールです。

今後開発していく上でカスタムするファイル群となります。
本記事は初心者向けのため割愛。

【初心者向け】TextMeshProの始め方_4

このように Text(TMP) が追加されました。

ちなみにTMPとは TextMeshPro の略。
デフォルトのTextと区別するために記述されていると思われます。

ではTextMeshProでテキストを描画していきましょう。

これだけは覚えておこうTextMeshProの6つの機能

TextMeshProの機能はメッチャあります(笑)。
一度に覚える量としては多すぎるため、
まずは基本となる6つの機能を紹介します。

【初心者向け】TextMeshProの始め方_5

  • ① : テキスト入力欄
  • ② : テキストのサイズ
  • ③ : テキストカラー
  • ④ : 文字間(カーニング)
  • ⑤ : 行間
  • ⑥ : 整列(各方向に文字を揃えられます)

とりえあえずテキストを使う上で代表的なもの6つ。
まずはこれだけ覚えましょう。

従来のTextでは、できなかった文字間指定を
取り上げて解説します。

文字間指定はSpacing Options

【初心者向け】TextMeshProの始め方_6

文字間は Spacing Options
Character で指定します。

Spacing Options Character : 0

【初心者向け】TextMeshProの始め方_7

Spacing Options Character : 60

【初心者向け】TextMeshProの始め方_8

待望の文字間を指定できるようになりました。

【初心者向け】TextMeshProの始め方_9

プログラミングすればアニメーションも可能です。

まとめ : 【初心者向け】TextMeshProの始め方

記事の内容を簡単にまとめます。

  • TextMeshProは特別なインストール不要
  • Import TMP Essentials する
  • 従来のTextと同じようにuGUIで使用可能
  • 文字間の指定が可能になった!

こんな感じです。

最初からUnityにインストールされているため、
TextMeshProを始めること自体は超簡単 でしたね。

本記事では従来のTextと大した進化の差を
感じなかったかも知れません。

あえて言うなら行間指定ができるようになったくらい。
(これだけでもすごいのですが)

TextMeshProをあなどらないで下さい。

本記事はあくまで導入編です。

  • フォントを変えたい
  • アウトラインを表示したい
  • 飾り文字を使いたい
  • 他にどんな便利機能があるの?

などなど。

これらについては 別記事 で詳しく、
わかりやすく 解説していきます。

TextMeshProは今後のUnityのUIを支えていく重要な機能 の1つです。
今マスターしておいて損はないです。

ぜひともUIデザイナー自身がUnity上でさわってみて理解し、
ワンステップ上のUIデザイナー を目指してみてはいかがでしょうか。

「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
ぜひチャンネル登録をお願いします!

最後まで読んでいただきありがとうございました!
すばらしいTextMeshProライフをお過ごしください。

オススメ記事
検証環境
  • TextMeshPro v3.0.6
  • Unity2020.3.19f1