【Unity】ワンランク上のUI TextMeshPro完全攻略！

TextMeshPro完全攻略！ワンランク上のUI

文字には色々な役割があります。ゲームの雰囲気を決めたり、レイアウトで見栄えを変えたり、一文字で意味を伝えたりすることができます。しかし、Unityの標準装備であるuGUIでは、文字の魅力を100%引き出すことができていません。今回はTextMeshProを用いて文字の魅力を引き出すことでゲーム制作に役立てていきます。

TextMeshProの魅力5選

拡大しても文字がにじまない

uGUIでは画面の解像度からフォントを決めているので、文字を拡大すると解像度が足りず文字がにじむことがある。しかし、TextMeshProを使うことで、拡大してもにじまない文字を作成することができる。

様々なレイアウト調整機能がある

uGUIでは文字を表示したい範囲に等間隔に文字を並べるなどのことができません。しかし、TextMeshProを使うことでカーニングをつけることができます。

文字にエフェクトを容易につけることができる

uGUIでは文字に複雑なエフェクトをつけることができません。しかし、TextMeshProを使うことで複雑なエフェクトをつけることができます。また、エフェクトの設定・変更が即座に反映されることも魅力です。

文字に演出を加えることができる

TextMesh Proにはエッジや光沢を加えることができます。Game Scene内のLightから影響を受けて影をつけたりオプションもあります。

タグによるリッチテキストの制御ができる

uGUIでは太文字やインタリックなどしかできません。しかし、TextMeshProを使うことで、マージン、ハイライト、アイコン表示などをすることができます。

TextMeshProの使い方(日本語対応)

 TextMeshProを追加

SceneにTextを追加していきましょう。

Hierarchy→3D Object→Text – TextMeshPro

TextMeshProを追加すると初めて使う場合は、以下のような画面が表示されます。

Import TMP Essentialsをクリックしてください。

これで追加は完了です。

日本語対応

現在画面にはSample Textと書かれていますが、日本語の文字を入力してみてください。下記のように日本語を表示することができないはずです。

そもそもTextMeshProには、日本語フォントが含まれていないので追加する必要があります。

それでは日本語のフォントを用意しましょう。

今回はGoogle Fontsからフォントを持ってきました。

Fontsフォルダを作成しダウンロードしたフォントを追加しておいてください。

ダウンロードしたフォントをTextMeshProに対応させるために確認用ファイルと完全版のファイルをダウンロードする。

確認用ファイル

完全版ファイル

以上で下準備が完了です。

Window→TextMeshPro→Font Asset Creator

Source Font Fileにダウンロードしたフォントを追加

Character SetをASCIIからCharacters From Filesに変更し、Character FileにTextMesh Pro 作成確認用サンプルファイルを追加してダウンロードした日本語のフォントをTextMeshProに対応させる。

Generate Font Atlasをクリックして、Saveをクリックします。

＊完全版のファイルを使うと変換までに時間がかかるので、まずは確認用ファイルで実行しましょう。

Font Assetを先ほど変換したフォントに変更しましょう。

これで日本語表示ができるようになったはずです。

＊確認用ファイルでは漢字のひょうじはできません

できたら今度は完全版ファイルで同じことを繰り返して終了です。

＊完全版ファイルはGenerate Font Atlasに時間がかかるので注意してください。

これで漢字の表示もできるようになりました。

まとめ