【Unity】TextMeshProで日本語を表示させてみる

Unity-TextMeshProで日本語を表示させてみる Unity
スポンサーリンク

この記事ではTextMeshProを使って日本語を表示させる方法を紹介します。

Unityのバージョンは2022.1.1f1を使用しています。

TextMeshProとは?

UIオブジェクトを追加するとき、TextやButtonなど後ろに「-TextMeshPro」とついているものがあります。
これらは従来のTextをより高度に制御できるようにしたもので、エディターにインポートすることで使えるようになります。

UIオブジェクトの一覧の画像
従来のTextはLegacyの中にあります

Button、Dropdown、Input FieldのTextMeshPro有り無しでの違いは、そのオブジェクトの子要素で使っているTextがTextMeshProかどうかだけっぽいです。

ちなみに、UIだけじゃなく3D Objectの方にもText – TextMeshProがあります(TextMeshの代替)。

TextMeshProで日本語を表示させる

1.インポート

今回はUIのText – TextMeshProを使って説明していきます。
Hierarchyウィンドウで右クリックしてTextを追加するとTMP Importerウィンドウが表示されます。
[Import TMP Esssentials]をクリックしてインポートします。
下の「Import TMP Examples & Extras」はEssentialsのインポート後に押せるようになり、こちらをインポートするとサンプルが色々見られます。

TMP Importerの画像
ウィンドウを閉じてしまった場合はTextMeshProのオブジェクトを選択するともう一度表示されます

インポートが完了するとAssetsフォルダ下にTextMeshProのフォルダが追加されます。

Assetsフォルダ下にTextMeshProのフォルダが追加された画像
フォルダが追加されます

2.フォントを追加して日本語に対応させる

TextMeshProはデフォルトのフォントだと日本語が表示されません。
そのため日本語対応フォントをサイトなどからダウンロードして持ってくる必要があります。

日本語が□で表示される画像
画像の□のように、未対応文字は置き換えられて表示されます

今回は「ぽめらにあんフォント」を例として使用してみます。(配布サイトはこちら
ダウンロードしてきたフォントの「ttfファイル」をAssetsフォルダ下にドラッグアンドドロップします。

フォントをAssetsフォルダ下に配置する画像
ttfファイルを配置します

このままではまだ使うことができないので、TextMeshPro用にフォントアセットを作成します。
「Window > TextMeshPro > Font Asset Creator」を選択します。

Font Asset Creatorを選択する画像
メニューバーのWindowから開きます

Font Asset Creatorウィンドウが表示されます。

Font Asset Creatorウィンドウの画像
ここでフォントアセットを設定していきます

設定の詳しい説明についてはUnityのマニュアルを参照してください。
必要な部分だけ補足します。
・Source Font File
   使用するフォントのttfファイルを指定します。
・Character Set
   Characters from Fileを選択します。
・Character File
   使用したい文字を書いたテキストファイルを指定します。
   ファイルに書かれていない文字は認識されません。

Character Fileに指定するファイルはこちらの「japanese_full.txt」を利用させていただきます。
UnityのText Mesh Proでほぼ全ての日本語を表示させる – Qiita

こんな感じで設定してみました。
[Generate Font Atlas]をクリックすると生成が開始されます。

Font Asset Creatorの設定例画像
設定出来たらGenerateします

完了すると下に情報が表示されます。
[Save]をクリックしてフォントアセットを保存します。

生成完了後の画像
当たり前ですが元のフォントに含まれていない文字は生成できません

フォントアセットをTextMeshProに指定すると日本語が表示できるようになります。

TextMeshProにアセットフォントを設定した画像
□で表示されていた部分がちゃんと表示されるようになりました

まとめ:TextMeshProで日本語を使うにはフォントアセットを生成する!

従来のTextを使う場合も、フォントをダウンロードして持ってきていた人がほとんどだと思います。(デフォルトだと一部の漢字の表記が変だったりするし)
ただのTextであればダウンロードしたttfファイルをそのまま指定するだけで使えましたが、TextMeshProの場合はフォントアセットの生成が必要になります。

Textと比べると一手間かかりますが、文字の装飾が簡単にできたり拡大してもぼやけなかったりと便利な部分が多いです。

ネオンっぽい縁取りにした画像
GlowをONにして値を調整するだけでもかなり変わります

TextMeshProを活用してちょっと豪華なUIも作れそうですね。

コメント

タイトルとURLをコピーしました