前回に引き続きUnityによるUI開発です。今回はテキスト編です。
概要
Unityのテキスト表示は uGUI標準のText と TextMeshPro です。
今回はTextMeshPro を取り上げます。
導入方法
Window > TextMeshPro > Import TMP Essential Resources から最低限のアセットをインポートします。
FontAsset
TextMeshProでテキストを表示するためにFontAssetを作成します。
作成方法
- Window > TextMesh Pro > Font Asset Creator を選択
- Source Font File に フォントデータ(TTF, OTF) を設定
- Atlas Resolution に 解像度を設定、ASCIIなら 512 x 512,
日本語(ひらがな・カタカナ・常用漢字含む)なら 4096 x 4096 くらいで収まります。 - Character Set を Custom Characters に設定
- Custom Character List に対象テキストを追加
- Render Mode に SDF AA を選択
- 「Generate Font Atlas」をクリック
※データ量によって生成に1〜2分ほど掛かります。 - 「Save」をクリックして Font Asset を .asset にして保存
使い方
TextMeshProコンポーネントの Font Asset に作成した Font Asset を設定するだけです。
Dynamic SDF
Font Asset をダイナミックフォント的な扱いを可能にする Dynamic SDF 形式にする方法です。
- 作成した Font Asset を選択
- Source Font File に フォントデータ(TTF, OTF) を設定
Atlas Population Mode で Dynamic を選択
Atlas Width/Height に任意の解像度を設定
- 「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 作成方法
- 対象のテクスチャを選択
- Inspectorビューから
Texture Type - Sprite (2D and UI) を選択
Sprite Mode - Multiple を選択
- 「Apply」をクリック
- 「Sprite Editor」をクリック
- Sprite Editor 上で使いたい絵文字を切り抜く
- 「Apply」をクリック
- Projectビュー > Create > TextMeshPro > Sprite Asset を選択
- Sprite Asset が作成されます。
表示方法
- TextMeshPro コンポーネント の Extra Settings を開く
- Sprite Asset の項目に作成した Sprite Asset を設定
- テキスト領域に以下のようにタグを使って入力
表示結果
表示位置のズレ
以下の方法でオフセットを調整すると直ります。
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