UnityのTextMeshProを使ってみる

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

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

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

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

スポンサーリンク

TextMeshProとは

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

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

TextMeshとUGUIとTextMeshProを比較したもの

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

UGUIとTextMeshProにカメラを接写して比較

TextMeshProをインポートする

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

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

TextMeshProをインストールする

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

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

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

TextMeshProのTMP Essential Resourcesをインポートする

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

TextMeshProのリソースをインポートする

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

TextMeshProのサンプルをインポートする

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

TextMeshProの作り方

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

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

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

TextMesh系のTextMeshProの作り方

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

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

UGUI系のTextMeshProの作り方

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

TextMeshとUGUIのTextMeshProの違い

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

TextMesh系のTextMeshProのインスペクタ

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

UGUI系のTextMeshProのインスペクタ

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

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

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

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

日本語を含まないフォントだと□で表示されてしまう

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

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

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

木漏れ日ゴシック - 無料で使える日本語フォント投稿サイト|フォントフリー
線がところどころ切れている、ステンシルっぽい装飾が特徴的なゴシックフォント。文字のデザインにどこかあたたかさを感じます。文章にも、もちろんロゴにも向いているフォントです。ひらがな・かたかな・漢字まで収録されています。

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

木漏れ日ゴシックフォントをインポートする

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

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

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

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

フォントからTextMeshProの動的なフォントアセットの作成

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

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

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

フォントアセットを入れておくフォルダ

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

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

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

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

Font Asset Creatorウインドウを開く

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でフォントアセットに変換する文字群を入力する

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

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

Visual Studioで保存したファイルの中身が文字化けしてしまう

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

Visual Studioで名前を付けて保存を選びtext.txtファイルを保存する

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

Visual Studioでエンコード付きでファイルを保存する

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

Visual Studioでエンコード付きでファイルを保存する

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

Unityエディターのtext.txtファイルの中身の文字化けがなくなった

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

Font Asset Creatorでサンプルのフォントアセットを作成する為の設定

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ファイルをドラッグ&ドロップして設定します。

komorebi-gothic SDF.assetファイルをFont Assetに設定する

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

TMPのテキストにあいうえおが表示された

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

代替フォントを設定する

先ほど作った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を設定します。

新しく作成したText(TMP)に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フォントアセットが内包するマテリアルです。

複数のマテリアルからMaterial Presetを選択出来る

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

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

TextMeshProのマテリアルにとりあえず設定したみた

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

TextMeshProのマテリアルを変更するとテキストの見た目が変わった

TextMeshProの便利な機能

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

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

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

普通のTextのOverflow設定

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

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

TextMeshProのOverflowのLinkedのテストに使用するテキスト

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

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

Text(TMP)(1)のPosYを-56にする

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

二つのTextMeshProのテキストを上下に並べる

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

Text(TMP)のOverflowのLinkedにText(TMP)(1)を設定する

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

あふれたテキストがLinkedで指定したテキストに表示された

自動ページ分割

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

TextMeshProのMain SettingsのOverflowをPageにすると自動でページ分割してくれる

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

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

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

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

ページ遷移を確認する為、戻るボタンと次へボタンを作成する

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

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

PreButtonを押したらPageScriptのGoToPreviousPageメソッドを実行する

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

NextButtonを押したらPageScriptのGoToNextPageメソッドを実行する

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

TextMeshProのページ自動割り当てのテストをしたサンプル

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

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

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

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

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

終わりに

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

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

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

参考サイト

TextMesh Pro Documentation

タイトルとURLをコピーしました