バッテラのハローワールド研究室

エンジニア、プログラミングに関する情報を掲載中!

【Unity】TextMeshProでテキスト表示する (導入編)

f:id:m2game:20220116082235p:plain

はじめに

前から気になっていたTextMeshProというものを使ってみたいと思い、

実際にトライしてみました。

その導入にあたっての手順とハマったポイントもあったのでその共有をしたいと思います。

環境

  • MacOS BigSur (11.4)

  • Unity (2020.3.14f1)

  • TextMeshPro (3.0.6)

TextMeshProとは

通常のTextより綺麗で且つ高機能であるTextです。

元々はアセットストアで公開されているアセットだったみたいですが、 現在はUnityの公式機能となっているようです。

uGUIと3DObjectのテキスト表示に使えます。

今回はuGUIのテキストをTextMeshProで表示するという手順になります。

TextMeshProの導入手順

ヒエラルキービュー上で右クリック → UI → Text - TextMeshPro をクリック

f:id:m2game:20220115050233p:plain

そうするとウィンドウが表示されます。

f:id:m2game:20220115045930p:plain

Import TMP Essentials をクリックします。

そうすると、

AssetsにTextMesh Proのフォルダができています。

f:id:m2game:20220115050513p:plain

これでTextMesh Proが使える状態になりました。

PackageManagerでインストールしなくても使えるようですね。。

TextMeshProの洗礼

あとは通常のテキストと同じ要領で文字列を打ち込んで、、、

て、あれ?

日本語(正確には全角文字)が■になって表示されちゃう。。

f:id:m2game:20220115050044p:plain

デフォルトだと英数字と半角記号しか使えないみたい。

これが英語圏との違いか。。まいったなぁ。。

解決策は次項にて。。

FontAssetという概念

通常のTextにはないFontAssetという仕組みがTextMeshProにあります。

通常のTextではフォントをセットして使うものなのですが、

TextMeshProでは、フォントではなくFontAssetというものをセットする必要があります。

後述でFontAssetの作り方について説明しますが、

FontAssetは、フォントと使う文字を登録してできたファイルです。

使う文字という部分がミソで、使う文字以外は表示されなくなります
(表示する方法もあるみたいですが、現在調査中です)

その代わり余計なデータは使わなくなるため容量が節約できます。

デフォルトでは LiberationSans SDFというFontAssetが登録されています。

こやつに登録されている文字に日本語がありません。

なので日本語が表示されなかったというオチでした。

FontAssetを作る

Fontにこだわりがなく日本語も使わないのであればデフォルトのままでいいと思います。

でも大体そんなわけないですよね。。

ということで、FontAssetを作りましょう。

FontAssetファイルはフォントファイルごとに作るイメージです(たぶん)

まずはフォントファイルをAssetsに入れておきます。

Window → TextMesh Pro → Font Asset Creator とクリックします

f:id:m2game:20220115050257p:plain

下図のようなウィンドウが表示されます

f:id:m2game:20220115050435p:plain

① には先ほどつっこんだフォントファイルをセット

②は Custom Sizeとして サイズは 36 としました (この数値がどう影響するかがわかっていないです)

デフォルトはAutoSizingとなっていたのですが、それだとなぜか表示がおかしくなりました。自分の環境だけかもしれません。

③ 4096x4096にします。 理由は後述にて。

④ Custom Characters にします

⑤ 使う(かもしれない)文字をセットします。

使うかもしれない文字となると想像がつかない。。

調べていたらよく使う日本語をまとめてくれている方がいました。

今回はその方が作ったリストを使わせていただきました。

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

Downalod Zipからzipファイルをダウンロードし解凍します。

テキストファイルがあるので開いて全ての文字をコピーします。

そしたらCustom Character List のエリアにペーストします。

⑥ Generate Font Atals をクリック

生成処理がされます。

結果が⑦に表示されます。

ここでみておいた方がいいポイントは

Excluded characters: の数値です。

これが0なら正常なんですが、それ以外はテクスチャに収まらなかったという意味になります。

この場合、特定の文字が使えないという状況になるんでよくないですよね。

これってなんで起こるかというと、

③で設定したサイズのテクスチャに文字を敷き詰めているわけなんですが、

配置するスペースがなくなったということのようです。

なのでサイズは結構大きめにする必要があったというわけです。

なので Excluded characters を確認して 0 じゃなかったら

③のサイズを大きくしてみましょう。

最大は8192x8192までテクスチャサイズを設定できるようです。

正常に生成できたら次はSaveをクリックしてファイルとして保存します。

場所はどこでもいいですが、フォントファイルと同じところの方がわかりやすい気がします。

f:id:m2game:20220115051720p:plain

FontAssetを適用する

作ったFontAssetを反映する方法です。

一番最初に作ったTextゲームオブジェクトををクリックします

TextMeshProの項目のFont Asset の部分をクリックして、

先ほどSaveしたFontAssetファイルをアタッチします。

f:id:m2game:20220115051737p:plain

あとは日本語を入れてみて表示できたら完成となります。

f:id:m2game:20220115051805p:plain

Font SizeやVertex Color をいじることでデザインを調整できます。

デザインについては別記事で詳しくやろうかと思います。

不安要素

前項でテクスチャサイズが8192x8192まで設定できると書いたのですが、

設定できても実際の端末上で使えるかは別問題な気がしています。

4096x4096まではほとんどの端末でサポートされているらしいのですが、

baba-s.hatenablog.com

8192x8192が使えるかどうかは載っているサイトを見つけられませんでした。

今後調査していきます。

おわりに

今回はTextMeshProを使うための導入手順についてやってみました。

日本語を使う場合に少しやっかいということがわかりました。

今回は導入までをやりましたが、

次回はTextMeshProの機能について深ぼっていきたいと思います。

それでは、また。

読者登録・Twitterのフォローをしていただけると、ハッピーになります。