ゴイサギ日記

東京でエンジニアとして頑張って何とか生きてます。。ゆる~く更新していきます

【Unity】UI開発 Part 2 テキスト編

前回に引き続きUnityによるUI開発です。今回はテキスト編です。

概要

Unityのテキスト表示は uGUI標準のText と TextMeshPro です。
今回はTextMeshPro を取り上げます。

導入方法

Window > TextMeshPro > Import TMP Essential Resources から最低限のアセットをインポートします。

FontAsset

TextMeshProでテキストを表示するためにFontAssetを作成します。

作成方法

  1. Window > TextMesh Pro > Font Asset Creator を選択
  2. Source Font File に フォントデータ(TTF, OTF) を設定
  3. Atlas Resolution に 解像度を設定、ASCIIなら 512 x 512,
    日本語(ひらがな・カタカナ・常用漢字含む)なら 4096 x 4096 くらいで収まります。
  4. Character Set を Custom Characters に設定
  5. Custom Character List に対象テキストを追加
  6. Render Mode に SDF AA を選択
  7. Generate Font Atlas」をクリック
    ※データ量によって生成に1〜2分ほど掛かります。
  8. Save」をクリックして Font Asset を .asset にして保存

使い方

TextMeshProコンポーネントの Font Asset に作成した Font Asset を設定するだけです。

Dynamic SDF

Font Asset をダイナミックフォント的な扱いを可能にする Dynamic SDF 形式にする方法です。

  1. 作成した Font Asset を選択
  2. Source Font File に フォントデータ(TTF, OTF) を設定
    Atlas Population Mode で Dynamic を選択
    Atlas Width/Height に任意の解像度を設定
  3. 「Apply」をクリック

Font Fallback

Font Asset 内に無い文字を指定した際、別のFont Assetを参照する機能です。

設定方法は対象Font Asset を選択
Font Fallback Asset に Font Asset を設定します。

使用例としては
英数字は良く使うが、全角文字はほぼ使わないゲームがあるとします。
・ASCII制御文字(半角英数字・記号) のみの Font Asset A を作成
・そのFontFallback に Dynamic SDF 形式 の 全角文字のFont Asset B を設定
こうすれば、普段は A を参照しつつ、全角文字を使う際は B を参照し
フォント用テクスチャのメモリ消費を抑えられます。

絵文字

TextMeshProはテキスト領域に絵文字を挿入できます。Sprite Asset を必要とします。

Sprite Asset 作成方法

  1. 対象のテクスチャを選択
  2. Inspectorビューから
    Texture Type - Sprite (2D and UI) を選択
    Sprite Mode - Multiple を選択
  3. Apply」をクリック
  4. Sprite Editor」をクリック
  5. Sprite Editor 上で使いたい絵文字を切り抜く
  6. Apply」をクリック
  7. Projectビュー > Create > TextMeshPro > Sprite Asset を選択
  8. Sprite Asset が作成されます。

表示方法

  1. TextMeshPro コンポーネントExtra Settings を開く
  2. Sprite Asset の項目に作成した Sprite Asset を設定
  3. テキスト領域に以下のようにタグを使って入力

    表示結果

表示位置のズレ

以下の方法でオフセットを調整すると直ります。

Sprite Asset の Sprite Glyph Table を開き個別にオフセットを調整します。

まとめて設定したい場合は Sprite Glyph Table の最下部にある Global Offsets & Scale を調整します。

ルビ

TextMeshPro はルビ(ふりがな)を設定できます。コガネブログさんのサイトがとても参考になります。
baba-s.hatenablog.com

まとめ

TextMeshPro は各アセット作成の手間はありますが表現の幅とパフォーマンスは uGUI標準のText よりも良いです。単純なテキスト表示であれば Text でも十分です。

参考

【Unity】TextMeshProにFont FallbackとDynamic SDF Systemが追加、日本語が使いやすくなった。 - テラシュールブログ
Unity Live Help
TextMesh Pro: Sprite Assets - Unity Learn