Amabie Labo
UI Toolkit で日本語フォントを表示する
こんびえ〜🧜♂️天日江護です🐳
今回は Unity の開発ツールの UI Toolkit で日本語フォントを使っていた際に実機にビルドすると表示されない問題が発生したのでその解消方法について解説します。
背景
そもそも記事にするほどでもないかなと思っていたのですが、当時調べていた時に UI Toolkit に関する記事が少ないと感じたので寄稿することにしました。
問題
UI Toolkit を使って日本語を含む UI Document および VisualElement を生成していました。
Unity Editor 上では正しく表示されていたのですが、 iOS や Android にビルドした途端、以下のように英数字や記号だけが表示され日本語が表示されなくなりました。
この問題を解消していきます。
なお、今回は UI Toolkit の基礎的な使い方には触れませんのでご容赦ください。
結論
結論から言うと、FontAsset を生成して設定すれば日本語が表示されるようになります。
では、そもそも FontAsset とは何なのか、なぜ必要なのかについて先に触れておきます。
UI Toolkit のルーツ
その答えは成り立ちに起因しています。
UI Toolkit は単に HTML / CSS ベースのツールセットなだけではなく、 TextMesh Proというフォントをレンダリングする技術をベースに作られています※1。
この TextMesh Pro の技術の一部に FontAsset という Unity 独自のフォントアセット機能※2があり、これを踏襲しているため FontAsset の生成が必要になります。
※1) UI Toolkit の新機能紹介 - Unity ブログ
※2) Font Asset Creator - docs.unity3d.com
手順
FontAsset の必要性について理解してもらったところで適応手順について説明します。
Unity Editor 上のタスクバーの [Window] から [Text] の [Font Asset Creator] を選択します。
ウィンドウが立ち上がるため、FontAsset を作りたいフォントを選択、あるいはドラッグ & ドロップします。
もしフォントを持っておらず試したい場合は基本的に無料 & 商用利用も可能で、フォントの種類も豊富にあるため Google Fonts から選んでダウンロードするのがおすすめです。
次に、フォントの解像度を選び [Character Set] を [Custom Characters] にします。
[Custom Character List] の設定はやや複雑なため説明します。
https://gist.github.com/kgsi/ed2f1c5696a2211c1fd1e1e198c96ee4 に飛び、右上にある Download ZIP のボタンをクリックし、ダウンロードしたファイルを解凍すると、中に文字列が大量に入ったテキストがあるので、中身をコピペして [Custom Character List] に貼りつけます。
ここまでの手順は TextMesh Pro で日本語フォントを使う方法【Unity】 - 夜中にUnity で TextMesh Pro 時代の手順が記載されているので、参考にしてみてください。
最後に、[Generate Font Atlas] を押すと、長い時間かけて Font Asset が生成されるので、生成後、ウィンドウ最下部の [Save] で保存して、UI Builder から [Font Asset] の欄で生成された Font Asset を選択すれば成功です。
今回はここまで。よき開発ライフを〜🧜♂️