【Unity】RPGを作るチュートリアルその2 フォントとTextMeshProの設定
- 2024.12.14
- RPGチュートリアル
- RPG, Unity, ゲーム開発, チュートリアル
シンプルなRPGをUnityで作るチュートリアルシリーズの2回目です。
今回はプロジェクトのセットアップとして、フォント関連の設定を行います。フォントファイルのインポート、TextMesh Pro関連の設定を行なっていきます。
制作環境
MacBook Pro 2023 Apple M2 Max
Unity6 (6000.0.30f1) Silicon
作業の洗い出しや作業順の検討では6000.0.26f1を想定していましたが、その間に沢山アプデ入っていたので更新しました。
作業内容と順序
シンプルなRPGを作る上でどんな作業が必要か、どんな順番で作っていくと良さそうか、別ページで検討しました。基本的にこの流れに沿って進めていきます。
前回の内容
前回はプロジェクトを作成し、Pixel Perfect Cameraの設定を行いました。
フォントファイルのインポート
ゲーム内で使うフォントファイルをインポートします。今回は「PixelMplus」というフォントを使わせていただきます。いつもありがとうございます。
チュートリアル内では上記フォントのレギュラーで進めていきますが、お好きなフォントを使っていただければOKです。
まずはフォントファイルを配置するフォルダを作成します。Assetsフォルダの下に [Fonts] フォルダを作成します。
作成した「Fonts」フォルダに移動し、フォントファイルをインポートします。私は「PixelMplus」のうち、「PixelMplus12-Regular」をインポートしました。(githubでプロジェクトを公開している関係で、ライセンス類も含めています)
TextMesh Proのパッケージ導入
今回はTextMesh Proを使ってテキストを表示するので、パッケージをインポートしましょう。もはやデフォルトで使えるようになっていても良いのでは？ と思ってしまうくらいには毎回使っている気がします。
画面上部のメニューバーで [Edit] -> [Project Settings…] からProjectSettingsのウィンドウを表示します。左側の [TextMesh Pro] のタブを表示し、[Import TMP Essentials] のボタンをクリックしてインポートします。
Consoleウィンドウに「[TMP Essential Resources] have been imported.」とログが出たらOKです。
FontAssetの設定
フォントをインポートしたので続いてFontAssetを作成していきます。この時、フォントに含まれている文字を指定する必要があるため、U-618WEBさんの記事を参考に第一水準、第二水準の漢字が含まれる文字一覧ファイルを作成しました。
上記ファイルを「名前をつけて保存」からローカルに保存していただき、Unityのプロジェクトにインポートします。(リンクをそのまま開くとブラウザによっては文字化けして表示されるかもしれません。ファイルのエンコードはUTF-8です)
画面上部のメニューバーで [Window] -> [TextMeshPro] -> [Font Asset Creator] を選択します。
表示された「Font Asset Creator」の画面にて、以下の表の設定を行います。慣れていればいつも通りに設定していただいてOKです。
| 項目 | 値 |
| Source Font | PixelMplus12-Regular (インポートしたフォントを指定くださいな) |
| Character Set | Characters from File |
| Character File | font_characters |
設定ができたら [Generate Font Atlas] をクリックしてテクスチャを生成します。生成が完了すると以下のようにフォントアトラスの画像が表示されるので、これを確認して [Save as…] のボタンをクリックします。保存場所を確認するダイアログが表示されるので、任意の場所にファイルを保存します。(私はフォントファイルと同じフォルダに保存しました)
作成したFontAssetはTextMesh Proのコンポーネントを付けるときに設定していきます。
念の為の確認
FontAssetが作成できたらテキストを表示して確認してみましょう。Hierarchyウィンドウでコンテキストメニューを開き、 [UI] -> [Text – TextMeshPro] を選択します。
一緒にCanvasやEventSystemが作成されますが、それらは一旦後回しにして [Text (TMP)] を選択します。
Inspectorウィンドウで日本語で文字を設定してみると……。なんかぼやけてますね。今回は漢字の第一水準、第二水準まで含めてテクスチャアトラスを生成したため、文字数が多くなって1文字あたりのピクセル数も少なくなったことで、ぼやけて表示されてしまうようです。
解決策としては、
- 格納する文字を減らす
- テクスチャアトラスのサイズを大きくする
がありますが、今回は後者のテクスチャアトラスのサイズを大きくする方で対応したいと思います。画面上部のメニューバーから [Window] -> [TextMeshPro] -> [Font Asset Creator] を選択して「Font Asset Creator」を再度表示します。設定項目のうち、「Atlas Resolution」の左側のプルダウンの値を [4096] に変更して、[Generate Font Atlas] のボタンをクリックしてテクスチャを生成後、[Save as…] のボタンから保存します。先ほど作ったファイルを上書きする形で良いかと思います。「Text (TMP)」のゲームオブジェクトでは「TextMeshPro – Text (UI)」のコンポーネント内、「Font Asset」の項目で参照が切れる可能性があるため、再度アサインしておきます。
画面に表示してみると……さっきよりはマシでしょうかね。リリースするゲームならもう少しアトラスサイズを大きくしても良いかと思います。今回はチュートリアルなのでこのまま進めましょう。「ノスタルジックな感じを表現するため、ブラウン管のにじみを表現しました」と言い張ることとします。
Canvasの設定
上記の確認の中でCanvasを作成したので、ついでに設定をしてしまいましょう。Hierarchyウィンドウで「Canvas」のゲームオブジェクトを選択し、Inspectorウィンドウで設定を行います。「Canvas」コンポーネントでは「Pixel Perfect」の項目にチェックを入れ、「Additional Shader Channel」の項目では [Nothing] を選択します。
続いて「Canvas Scaler」のコンポーネントも以下の表のように設定します。
| 項目 | 値 |
| UI Scale Mode | Scale With Screen Size |
| Reference Resolution | X: 960, Y: 540 |
| Reference Pixels Per Unit | 32 |
画面サイズに応じて拡大縮小する「Scale With Screen Size」を選択しています。このときに使う参照解像度では、Gameウィンドウの表示解像度と合わせて横960px、縦540pxにしています。「Reference Pixels Per Unit」に関しては、1マス32pxの方針に合わせて32にしています。
シーンの整理
設定が完了したら、確認用に使った「Text (TMP)」のゲームオブジェクトを削除します。
ここでシーンも保存しておきましょう。ひとまずここまででセットアップは完了として、次は移動機能の作成に入っていきます。
おまけ・FontAssetでテクスチャに含める文字について
ここはチュートリアルの手順ではないので、余談の部分です。
今回のチュートリアルの中では日本語の漢字に関してJIS第一水準、第二水準も含めてテクスチャアトラスを作成しました。RPGの場合、ストーリーやイベント内で表示する文字も多くなることから、なるべく多くの文字が格納されている状態が望ましいかと思います。一方で、テクスチャのサイズが容量に影響することもあり、リリースするプラットフォームによっては格納する文字を減らすか、テクスチャサイズを小さくするかの調整が必要になります。例えば第二水準の漢字を含めないようにして文字数を減らしたりなどです。
PC向けのゲームなら減らさずにテクスチャを大きくしても許容されることが多く、モバイル向けのアプリならテクスチャサイズが大きくなると配信する時の容量に影響するため減らす方向で考えた方がよかったりします。
格納する文字を減らす場合、1文字あたりに使えるテクスチャ領域が大きくなることから、全体のテクスチャサイズが小さくなったとしても文字がくっきりと表示されます。ということは文字を減らすことで上記の調整が両方できてしまいますね。問題は、「その文字ってちゃんとこのフォントで表示されるかな？」という点で、テクスチャアトラスに格納していない文字がTextMeshProのコンポーネントで指定されると、その文字が表示されなくなります。RPGの場合はストーリーが大切なこともあり、脱字があると雰囲気を損ねるため、使える文字かどうかの確認は重要です。
開発者的には「使える文字の範囲でストーリー書いてください」と言いたいところですが、ストーリーを作る側からするとそれはとてもめんどくさいので、ストーリーとして作ってもらった文章(テキスト)の文字がFontAssetに対応しているかを開発者側で確認する機能をエディタ拡張として作っておくとグッド。幸い、TMP_FontAssetのクラス内では「この文字がFontAssetに含まれているかどうか」というメソッドもあるので、これを使って確認することができます。
プロジェクトの後半で大元のFontAssetを生成し直すのは影響が大きいため、格納されていない文字がある場合は、フォールバック用のFontAssetを作ってそちらで参照させる手があります。こちらなら必要な文字を追加していくことで対応できます。細かい点としては、フォールバック用のFontAssetのフォントサイズは、大元のFontAssetのものと合わせておくのがグッド。ここが異なっていると、くっきりしている文字と、そうでない文字が表示されることになります。
また、ユーザが文字を入力できる場合には、格納する文字を減らしたことでユーザが入力したい文字が表示されない、という状況も発生し得るため、基本的には日本語全部(他の言語向けにリリースするならその言語も)が格納されていることが望ましいです。チャット系の入力があれば特に全部入っていた方が良いかと思います。名前入力の場合、こちらもなるべく多く格納されているのが望ましいですが、上記のHasCharacterのメソッドを使って確認して「使えない文字が含まれています」と表示する裏技もあります。
こんな感じでFontAssetに含める文字については、ゲームがリリースされるプラットフォーム、ゲーム内の文字入力状況などから判断していくと良いかと思います。
……いやこれ別ページにまとめた方がいいな？
今回のブランチ
まとめ
今回はプロジェクトのセットアップの続きとして、テキスト関連の設定を行いました。チュートリアル内ではフォントファイルに含まれている日本語の大半をアトラスに含めましたが、実際に使う文字はそこまで多くありません。ゲームで使用する漢字の範囲に合わせて減らすのも良いでしょう。
次回はモック版のフィールド用タイル画像を用意して、それを使ってTilemap関係の作業を進めていきましょう。
ゲーム開発の攻略チャートを作りました！
「ゲームを作ってみたいけど、何から手を付けていいか分からない！」
そんなお悩みをお持ちの方向けに、todoがアプリをリリースした経験を中心に、ゲーム作りの手順や考慮すべき点をまとめたe-bookを作成しました。ゲーム作りはそれ自体がゲームのように楽しいプロセスなので、「攻略チャート」と名付けています。
ゲームを作り始めた時にぶつかる壁である「何をしたら良いのか分からない」という悩みを吹き飛ばしましょう！
-
前の記事
【Unity】RPGを作るチュートリアルその1 プロジェクトのセットアップ 2024.12.09
-
次の記事
【Unity】RPGを作るチュートリアルその3 Tilemapの設定 2024.12.18