UnityのTextMeshProを使ってみる

今回はUnityのTextMeshProを使ってみたいと思います。

既に他の記事でも使っていますが、改めてTextMeshProの使い方について見ていきたいと思います。

TextMeshProを試す場合は、既存のプロジェクトに追加する前に新しいプロジェクトでインポートして試してみた方がいいです。

今回使用しているUnityエディターのバージョンは2020.2.7f1になります。

TextMeshProとは

TextMeshProは以前からあるTextMesh（3Dのテキスト）とUGUI（UnityのUI）を代替することが出来る機能で、高度な制御が可能となっていたり、接写時もテキストが滲むようなことがなくなります。

以下が3つを比較したもので、TextMeshはテキストが滲んでいます。

UGUIとTextMeshProは変わりがないように見えますが、よりカメラを近づけるとUGUIも少し滲んでいるのがわかります。

TextMeshProをインポートする

Unityエディターのバージョンによってはデフォルトでインストールされている？かもしれませんが、インストールされていないこともあるので、まずはTextMeshProのインストールをしていきます。

UnityエディターのメニューのWindowからPackage Managerを選択します。

パッケージの種類をUnity Registryにし、TextMeshProを選択してInstallボタンを押しインストールします。

インストールが完了したら、UnityエディターのメニューのWindowからTextMeshPro→Import TMP Essential Resourcesを選択します。

これは、TMP（TextMeshPro）で使用するのに必要な物をインポートします。

新しくウインドウが出るので、何も変更せずにImportボタンを押します。

さらにUnityエディターのメニューのWindowからTextMeshPro→Import TMP Examples and Extrasを選択し、TextMeshProのサンプルをインポートするとTextMeshProを使ったサンプルを試せます。

これでTextMeshProのインストールと必要な物のインポートが終わりました。

TextMeshProの作り方

TextMeshProをインストールしたので、次はTextMeshProを実際に使ってみたいと思います。

TextMeshProはTextMesh（3Dテキスト）とUGUI（基本2DのUI）の二つを代替するものなので、TextMesh系なのか、UGUI系なのかで作り方が変わります。

TextMesh系の場合はヒエラルキーで右クリックから3D Object→Text – TextMeshProを選択します。

UGUI系の場合はヒエラルキーで右クリックからUI→Text – TextMeshProを選択します。

他のUIで使用しているテキストもTextMeshProで作ることが出来ます。

両方ともText – TextMeshProという項目になっているので同じ物が出来るような気がしますが、ヒエラルキーを見ると以下のように3DオブジェクトとUIという違いがあります。

TextMesh系のTextMeshProのテキストのインスペクタは以下のようにMesh Rendererコンポーネントを持つゲームオブジェクトになります。

UGUI系のTextMeshProのテキストのインスペクタは以下のようにCanvas Rendererコンポーネントを持つゲームオブジェクトになります。

日本語を使えるようにする

TextMeshProのデフォルトで設定されているフォントでは日本語が使えません。

試しにヒエラルキー上で右クリックからUI→Text – TextMeshProを選択し、Canvas子要素のText（TMP）を選択して、インスペクタのText Inputに「あいうえお」という文字を入力してみてください。

以下のようにフォントがない文字は□（フォントがない場合の代替文字）で表示されます。

そこで、日本語を使えるフォントをダウンロードして使う事にします。

フォントフリー - 無料の日本語フリーフォント投稿サイト

日本語フリーフォント/ダウンロードなら「フォントフリー」。漢字やカタカナ、ひらがなをはじめとした日本語の無料フォントを、明朝やゴシック体、手書きなどのカテゴリーから探すことができます。

今回は「木漏れ日ゴシック」というフォントを使わせて頂きます。

木漏れ日ゴシック - 無料で使える日本語フォント投稿サイト｜フォントフリー

線がところどころ切れている、ステンシルっぽい装飾が特徴的なゴシックフォント。文字のデザインにどこかあたたかさを感じます。文章にも、もちろんロゴにも向いているフォントです。ひらがな・かたかな・漢字まで収録されています。

配布サイトからzipファイルをダウンロードしたら解凍し、komorebi-gothic.ttfファイルをUnityエディターのAssetsフォルダにドラッグ＆ドロップしてインポートします。

TextMeshProで使用するアセットフォントの作成

TextMeshProでは先ほどインポートしたフォントをさらにTextMeshPro用のアセットフォントに変換し使用する必要があります。

動的フォントアセットの作成

TextMeshProで使用するフォントアセットを動的（必要になった時に元のフォントからフォントアトラスを作成）に作成する場合はインポートしたフォントを選択した状態で右クリックからCreate→TextMeshPro→Font Assetを選択します。

こちらの場合は必要になった時にフォントからフォントアトラスを作成するので、元のフォントをビルドに含める必要があります。

フォントとフォントアセットをビルドに含める場合はこれらをAssets/TextMeshPro/ResourcesフォルダにあるTMP SettingsファイルのインスペクタのDefault Font AssetのPathで設定されているフォルダに入れておく必要があります。

デフォルトではResourcesフォルダのFonts & Materialsフォルダになっています。

静的フォントアセットの作成

動的フォントアセットを使うとフォントから必要な時にフォントアトラスを作成出来ますが、逐一作成するので、わたくしがタイピングゲームで動的フォントアセットを使った時に、その都度フォントアトラスを作成する必要があり、間に合わなくて文字を表示出来ないことがありました。

こういった場合はあらかじめフォントアトラスを作成しておいて、それを利用した方がいいです。

UnityエディターメニューのWindowからTextMeshPro→Font Asset Creatorを選択します。

Font Asset Creatorウインドウが開きます

Source Font Fileにはフォントアトラスを作成するフォント（今回の場合はインポートした木漏れ日ゴシックフォント）を設定します。

Sampling Point Sizeはフォントを再現する際のSDFサンプリングの制度を設定します。通常は50～70

Paddingはフォントマテリアルからの効果（アウトライン、グロー、ベベル）のサイズを決定します。

Packing Methodはアトラスにデータを入力する方法を選択します。Fastはフォントを素早くプレビューする際に適していて、Optimumは最終的にアトラスを作成する時に適しています。

Atlas Resolutionはフォントアトラスのテクスチャのサイズを設定します。

Character Setはフォントからフォントアトラスを作成する文字を選択します。ここで選択した文字群でフォントからフォントアトラスの生成をします。

Rendering Modeはレンダリングの方法です。

Get Kerning Pairsにチェックを入れるとフォントに埋め込まれたカーニング情報を使用出来ます。

使用する文字テキストファイルを作成する

Font Asset CreatorのCharacter Setでは設定した文字でフォントからフォントアセットを作る設定をします。

今回は使用する文字をあらかじめテキストファイルとして用意し、それを使ってフォントからフォントアセットを作るようにしたいと思います。

デスクトップ等にtext.txtファイルを作成し（中身は空のまま）、UnityエディターのAssetsフォルダにドラッグ＆ドロップします。

次に今取り込んだUnityエディターのtext.txtファイルをダブルクリックしてVisual Studioで開き、以下のように作成したいフォントアセットの文字を入力し、Ctrl＋Sキーを押して保存します。

ここで一つ問題があります。

Visual StudioではデフォルトでShift-JISという文字コードで保存される為、text.txtを選択し、インスペクタで確認すると文字化けしてしまいます。

そこで再びtext.txtをVisual Studioで開き、ファイルメニューから名前を付けて保存を選びます。

次に上書き保存ボタンの右の矢印を押し、エンコード付きで保存を選びます。

エンコードでUnicode（UTF-8 シグネチャ付き）を選択し、OKボタンを押します。

これでtext.txtをインスペクタで確認すると以下のように文字化けがなくなりました。

これで変換する文字群のファイルが出来たので、以下のように設定し、フォントからフォントアトラスを作成します。

Source Font Fileには木漏れ日ゴシックフォントファイルを設定します。

Packing MethodはOptimumを設定します。

Character SetではCharacters from Fileを選択し、Character Fileにtext.txtファイルをドラッグ＆ドロップして設定します。

設定が出来たらGenerate Font Atlasを押してフォントアトラスを生成します。

Characters Includeでフォントから生成されたフォントアトラスの数を確認出来ます。

今回は19文字を入れたテキストファイルからフォントアトラスを生成したので19文字全てが作成されました。

次にSaveボタンを押してフォントアトラスを保存します。

今回はAssetsフォルダ直に保存します。

これで静的なフォントアセットが出来ました。

ビルドに含めるには、動的フォントアセットと同じようにTMP SettingsファイルのDefault Font AssetのPathに設定されているフォルダに作成した静的フォントアセットを含める必要があります。

こちらの場合は既にフォントアトラスは作成済みなので元のフォントは含める必要はありません。

出来たフォントアセットであるkomorebi-gothic SDF.assetファイルをAssets/TextMeshPro/Resources/Font & Materialsフォルダに移動させます。

これでフォントアセットが出来ました。

先ほど作ったCanvasの子要素のText（TMP）のインスペクタでMain SettingsのFont Assetにkomorebi-gothic SDF.assetファイルをドラッグ＆ドロップして設定します。

これで「あいうえお」という文字がテキストに表示されます。

今回は19文字分のフォントアトラスしか生成していませんが、必要な文字をtext.txtに含めると多くのフォントアトラスを作れます。

注）作成出来るTextMeshProのフォントアトラスの文字は元のフォントに含まれている必要があります。つまり、元のフォントに該当する文字がない場合はTextMeshPro用に変換出来ません。

代替フォントを設定する

先ほど作ったkomorebi-gothic SDF.assetでは「あいうえおかきくけこabcde修学旅行」という文字のフォントアトラスを生成しました。

しかしそれ以外の文字をテキストに使用するとデフォルトである□が表示されます。

例えばテキストに「あいうえおかきくけこさしすせそabcdefghi123」という文字列を表示しようとすると、下のように□で表示されたりテキストが暗転表示されてしまいます。

そこで先ほど作ったkomorebi-gothic SDFでフォントアトラスが生成されていない場合に他のフォントアセットで代替表示できるようにしてみます。

別のフォントの昔々ふぉんとをダウンロードし、使用してみます。

昔々ふぉんと - 無料で使える日本語フォント投稿サイト｜フォントフリー

太めのフォルムが特徴的なユニークなフォント。和っぽい渋さと手書きの温かみがあり、名前のとおり少しノスタルジックな雰囲気を感じます。フォントサイズ大きめ、文字間をつめて使うのがおすすめです。ひらがな、カタカナ、英字、漢字は第一水準、第二水準のよく使うも

text.txtファイルをCtrl＋Dキーを押して複製し、名前をtext2.txtに変更します。

text2.txtファイルには「fghijklmです。」と入力します。

Font Asset Creatorを使ってフォントアトラスを作成します。

作成したフォントアトラスはAssets/TextMeshPro/Resources/Font & Materialsに移動させます。

次にAssets/TextMeshPro/Resources/Font & Materials/komorebi-gothic SDF.assetを選択し、インスペクタのFallback Font Assetsの＋を押して、gomarice_mukasi_mukasi SDFをドラッグ＆ドロップして設定します。

するとkomorebi-gothic SDFフォントアセットで用意されていない文字がgomarice_mukasi_mukasi SDFで代替されて表示されるようになりました。

代替フォントは＋を押して複数設定出来ます。

TextMeshProのマテリアルを作成してみる

TextMeshProの基本的な作り方と日本語を使う方法がわかりましたので、次はTextMeshProで使うテキストのマテリアルを作成してみたいと思います。

ヒエラルキーで右クリックをし、UI→Text – TextMeshProを選択し、Canvasの子要素にあるText(TMP)のインスペクタのTextMeshProコンポーネントのFont Assetに先ほど作成したkomorebi-gothic SDFを設定します。

このテキストのフォントアセットがkomorebi-gothic SDFになり、その下のMaterial Presetでkomorebi-gothic SDFに内包されているマテリアルがプリセットとして設定されます。

この内包されているマテリアルの設定を直接変更してテキストに色などの変化を加えてもいいんですが、同じフォントアセットを使って複数のマテリアルを切り替えるようにも出来ます。

フォントアセットのマテリアルプリセットを作成する

komorebi-gothic SDFに内包されているマテリアルを選択し、Ctrl＋Dキーを押して複製します。

名前の末尾を少し変更して、komorebi-gothic SDF MyMaterialとします。

設定する名前は使用するフォントアセット名は変更せずその後の名前を変更します。

今回の場合はkomorebi-gothic SDFフォントアセットを使用しているので、

komorebi-gothic 適当な名前

という感じにします。

他のやり方としてはkomorebi-gothic SDF.assetに内包されているマテリアルを選択し、インスペクタの名前の横の3つの丸を押し、Create Material Presetを選択することでも新しいマテリアルプリセットを作成できます。

ヒエラルキーのCanvas子要素のText(TMP)のインスペクタで、TextMeshProコンポーネントのMaterial Presetで今作成したkomorebi-gothic SDF MyMaterialへの切り替えが出来るようになります。

名前でkomorebi-gothicという部分を変更してしまうと選択欄に出てきません。

元々選択していたマテリアルはkomorebi-gothic SDFフォントアセットが内包するマテリアルです。

Assets/TextMeshPro/Resources/Fonts & Materialsフォルダのkomorebi-gothic SDF MyMaterial.matを選択し、インスペクタで設定を変更することが出来ます。

以下のようにテキストにテクスチャやアウトラインを設定してみます。

TextMeshProのテキストは以下のように選択したマテリアルによって変わりました。

TextMeshProの便利な機能

TextMeshProの便利な機能を使ってみます。

テキストサイズを超えるテキストがあったら別のテキストに表示する

普通のTextだとテキストのサイズを超えるテキストがある場合はそのテキストサイズに表示出来るテキストだけを表示したり、あふれたテキストもそのまま表示させるという設定が出来ました。

TextMeshProのテキストでも同じような設定がありますが、溢れたテキストを別のテキストに表示させるLinkedという機能があります。

ヒエラルキーのCanvas子要素のText(TMP)を選択し、インスペクタで以下のように設定します。

さらにTextMeshProコンポーネントのMain SettingsのOverflowをLinkedに変更し、ヒエラルキーのText(TMP)を選択した状態でCtrl＋Dキーを押して複製します。

Text(TMP)(1)を選択し、インスペクタのRect TransformのPosYを-56ぐらいにして、Text(TMP)のテキストの下あたりに位置するようにします。

以下のように二つのテキストが上下に並ぶ感じになります。

Text(TMP)のインスペクタのTextMeshProのMain SettingsのOverflowのLinkedにText(TMP)(1)ゲームオブジェクトをドラッグ＆ドロップして設定します。

こうするとText(TMP)にText(TMP)(1)がリンクされ、Text(TMP)のText Inputに入力して溢れたテキストがText(TMP)(1)に表示されるようになります。

自動ページ分割

TextMeshProのMain SettingsのOverflowをPageにするとテキストのサイズから溢れたテキストは自動でページ分割されます。

Pageの横の数値が現在のページで、最初のページは1で、数字を増やすと分割された他のページを見ることが出来ます。

Page横の数値を変えると違うページを表示することが出来ましたが、ゲーム等ではボタン等を押してページの遷移をする必要があるので、そのサンプルを作成してみます。

サンプルでは、戻るボタンと次へボタンを作成し、ボタンを押したらページの遷移をするようにしてみます。

既に存在するTextMeshProのテキストとは別に二つのボタンを作成します。

Text(TMP)に新しくPageScriptという名前のスクリプトを作成し、取り付けます。

using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;

public class PageScript : MonoBehaviour
{
	private TextMeshProUGUI textMeshProUGUI;

    // Start is called before the first frame update
    void Start()
    {
		textMeshProUGUI = GetComponent<TextMeshProUGUI>();
    }

	//　前のページを表示
	public void GoToPreviousPage() {
		//　最初のページより後のページを見ている時だけページを戻る
		if (textMeshProUGUI.pageToDisplay > 1) {
			textMeshProUGUI.pageToDisplay--;
		}
	}
	//　次のページを表示
	public void GoToNextPage() {
		//　現在のページがページ数より少ない時だけ次のページを表示
		if (textMeshProUGUI.pageToDisplay < textMeshProUGUI.textInfo.pageCount) {
			textMeshProUGUI.pageToDisplay++;
		}
	}
}

using System.Collections;

using System.Collections.Generic;

using TMPro;

using UnityEngine;

public class PageScript : MonoBehaviour

{

private TextMeshProUGUI textMeshProUGUI;

// Start is called before the first frame update

void Start()

{

textMeshProUGUI = GetComponent<TextMeshProUGUI>();

}

//　前のページを表示

public void GoToPreviousPage() {

//　最初のページより後のページを見ている時だけページを戻る

if (textMeshProUGUI.pageToDisplay > 1) {

textMeshProUGUI.pageToDisplay--;

}

//　次のページを表示

public void GoToNextPage() {

//　現在のページがページ数より少ない時だけ次のページを表示

if (textMeshProUGUI.pageToDisplay < textMeshProUGUI.textInfo.pageCount) {

textMeshProUGUI.pageToDisplay++;

}

次に、戻るボタンであるPreButtonのインスペクタのButtonのOnClickの＋を押し、Text(TMP)ゲームオブジェクトをドラッグ＆ドロップして、PageScriptのGoToPreviousPageメソッドを設定します。

NextButtonも同じようにしてPageScriptのGoToNextPageメソッドを設定します。

実行すると以下のような感じになりました。

スクリプトからテキストを操作してみる

TextMeshProのテキストも通常のTextと同じようにスクリプトから操作出来ます。

ヒエラルキーで右クリックから3D Object→Text – TextMeshProを選択し、TextMesh系のTextMeshProを作成します。

新しくTextMeshProTestスクリプトを作成し、Canvas子要素のUGUI系のText(TMP)と、今作成したTextMesh系のText(TMP)に取り付けます。

using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;

public class TextMeshProTest : MonoBehaviour
{
	//　3DであるTextMesh系のTextMeshPro
	private TextMeshPro textMeshPro;
	//　2DであるUGUI系のTextMeshPro
	private TextMeshProUGUI textMeshProUGUI;
	//　両方の親であるTMP_Textクラス
	private TMP_Text tmp_Text;
	public enum TextMeshProMode {
		TextMeshPro,
		TextMeshProUGUI,
		TMP_Text
	}
	//　インスペクタでどれを使うか選択するモード
	[SerializeField]
	private TextMeshProMode textMeshProMode;

    // Start is called before the first frame update
    void Start()
    {
		//　選択したモードで取得するコンポーネントを変える
        if(textMeshProMode == TextMeshProMode.TextMeshPro) {
			textMeshPro = GetComponent<TextMeshPro>();
			textMeshPro.SetText("<color=#ff0000>" + "aaa" + "</color>");
		} else if(textMeshProMode == TextMeshProMode.TextMeshProUGUI) {
			textMeshProUGUI = GetComponent<TextMeshProUGUI>();
			textMeshProUGUI.SetText("<color=#00ff00>" + "bbb" + "</color>");
		} else if(textMeshProMode == TextMeshProMode.TMP_Text) {
			tmp_Text = GetComponent<TMP_Text>();
			tmp_Text.SetText("<color=#0000ff>" + "ccc" + "</color>");
		}
    }
}

using System.Collections;

using System.Collections.Generic;

using TMPro;

using UnityEngine;

public class TextMeshProTest : MonoBehaviour

{

//　3DであるTextMesh系のTextMeshPro

private TextMeshPro textMeshPro;

//　2DであるUGUI系のTextMeshPro

private TextMeshProUGUI textMeshProUGUI;

//　両方の親であるTMP_Textクラス

private TMP_Text tmp_Text;

public enum TextMeshProMode {

TextMeshPro,

TextMeshProUGUI,

TMP_Text

}

//　インスペクタでどれを使うか選択するモード

[SerializeField]

private TextMeshProMode textMeshProMode;

// Start is called before the first frame update

void Start()

{

//　選択したモードで取得するコンポーネントを変える

if(textMeshProMode == TextMeshProMode.TextMeshPro) {

textMeshPro = GetComponent<TextMeshPro>();

textMeshPro.SetText("<color=#ff0000>" + "aaa" + "</color>");

} else if(textMeshProMode == TextMeshProMode.TextMeshProUGUI) {

textMeshProUGUI = GetComponent<TextMeshProUGUI>();

textMeshProUGUI.SetText("<color=#00ff00>" + "bbb" + "</color>");

} else if(textMeshProMode == TextMeshProMode.TMP_Text) {

tmp_Text = GetComponent<TMP_Text>();

tmp_Text.SetText("<color=#0000ff>" + "ccc" + "</color>");

}

TextMesh系のTextMeshProはTextMeshPro、UGUI系のTextMeshProはTextMeshProUGUIコンポーネントを使いますが、どちらもTMP_Textクラスを継承して作られているので、どちらも親クラスであるTMP_Textを使って操作出来ます。

終わりに

TextMeshProを使うと通常のTextよりもより細かい設定や操作が出来るようになっていますね。

今回紹介した内容はTextMeshProを使う導入部分で、テキストに色々なタグを挿入出来たり、テキストを動かしたりといったことも出来ます。

TextMeshProをインポートする時にサンプルもインポート出来ましたが、そのサンプルを確認するといいかもしれません。

参考サイト

TextMesh Pro Documentation