はじめに
前から気になっていた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 をクリック
そうするとウィンドウが表示されます。
Import TMP Essentials をクリックします。
そうすると、
AssetsにTextMesh Proのフォルダができています。
これでTextMesh Proが使える状態になりました。
PackageManagerでインストールしなくても使えるようですね。。
TextMeshProの洗礼
あとは通常のテキストと同じ要領で文字列を打ち込んで、、、
て、あれ？
日本語(正確には全角文字)が■になって表示されちゃう。。
デフォルトだと英数字と半角記号しか使えないみたい。
これが英語圏との違いか。。まいったなぁ。。
解決策は次項にて。。
FontAssetという概念
通常のTextにはないFontAssetという仕組みがTextMeshProにあります。
通常のTextではフォントをセットして使うものなのですが、
TextMeshProでは、フォントではなくFontAssetというものをセットする必要があります。
後述でFontAssetの作り方について説明しますが、
FontAssetは、フォントと使う文字を登録してできたファイルです。
使う文字という部分がミソで、使う文字以外は表示されなくなります。
(表示する方法もあるみたいですが、現在調査中です)
その代わり余計なデータは使わなくなるため容量が節約できます。
デフォルトでは LiberationSans SDFというFontAssetが登録されています。
こやつに登録されている文字に日本語がありません。
なので日本語が表示されなかったというオチでした。
FontAssetを作る
Fontにこだわりがなく日本語も使わないのであればデフォルトのままでいいと思います。
でも大体そんなわけないですよね。。
ということで、FontAssetを作りましょう。
FontAssetファイルはフォントファイルごとに作るイメージです(たぶん)
まずはフォントファイルをAssetsに入れておきます。
Window → TextMesh Pro → Font Asset Creator とクリックします
下図のようなウィンドウが表示されます
① には先ほどつっこんだフォントファイルをセット
②は 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をクリックしてファイルとして保存します。
場所はどこでもいいですが、フォントファイルと同じところの方がわかりやすい気がします。
FontAssetを適用する
作ったFontAssetを反映する方法です。
一番最初に作ったTextゲームオブジェクトををクリックします
TextMeshProの項目のFont Asset の部分をクリックして、
先ほどSaveしたFontAssetファイルをアタッチします。
あとは日本語を入れてみて表示できたら完成となります。
Font SizeやVertex Color をいじることでデザインを調整できます。
デザインについては別記事で詳しくやろうかと思います。
不安要素
前項でテクスチャサイズが8192x8192まで設定できると書いたのですが、
設定できても実際の端末上で使えるかは別問題な気がしています。
4096x4096まではほとんどの端末でサポートされているらしいのですが、
8192x8192が使えるかどうかは載っているサイトを見つけられませんでした。
今後調査していきます。
おわりに
今回はTextMeshProを使うための導入手順についてやってみました。
日本語を使う場合に少しやっかいということがわかりました。
今回は導入までをやりましたが、
次回はTextMeshProの機能について深ぼっていきたいと思います。
それでは、また。
読者登録・Twitterのフォローをしていただけると、ハッピーになります。