UnityのTextMesh Proをマスターする(1/3)

はじめに

UnityでUIなどに使用するテキストはuGUIのTextを使うのが手っ取り早いのですが、あまり拡張性がないので凝ったデザインをしたいという場合は物足りなくなります。そんな時にはTextMesh Proを使うことが推奨されています。

今後TextMesh Proをきちんと使いこなすためにも、TextMesh Proの使い方について色々と調べてみました。調べた結果、多少、セットアップが面倒かもしれませんが、基本的にはuGUIのTextは使用せずにTextMesh Proを常に使えば良いという結論になりました。それら調べた情報をまとめて記事にしたいと思います。

フリーフォントを使ってタイトルロゴを好きなデザインに加工したり、C#スクリプトやVisual ScriptingでTextMeshProのテキストを操作できるようにすることがゴールとなります。まずは簡単なデモシーンを作成し、TextMeshProをセットアップしていきます。

ちなみにTextMesh Proは元々は普通のアセットだったとのことですが、優秀だったためUnityの公式パッケージとして取り入れられたとのことです。（参考URL: #5）

私は今まであまり気にしていなかったのですが、UI Textはビットマップ画像で出力しているので拡大するとギザギザなピクセルでぼやけた感じになります。一方、TextMesh Proはベクターグラフィックとして出力されるので拡大してもきれいです。モバイル向けのゲームではあまり関係ないかもしれませんが、ちょっと大きめの画面に出力されるようなゲームを制作する場合は注意ですね。そう意味でも原則としてTextMesh Proを使えば良いでしょう。( 1.1)

1.1 Comparison of uGUI Text and TextMesh Pro

使用したソフトウェアのバージョンは以下の通りです。

Unity 2021.1.19f1
TextMesh Pro 3.0.6

デモシーン用プロジェクトの作成

Unity Hubで新規プロジェクトを作成します。Unity Hubを起動したら「Projects」タブを開き、「NEW」ボタンをクリックし、プロジェクト作成画面を表示させます。「NEW」ボタン右にある三角アイコンをクリックして表示されるメニューからPCにインストールしているUnityのバージョンを指定してプロジェクトの作成が可能です。( 1.2)

今回テンプレートは3Dを選択したいと思います。プロジェクト名は適当な名前で良いですが、ここでは「TextMeshProDemo」と入力しました。ロケーションに保存先を指定し「CREATE」ボタンをクリックします。( 1.3)

1.2 Projects - Unity Hub

1.3 Create a new project - Unity Hub

TextMeshProセットアップ

Unity 2021ではプロジェクトを作成するとTextMesh Proのパッケージがプリインストールされています。インストールの有無はPackage Managerで確認できます。( 1.4)

Hierarcyウィンドウ上で右クリックし、コンテキストメニューから「UI → Text - TextMeshPro」を選択します。( 1.5)

1.4 Package Manager

1.5 Text - TextMeshPro

TextMesh Proのテキストオブジェクト作成の際に初回のみTMP Importerウィンドウが表示されるので、「Import TMP Essentials」ボタンをクリックし基本コンポーネントをインストールします。その後、必要に応じ「Import TMP Examples & Extras」ボタンをクリックすれば、デモコンテンツなどがインストールできます。( 1.6)

HierarchyウィンドウにCanvasゲームオブジェクトとともにTextMesh Proのテキストオブジェクトが追加されます。Sceneウィンドウにある「2D」ボタンをクリックして適宜、2D表示にするとテキストの調整がしやすいです。サンプル等はAssetsフォルダ配下のTextMesh Proフォルダ内に保存されます。( 1.7)

1.6 TMP Importer

1.7 Unity Editor

セットアップと言っても大した作業は必要なくここに記載した内容の手順ですぐに使えるようになります。

フリーフォントの追加

好きなフォントを設定してみたいと思います。デフォルトのフォントは1種類しかインストールされていません。好きなフォントを使用したいという場合は自分で用意する必要があります。余談ですが、以前フォントを自作しようとしたことがあり、今でもフォントを作りたくなってしまいます。ちなみにMacのフォント制作ソフトウェアであるGlyphsがおすすめです。（参考URL: #8）

以下の2つのサイトをよくフリーフォント探しに使用しています。

今回は、dafont.comよりCoolveticaというフォントをダウンロードしました。もしリリースするようなゲームやアプリに使用する場合は、よくライセンスを確認した方が良いです。よくあるのは商用フリーと記載があってもフォントの埋め込み不可とされている場合もあります。その場合、おそらく本記事にあるような方法でフォントをゲーム内で利用するのはNGになる可能性が高いです。( 1.8)

ProjectウィンドウのAssetsフォルダ配下にFontsフォルダを作成し、ダウンロードしたTTFファイルをUnity Editorへ直接ドラッグ&ドロップし読み込みます。( 1.9)

1.8 Coolvetica - dafont.com

1.9 Fonts - Assets

Font Asset Creator

TextMesh ProではAssetsフォルダに読み込んだフォントをそのまま設定することができません。そんな難しい話ではないのですが、Font Asset Creatorというツールを使ってFont Atlasファイルを生成する必要があります。

Window → TextMeshPro → Font Asset Creatorをクリックします。( 1.10)

Source Font Fileに変換したいフォントを指定し、「Generate Font Atlas」ボタンをクリックします。( 1.11)

1.10 Open Font Asset Creator

1.11 Generate Font Atlas

Font Atlasが表示されたことを確認し「Save as...」ボタンをクリックし、保存ダイアログが表示されるので、Font AssetファイルとしてFontsフォルダに保存します。( 1.12)

Fontsフォルダに保存されたTextMesh ProのFont Assetファイルの中身を見るとSDF MaterialとSDF Atlasという2つのコンポーネントで構成されているのが分かります。( 1.13)

1.12 Save as Font Asset

1.13 Components of Font Asset

フォントの基本設定

TextMesh Proのゲームオブジェクトの名前を「Demo Tiltle」に変更します。InspectorウィンドウでインポートしたFontを設定します。Transformコンポーネントは他のオブジェクトと同様に位置や大きさを調整します。Textコンポーネントではテキストオブジェクトの基本的なパラメータの設定が可能です。主に設定することが多いパラメータを下記に示します。( 1.14)

Text Input: 表示させたいテキストを入力
Font Asset: フォントを指定
Font Size: フォントの大きさを指定
Alignment: 上下左右の配置を指定

以下の画面ショットが設定後のSceneウィンドウの表示結果となります。TextMesh Proの基本的な設定は以上となります。( 1.15)

1.14 Text Component