YAMADA TAISHI’s diary

ゲームについてとか私の日記とか。このブログのあらゆるコードは好きにどうぞ。利用規約があるものは記事内のGitHubのRepositoryのリンクで貼られていると思うので、そちらを参照ください。

トップ > TextMeshPro > TextMeshProの使い方【前編】

TextMeshProの使い方【前編】

TextMeshPro Unity ゲーム開発 プログラミング 備忘録

こんにちは、やまだたいし( やまだ たいし (@OrotiYamatano) / Twitter )です。
以前、TextMeshProをStatic SDFであればフォントを使わなくて済むのでFonts66コンプリートパックを使うことができるという記事を書かせていただきました。

orotiyamatano.hatenablog.com

しかし、結構散見されるのは、「Static SDFの使い方が分からない！」、「TextMeshProの設定が分からない」という意見です。
確かにStatic SDFのやり方は一見分かりづらい＆忘れがちのため、今回調べてメモをしておこうと思ったためこの記事を書くことにしました。

目次

TextMeshProとは?

通称TMPとも略されるTextMeshPro。
そもそもコレが何なのかというのを解説させてもらうと、
Textが使えるアセットでUnity 2018.2からUnity公式で使えるようになったアセットです。
2018.2以降であればデフォルトでUnityに組み込まれています。

テキスト表示であればコレまでも使えていたではないか！と思われる方もいると思いますが、
Text Mesh Pro の方が優秀だと断言しておきます。

何が嬉しいのか

何が嬉しいのか1つめキレイ。

普通のUI Textだとテキストがぼやけるデメリットがあります。
Text Mesh ProはSDF(Signed Distance Field)(日本語訳すると符号付き距離函数とかいうやつ)を使う。
「距離情報によるテクスチャ画像のベクトル化」を行いキレイにフォントを表示するのだ。
要するにフォントデータをテクスチャに焼き込んでおいてロジック側でにじみが無いように拡大させてあげることができるのが、このSDF形式という物らしいです。
だからキレイに出力されます。

じゃあ、なぜUI Textがぼやけるのかというと、
ココに関しては設定などによっては、ぼやけなくも出来るのだが、基本的にフォントはキャッシュ(一部情報として保存)されており、
テクスチャフォントアトラス(複数の画像を1つの画像データとして保存したデータのこと)化されソレを表示している。
そのためスケールを変えるなどを行うと元のテクスチャの大きさは変わらないため、ボヤケてしまうのです。

何が嬉しいのか2つめ容量が優しい。
先程もいったようにテクスチャフォントアトラスを作る必要があるのでUI Textはフォントをバイナリ(ココでは最終的なアプリの内部情報のことを指す)に含める必要があります。

今やフォントといえばベクターフォントが多いですが、このベクターフォントはドット情報を保存するのではなく、
このベクターフォントは線の長さや向きなどを記憶させておいて、どんなにフォントを大きくしても滲まないようにしてあげるものです。

しかし、いかんせんこれは容量が多いです。
また、フォントサイズを異なる大きさで保存する場合、その大きさごとにフォントアトラスが生成されます。

(↓こんな感じ)

TextMeshProはテクスチャを焼いて(焼く→生成すること。IT用語。語源は英語のBake.)おいてから、SDFで処理するため、フォントデータをバイナリに組み込む必要がアリません。
容量的に優しいですし、フォント規約にはバイナリにフォントデータを組み込んでは行けないというものもあるため、それを回避することが出来ます。

ちなみに焼き込んだデータはフォントサイズごとに用意する必要がないのでさほど重くないです。

(↓こんな感じ)

何が嬉しいのか3つめ色々装飾が出来るのに軽い。

UI Textでは出来ることが限られています。
アウトラインくらいならつけることが出来ますが、アウトラインをつける処理の特性上、Text Mesh Proの方が軽いです。

ざっと述べるとこんな感じです。
単に表示させるだけならUI Textでも十分ですが、細かい動きをつけたり、見た目をよくしようとすると断然Text Mesh Proにしておいたほうが良いです。

TextMeshProの利用方法

初期設定

TMP(TextMeshPro。以下TMP)の実行方法。

まずはフォントを使えるようにしてあげないといけないのでツールバー>Component>Mesh>TextMeshPro - Textを選択します。

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

するとTMPのシェーダーなどが一通りインポートされ準備完了です。

フォント

上記の設定で使うことも出来るのですが、
先程もいったように一旦テクスチャを生成しなければいけません。
またデフォルト設定でいくつか既に出来上がっているのですが、英語文字しか含まれていません。
まぁ、生成しなくても日本語文字は動的に生成されるのですが、動的にテクスチャアトラスを生成する必要があるため、
フォントデータをバイナリに組み込む必要があります。TMPの利点を最大限に活かせません。もったいないですね。

それに貴方が使いたいであろうデフォルト以外のフォントはまだ使えません。
ココからは新しくフォントを設定する方法についてです。

まず、使用したいフォントをドロック＆ドロップでUnityに取り込みます。(バイナリデータに含めたくないので後で消します)
(フォント名に日本語が含まれる場合は上手く使えないことがあるようなので、フォント名を日本語から英字に変えておいた方が良いかも?)
(ちなみに私が今回使うのは株式会社ネットユーコムさんのAFSまるご風書体)

右クリックをして
Create > TextMeshPro > FontAssetを指定

すると、テクスチャアトラスの設定されてないSDFアセットが生成されます。

生成されたSDFアセットを選択し、Inspecter Windowの設定を変更します。

何が設定できるのか項目を見ていきましょう。
まずはFace Infoから。

Face Infoにはフォント内に設定されている基本情報が格納されます。
基本的に値を変えた場合、最悪文字が崩れる場合があるため変更はしないほうが良いと思います。

各項目について解説しようと思って連番をつけましたが、
フォントをTextMeshProの機能でアトラス化するときに参照する情報みたいで変更すると上手く切り取られなくなるようです。
購入フォントでは設定情報が誤っているということは、ほとんど無いと思われるので、変えないほうが良いと思われます。
(切り抜くために↓こういう情報が入ってるらしい)

次はGeneration Settingについてです。

(多分)描画する上で参照情報です。

  1. SourceFontFile →フォントの参照データです。ない場合はエラーになります。
  2. Atlas Population Mode → 出力設定です。Dynamicになっている場合、アトラス化済み以外のデータは随時動的に生成されます。今回はアプリにフォントデータを含めたくないのでStaticにします。(Bake済みデータしか表示されなくなるので注意)
  3. Atlas Render Mode → アトラス画像を生成するときのレンダリングロジックの選択です。選択する物によって生成スピード、文字の綺麗さなどが変わります。
    英語のネット記事を読む限りAtlas Render ModeはSDFAAが高速で安定しているようです。
    1. SMOOTH_HINTED→スムージング表現（フォントヒンディング）グリフのアウトラインの8bitまたはアンチエイリアス処理された画像から、ヒントを使用してグリフのビットマップ表現をレンダリング。
    2. SMOOTH→スムージング表現 グリフのアウトラインの8ビットまたはアンチエイリアス処理された画像から、ヒントなしでグリフのビットマップ表現をレンダリング。
    3. RASTER_HINTED→ラスター表現（フォントヒンディング） グリフのアウトラインのバイナリ（1ビットモノクロ）画像からグリフのビットマップ表現をヒント付きでレンダリング。
    4. RASTER→ラスター表現 グリフのアウトラインのバイナリ（1ビットモノクロ）画像から、ヒントなしでグリフのビットマップ表現をレンダリング。
    5. SDF→ SDFシェーダを使用するために必要なテクスチャを作成する。 グリフのアウトラインのバイナリ（1ビットモノクロ）画像から、ヒントなしでグリフの符号付き距離フィールド（SDF）表現をレンダリング。 1.SDF8→SDFのグリフのサンプリングが8倍スケールアップ版 1.SDF16→SDFのグリフのサンプリングが16倍スケールアップ版 1.SDF32→SDFのグリフのサンプリングが32倍スケールアップ版 1.SDFAA_HINTED→グリフの8ビットまたはアンチエイリアス処理された画像からグリフの符号付き距離フィールド（SDF）表現を、ヒント付きでレンダリングします。このレンダリングモードは非常に高速だが、精度が少し低下します。
    6. SDFAA → グリフの8bitまたはアンチエイリアス処理された画像からグリフの符号付き距離フィールド（SDF）表現を、ヒントなしでレンダリングします。レンダリングモードは非常に高速だが、精度が少し低下 SDFは数が大きいほど正確になります。
  4. Sampling Point Size → どうやらサンプリング元になるデータのフォントサイズを指定するようです。大きければ大きいほどキレイ?まぁ焼くスピードも遅くなると思うのでデフォにしておくことにします。私の設定は90になっているけど90は少し大きいかも?
  5. Padding → 文字間ですね。
  6. Atlas Width → アトラス画像の横幅です。今回は常用漢字と英数字を入れたいので1024では収まらないと思うので、もっと大きい数値に8192にしておきます。
  7. Atlas Height → アトラス画像の縦幅です。今回は常用漢字と英数字を入れたいので1024では収まらないと思うので、もっと大きい数値に8192にしておきます。

前半はとりあえずここまで

意外と長くなったので、前編、後編で区切らせていただこうと思います。

一旦ココまでで失礼します！
次回は実際に書き出しと描画をします。後、アセットを管理する上で気をつけることなどを書けたら良いなと思います。
何か誤っているなどアリましたら教えて下さい！
↓続き
orotiyamatano.hatenablog.com