【Unity】TextMeshProで日本語を表示する方法

対象 Unity初心者

書いている人 Unity勉強2ヶ月目 プログラミング歴1年

前提 Unityでプロジェクトを立ち上げられること

環境 Mac Unity 2019.3

参考記事 https://qiita.com/kgsi/items/08a1c78b3bee71136156

TextMeshProは普通のテキストより、綺麗に表示させることができたり、アウトラインをつけたりと便利なテキストのUIのこと。元々はアセットだったみたいだが、Unityに組み込まれて、importしなくても使えるようになったっぽい。

ただ、設定をしないと日本語が使えないので、日本語が使えるように設定していく。下の画像はTextMeshProとTextを一緒に並べて配置している。TextMeshProは設定をしないと、日本語表記がされず、全て□になってしまう。(これを豆腐)というらしい。

上がTextMeshProで下がText。日本語は豆腐になっちゃう。

今回はTextMeshProでも日本語が使えるように設定していく。

目次

TextMeshProの表示方法

まず最初にTextMeshProを表示させていこう。Hierarchyの+ボタンからUIの欄にいって、TextMeshProを選択する。

UIからTextMeshProを選択

最初にTextMeshProを選択すると以下のような画面が表示されると思う。Import TMP Essentialsをクリックしよう。(最初からImportしてくれれば良いのにとも思うが)

Import TMP Essentialsをクリック

クリックすると、Assets直下にTextMeshProのフォルダが生成されるはずだ。

TextMeshProのフォルダが生成された。
これでTextMeshProが使えるようになったぞ。
普通のTextとTextMeshProを並べてみた。TextMeshProの方がくっきりしてる。

使いたい日本語対応フォントをゲットする。

ではここから日本語を使えるように設定していく。

まず最初に、使いたい日本語対応フォントをインストールしてくる。元々MacにはデフォルトでいくつかFontが入ってるのでそれでもいいが、今回はGoogleFontsからDLしてくることにした。GoogleFontsの使い方は別記事で。

今回はこの「Noto Sans JP」を使う

使いたい日本語対応のFontを選択してDLしてzipを解凍しよう。Google Fontsってそのフォントの使いたいスタイルだけじゃなくて全てのスタイルをDLしちゃうみたい。

DLしてきたら、zipを解凍しよう。今回はこの「NotoSansJP-Light.otf」を使う

Assetsフォルダの中に日本語のフォントファイルを入れる

解凍したらその「.otf」ファイル(.ttfや.ttcでもOK)を、UnityのAssetsフォルダの中に置いておこう。今回はAssets直下にFontsフォルダを作ってその中に入れていく。

ちなみに、ttf otf ttcなどはフォントの拡張子だ。調べたけど、よくわからんかった。

Assetsフォルダの中にFontsフォルダを作成して、DLしてきたファイルを突っ込む

Font Asset Creatorを開く

次に、メニューバーのWindow→TextMeshPro→Font Asset Creatorを開く。

メニューバーから開こう

このWindowで日本語のフォントが使えるような設定をしていく。

ここで日本語を使えるように設定していくぞ

Font Asset CreatorからAtlasファイルを生成する

一番上の「Source Font File」のとこに、Fontsフォルダに入れたフォントファイルを設定する。

ここに、使いたいフォントを設定する

後は諸々の設定だが、参考記事を参考に数字を設定。適当でも大丈夫。失敗したらやり直せばいいので。

ただ、一番下の「Character Set」だけはCustom Charactersに設定する。

CustomCharactersを選択すると、Custom Character Listが表示される。

ここに、文字のファイルのテキストを貼り付ける必要がある。

文字ファイルのテキストはネットに提供してくれている人がいるのでそれを使う。

リンクに飛ぶと、GitHubGistのページに飛ぶと思うので、右上のDownload.zipを押そう。

https://gist.github.com/kgsi/ed2f1c5696a2211c1fd1e1e198c96ee4

リンクに飛ぶと有志の方がこんなありがたいものを提供してくれている。Downloadしよう。

DLしたら解凍してダブルクリック。テキストファイルなので、Macだったらテキストエディタが起動するはずだ。それを全て選択してコピーする。

この文字群達がText Mesh Proで使えるようになる。

コピーしたら、Unityの方に戻って、Custom Character Listにペーストする。

コピーして貼り付けるだけ。

そしたら、GenerateFontAtlasをクリックしてAtlasファイルを作成しよう。

Atlasファイルっていうのは自分もよくわかってないのでわかったらまとめます。

しばらく時間かかる。

終わったら以下のように表示がされるはずだ。Missing charactersっていうのは、作成できなかった文字達のことだ。ここの数があまりに多いようなら上で設定した文字サイズなどを変更するっぽい。今回は誤差の範囲内のでこのまま進める。

19文字だけ作れなかったみたい。

さらに下にスクロールすると、黒いキャンバスに文字がびっしりと敷き詰められたものが表示される。これが、どうやらAtlasファイルっぽい。イメージでいうとなんか1枚のキャンバスに敷き詰めるみたいなことなんかな。

なんかすごい。

AtlasファイルをAssetsフォルダ直下に保存

画像を生成したら、Saveするのを忘れないようにしておこう。

Saveボタンを忘れずにクリック。

Saveする場所はAssetsの中だったらたぶんどこでも大丈夫だと思う。今回はFontsフォルダの中に保存。

この青いやつがAtlasファイルだ。

TextMeshProのFontAssetを変更

さあ、これで最後だ。いよいよ日本語が使えるようになる。TextMeshProのインスペクタを開いて、Font Assetの部分を作成した、Atlasファイルに設定していこう。そうすると日本語が使えるようになっているはずだ。

一番下のFont Assetの右丸をクリック
ここに生成したファイルを設定。
やっと日本語が使えるようになった

まとめ

  1. 日本語フォントを用意する。
  2. FontAssetCreateでAtlasファイルを設定する
  3. TextMeshProのFontAssetに2で作成したAtlasファイルを設定する。

TextMeshProは普通のTextと違って、ちょい複雑。そこらへんの記事もまた作成したい。
とりあえずは日本語が使えればいいかな〜!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次