uGUIのTextの代替となるTextMesh Proとは【Unity】【TextMesh Pro】

この記事でのバージョン
Unity 2018.3.4f1
TextMesh Pro 1.4.0

はじめに

昔のUnityはUIの実装がかなり大変でしたが、uGUIの登場により劇的に改善されました。

しかし、まだ物足りない部分は多々あり、特にテキスト周りは不便な点も多いのが現状です。

そこで最近では、テキストのUIを表示する時はTextMesh Proを使うのがスタンダートらしいのですが、

実は今まで使ったことがなかったので、調べるついでに諸々をまとめてみようという感じの記事です！

TextMesh Proとは

そもそもTextMesh Proとはなんぞやという話からですが、

前述の通り、uGUIのテキストの不便さを解決するためのもので、

元々はアセットストアで公開されている普通のアセットでした。

TextMesh Pro - Asset Store

その後、あまりの有用さにUnityに吸収され、公式の機能になりました。

https://blogs.unity3d.com/jp/2017/03/20/textmesh-pro-joins-unity/

なお、Unity公式ブログでは以下のように説明されています。

TextMesh Pro は、Unity のデフォルトのテキストコンポーネントの代替となるものです。デフォルトのテキストコンポーネントに匹敵する（条件によってはさらに高い）性能を備えており、「符号付き距離場」（SDF）と呼ばれる、元々『Team Fortress 2』を開発した Valve によって使用された、まったく異なるレンダリング技術を用いています。

uGUIのTextとの比較

uGUIのTextの代わりに使うものという事で、気になるのは違いです。

という事で主な違いをまとめてみました。

拡大しても綺麗

uGUIのTextが拡大するとボヤけるのに対し、TextMesh Proは綺麗なままです。

例えばフォントサイズを12、Scaleを3にすると以下のような感じ。

ちなみに拡大してない状態でもTextMesh Proの方が若干、綺麗な気がします。

(フォントサイズ36、Scale1)

設定

uGUIのTextは設定項目が最小限だったのに対し、TextMesh Proは設定項目が豊富です。

特にuGUIのTextでは、なぜか設定出来ず、別途処理が必要だった

字間を設定出来るようになったのはかなり大きいと思います。

装飾

設定と同様、uGUIのTextでは少なかった装飾が、TextMesh Proは豊富です。

(詳細は後述します)

なお、uGUIのTextでは切れてしまって、あまり使えなかったアウトラインも

TextMesh Proなら綺麗に表示出来ます。

フォント

uGUIのTextはフォントをそのまま設定していましたが、

TextMesh Proはフォントからフォントアセットを作成し、それを使います。

しかも、Font Assetは生成時に使う文字を指定する必要があり、

日本語(特に漢字)を使う場合は結構面倒だったりします。

ただ、無駄な文字を使わずに済み、容量削減に繋がるという利点でもあります。

また、後述するFallback FontやDynamic SDF Systemを使えば、

登録していない文字を表示する事も可能だったりします。

導入

では実際にTextMesh Proを使っていきます。

まずは導入ですが、最近のやつ(Unity 2018.2から？)は最初から導入されています。

もし、TextMesh Proが入ってない場合や更新したい場合、消したい場合はPackageManagerを使います。

なお、今回はDynamic SDF Systemを使いたいので、

バージョンを1.4.0に上げています。(現状デフォルトは1.3.0)

TextMesh Pro本体の導入は以上ですが、

Window -> TextMeshPro -> Import TMP Essential Resources

でTextMesh Proで使えるFontやシェーダーなどもインポートしておきましょう。

なお、これらのアセットはAssets直下に追加されますが、移動しても大丈夫です。

生成

生成はuGUIのTextと同様、Create -> UIから行えます。

なお、CanvasやEventSystemがなければ一緒に生成されるのも同じです。

フォントアセット

前述の通り、TextMeshProはフォントをそのまま使えず、フォントアセットを使う必要があります。

という事で、そのフォントアセットの作り方や設定についでです。

なお、ここでは「源ノ明朝 (オープンソース Pan-CJK 書体)」というフォントを使っています。

作り方

フォントアセットを作る時はFont Asset Creatorを使います。

Source Font Fileにフォントを設定し、Character Setでどの文字を入れるか指定する感じなのですが、

このCharacter Setに日本語の設定はないので、Custom Charactersに変更し、

Custom Character Listに使いたい文字を入力する事で日本語が使えるようになります。

(Custom Rangeでも可)

設定が終わったら、

Generate Font Atlasを実行した後、Saveをする事でフォントアセットが生成されます。

なお、使いたい時はFont Assetに生成したフォントアセットを設定する感じです。

更新

フォントアセットを作った後に新たに文字を追加したいなどの更新したい場合があります。

そんな時は新たにフォントアセットを作成し、同名で上書き保存すれば大丈夫なようです。

(軽く試してみた感じは大丈夫でしたが、もしかしたら何か不具合が起きる可能性は有り)

Fallback Font

Fallback FontはフォントアセットAに別のフォントアセットBを設定する事で、

フォントアセットAに登録されてない文字は、フォントアセットBを使って表示するという機能です。

例えば、「あいうえお」しか登録してないフォントアセットのFallback Fontに

「かきくけこ」しか登録されていないフォントアセットを登録すると以下のような感じになります。

なお、当たり前ですが、元のフォントアセットにも、

Fallback Fontのフォントアセットにも登録されていない文字は表示出来ません。

Dynamic SDF System

Dynamic SDF SystemはFallback Fontの普通のフォント版のような感じで、

フォントアセットに登録されていない文字でもフォントに含まれるものなら表示出来る機能です。

なお、TextMesh Pro 1.4.0から使えるようになりました。

ちなみにフォントをSource Font Fileに登録してもすぐに反映されない事がありますが、

そういう時はてきとうに設定を変更し、Applyを押すと更新されます。

フォントの文字が全て表示出来るなら、わざわざフォントアセット生成時に文字を指定しなくても

これだけで良いような気もしますが、おそらく予め文字を指定しておくよりは負荷は増えそうです。

また、設定したフォントはまるごとビルドされてしまうので、容量も増えてしまいます。

装飾

ここからはTextMesh Proの各種装飾についての紹介です。

グラデーション

グラデーションはColor Gradientを有効にする事で設定出来ます。

上下や左右はもちろん、四方向に設定する事も可能です。

マテリアル

TextMesh Proはマテリアル(シェーダー)が設定でき、

他のオブジェクト同様に、この設定で見た目を変える事が出来ます。

もちろん、設定を変えるとそのマテリアルを使ってる全ての見た目が変わってしまいます。

なので、個別にマテリアルを作りたい所ですが、普通のとは作り方と使い方がちょっと違います。

とは言え、やり方は簡単で、フォントのマテリアルを選択し、Shaderの所を右クリックし、

そこで出てきたCreate Material Presetを実行するだけ。

これでマテリアルが作成され、Material Presetの欄で作成したマテリアルが選べるようになります。

なお、これをコピーしても使う事も可能です。

シェーダーには最初からいくつか種類があり、テクスチャやGlowを付けるなんてことも可能です。

プログラム

最後にTextMesh Proをプログラムから操作する方法ですが、以下のように

TextMeshProUGUIというクラスを使い、uGUIのTextと同じ感じで使えます。

using UnityEngine;
using TMPro;//TextMeshProUGUIを使うのに必要

public class NewBehaviourScript : MonoBehaviour {

  //TextMesh Proのテキスト、Inspectorで設定
  [SerializeField]
  private TextMeshProUGUI _text = null;
    
  private void Start() {
    //テキストの変更
    _text.text = "あうお";
  }

}

なお、ドキュメントは以下のページです。

置換、移行方法

uGUIのTextで実装しているものをTextMesh Proに置換する方法や

旧バージョン(公式機能になる前)からの移行する方法は以下の記事にまとめました！

おわりに

フォントアセットを作るのがちょっと面倒くさい(特に日本語)というのはありますが、

uGUIのTextで欲しかった機能が揃ってるのは、かなり魅力的でした。

後は負荷がuGUIのTextと比べてどうなのか気になるので、

その辺をそのうち調べて記事にするかもしれません。(TextMesh Proの方が軽いとか聞いたような)

(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。