Unity UIの基本④｜Dynamic Font Asset を使ってTextMeshProでも日本語を表示する方法

前回はUIのText、TextMeshProの使い方についてご説明いたしました。

TextMeshProは、Unityで文字をきれいに表示できる便利な機能です。

ただし、初期状態のままだと、日本語が正しく表示されないことがあります。
これは、TextMeshProで使っている Font Asset に、日本語の文字情報が含まれていないことが原因です。

今回は、日本語を表示できる TextMeshPro 用の Font Asset を作成していきます。

特に今回は、Dynamic Font Asset を使う方法を中心に確認します。

なぜ日本語が四角になるのか

TextMeshProでは、文字を表示するときに Font Asset という専用のデータを使います。
Font Assetとは、簡単に言うと「指定された文字を、どのような形で表示するか」をまとめたデータです。

英数字だけであれば、最初から用意されているFont Assetでも表示できることがあります。
一方日本語には、ひらがな、カタカナ、漢字など、非常に多くの文字があり、使用しているFont Assetの中に日本語の文字が入っていないと、TextMeshProはその文字を表示できません。

その結果、日本語が四角になったり、何も表示されなかったりします。

StaticとDynamicの違い

TextMeshProのFont Assetには、Atlas Population Mode という設定があります。
ここでは主に、Static と Dynamic の違いを理解しておくと分かりやすいです。

Static は、最初に登録した文字だけを使う方式です。
Font Assetを作成するときに登録した文字は表示できますが、登録していない文字は基本的に表示できません。

一方、Dynamic は、必要になった文字をあとから追加できる方式です。
最初にすべての文字を登録しておかなくても、表示に必要な文字をFont Assetに追加しながら使うことができます。

日本語は、ひらがな、カタカナ、漢字など文字数が多いため、会話文や説明文のように文字が増える可能性がある場合はDynamicが扱いやすいです。

StaticとDynamicについては、後の章で詳しく説明します。

今回の記事では、日本語を扱いやすい Dynamic Font Asset を中心に確認していきます。

日本語対応Assetを作る方法

1,日本語フォントを用意する

まず、日本語に対応したフォントファイルを用意します。
たとえば、次のようなフォントがあります。

・Noto Sans JP
・Noto Serif JP
・M PLUS

特にこだわりがない場合は、Google Fonts で配布されている日本語フォントを使うと分かりやすいです。

Google Fontsのフォントは、基本的に無料で使えるオープンソースフォントです。

ネット上のフォントなどを使うときは、必ず対象フォントのライセンスも確認しておきましょう。
特に、Google Fonts以外のサイトからダウンロードしたフォントは、商用利用やアプリへの組み込みが制限されている場合があります。

2,フォントファイルをUnityに入れる

日本語フォントを用意したら、UnityのProjectウィンドウに入れます。
例として、Assetsの中に「Fonts」ようなフォルダを作っておくと管理しやすいです。

フォントファイルは、UnityのProjectウィンドウへドラッグ＆ドロップすれば取り込めます。

3,Font Asset Creatorを開く

TextMeshPro用のFont Assetを作成します。

上部メニューから、次のように選択します。

Window → TextMeshPro → Font Asset Creator

Font Asset Creatorは、通常のフォントファイルからTextMeshPro用のFont Assetを作成するための画面です。

4,Font Asset Creatorの主な設定

Font Asset Creatorを開いたら、主に次の項目を確認します。

■ Source Font

元になるフォントファイルを指定します。
ここに、Unityに入れた日本語フォントを設定します。

今回は、Google Fontsからダウンロードした「NotoSansJP-Regular.ttf」を使用します。

■ Sampling Point Size

文字をどのくらいのサイズで生成するかを指定します。
最初は Auto Sizing のままでも構いません。
ただし、日本語を大きく表示したい場合や、文字が荒く見える場合は、Sampling Point Sizeを大きめに設定します。
たとえば、・40・60・90 のように調整します。

Sampling Point Sizeを大きくすると、文字はきれいになりやすいですが、1枚のAtlasに入る文字数は少なくなります。

今回は Custom Size に指定し、90 で設定してみます。

■ Atlas Resolution

文字画像をまとめて保存するテクスチャのサイズです。
日本語は文字数が多いため、小さすぎると文字が入りきらないことがあります。
まずは次のようなサイズから試すとよいです。

・1024 × 1024
・2048 × 2048
・4096 × 4096

日本語をDynamic Font Assetで使う場合は、まず 2048 × 2048 くらいから試すと扱いやすいです。

Atlas Resolutionを小さくすると、1枚のAtlasに入る文字数は少なくなります。文字数が溢れたタイミングで、2枚目、3枚目のAtlasが作られます。
一方、最初から大きくしすぎるとデータ量やメモリ使用量も増えるため、まずは 2048 から始めるのがおすすめです。

■ Character Set

Dynamic Font Assetとして使う場合は、ここで大量の日本語を登録する必要はありません。
以前は、Custom Charactersに使う日本語をまとめて入力してFont Assetを作る方法がよく使われていました。

この方法は今でも有効ですが、Dynamic Font Assetとして使う場合は、必要になった文字をあとから追加することができます。

今回は確認用としては、Custom Characters に次のような短い文字だけを入れて検証してみます。

ABCこんにちは

大量の文字を最初から入れると、Atlasに文字を詰め込みすぎて、1文字あたりの解像度が小さくなることがあります。
その結果、文字を大きく表示したときに、点のように崩れて見える場合があります。

Render Mode

Render Modeは、文字の描画方式です。

今回は「SDF32」のままで進めます。

5,Font Atlasを生成する

設定が完了したら、Generate Font Atlas を押します。

しばらく待つと、Font Atlasが生成されます。

生成が完了したら、Save または Save As... を押して、任意の場所に保存します。

6,Dynamic Font Assetとして設定

今回のポイントは、作成したFont Assetを Dynamic として使うことです。
Dynamic Font Asset は、必要になった文字をあとからFont Assetに追加できる方式です。

たとえば、最初に「スタート」という文字しか使っていなくても、あとから「ゲームクリア」「残り時間」「設定」などの文字を表示したときに、必要な文字を追加してくれます。

Dynamic Font Assetの設定方法

Font Assetを作成したら、Projectウィンドウで作成したFont Assetを選択します。
Inspectorで、次の項目を確認します。

Generation Settings → Atlas Population Mode → Dynamic

Atlas Population Mode は、Font Assetに文字をどのように追加するかを決める設定です。

・Static：最初に登録した文字だけを使う
・Dynamic：必要になった文字をあとから追加できる

日本語を多く使う場合は、同じGeneration Settings内にある「Multi Atlas Textures」もオンにしておくと安心です。

これは、1枚目のAtlasがいっぱいになったときに、2枚目、3枚目のAtlasを追加できるようにする設定です。
ただし、Atlasが増えるとメモリ使用量も増えるため、固定のUI文字だけであればオフのままでも問題ありません。

7,Font AssetをTextMeshProに設定

Font Assetを作成したら、TextMeshProの文字オブジェクトに設定します。
HierarchyでTextMeshProのオブジェクトを選択します。

Inspectorで、TextMeshProコンポーネントを確認します。

• Font Asset　- 作成した日本語用のFont Assetを設定

まずは設定した「ABCこんにちは」と入力して確認します。
日本語が正しく表示されれば成功です。

続いて「DEFおはようございます！」とTextに入力してみます。
入力後、若干の読み込みが走りますが。正しく表示されると思います。

Static Font Assetとは

ここまでDynamic Font Assetを中心に確認しましたが、TextMeshProには Static Font Asset という使い方もあります。

Static Font Assetは、Font Assetを作成するときに登録した文字だけを使う方式です。
以前からよく使われていた方法として、Font Asset Creatorの Custom Characters List に、使用する日本語をまとめて入力して作成する方法があります。

Static方式のメリット

Static方式には、次のようなメリットがあります。

・使う文字を事前に管理できる
・実行時に文字を追加しないため、動作が安定しやすい
・Font Assetの中身が変わりにくい
・固定UIには向いている
・複数のプロジェクトで使い回しやすい

たとえば、ボタン、メニュー、タイトル、固定の説明文など、表示する文字が決まっている場合はStatic方式でも十分です。
以前から日本語対応の方法として、Custom Characters Listに必要な文字を大量に登録し、そのFont Assetを使い回す方法もよく使われていました。

この方法は今でも有効です。

Static方式のデメリット

一方で、Static方式には注意点もあります。

・登録していない文字は表示されない
・あとから文章が増えると作り直しが必要になる
・漢字を大量に登録すると管理が大変
・使う文字を事前に洗い出す必要がある

クイズアプリなど、文章が増えやすいゲームでは少し手間がかかります。

Dynamic方式のメリット

Dynamic方式のメリットは、必要な文字をあとから追加できることです。
次のような場面に向いています。

・会話文
・長い説明文
・プレイヤー名
・入力フォーム
・外部ファイルから読み込む文章
・アップデートで文章が増えるゲーム

日本語は文字数が多いため、すべての文字を最初から登録しようとすると大変です。
Dynamicにしておけば、表示に必要な文字をあとから追加できるので、初心者でも扱いやすくなります。

Dynamic方式のデメリット

Dynamic方式にも注意点があります。

・文字を追加するときに処理が発生する
・Staticよりも負荷がかかる場合がある
・実行中にFont Assetの内容が変わることがある

そのため、すべての場面でDynamicが正解というわけではありません。

StaticとDynamicの使い分け

初心者向けには、次のように考えると分かりやすいです。

Staticが向いているもの

・タイトル画面
・ボタンの文字
・メニュー項目
・固定のUI
・短い説明文
・使う文字が決まっている教材やサンプル

Dynamicが向いているもの

・会話文
・長い文章
・プレイヤー入力
・外部データから読み込む文章
・あとから文字が増える可能性があるゲーム
・とりあえず日本語表示を試したい場合

固定のUI文字だけならStatic、表示内容が変わる文章ならDynamic、というように使い分けるとよいです。
今回のように、日本語表示をまず簡単に試したい場合は、Dynamic Font Assetから始めると分かりやすいです。

フォントのライセンスについて

フォントをUnityで使うときは、ライセンスの確認も大切です。

Google Fontsで配布されているフォントは、基本的に無料で商用利用できます。
また、ゲームやアプリなどの製品にフォントを含めることも可能です。
そのため、Unityで作ったゲームにGoogle Fontsの日本語フォントを入れて、TextMeshPro用のFont Assetとして使うこともできます。

ただし、次の点には注意しましょう。

・使用するフォントのライセンスを確認する
・Google Fonts以外から入手したフォントは特に注意する
・フォントファイルを自作フォントとして再配布しない
・必要に応じてライセンス表記を確認する

無料フォントであっても、すべてが自由に使えるわけではありません。
商用利用が禁止されているものや、アプリへの組み込みに制限があるものもあります。

Unityで配布するゲームやアプリに使う場合は、事前にライセンスを確認しておくと安心です。

今回のまとめ

今回は、TextMeshProで日本語を表示するためのFont Assetの作り方を確認しました。

ポイントは次の通りです。

TextMeshProの日本語表示では、Font Assetの設定がとても重要です。

DynamicとStaticの違いを理解しておくと、ゲームの内容に合わせて使い分けることができます。

▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。