Zenn
🔥

TextMeshPro から□□□を駆逐する

に公開
Unity
font
textmeshpro
tech

TextMeshPro を使っていたら１度は見たことある「□」。
これを「完全駆逐」することを目指します。

◆日本語フォントを作成する

これで98%は改善されるでしょう。以下が手順です。

Noto Sans などの無料日本語フォントをサイトからダウンロードし、Assets/ に入れる

https://fonts.google.com/selection
Noto Sans はありふれてるし嫌！　という場合は別のデザインフォントでも構いません。

日本語文字一覧テキストを Assets/ に入れる

https://github.com/catsnipe/CharacterList
ここの jp_jis2.txt のようなテキストを Assets/ フォルダに入れてください。

Window ➡ TextMeshPro ➡ Font Asset Creator

画像のような値にして、Generate Font Atlas するとしばらくしてフォントが作成されます。

Missing characters に問題なければ Save しましょう。

TextMeshProUGUI コンポーネントに作成したフォントをドラッグ

Font Asset に作成した SDF をドラッグしてください。

このように表示されれば OK です。

◆特殊な文字

残りの 2% について考えていきます。

このような特殊な文字はどうすればいいでしょうか。
キノコの絵文字、また🈕という通常ほぼ使われない文字が入っています。
これらの文字は当然、通常の漢字では扱われていないので、□になってしまいます。

▼絵文字に対応


Kyub EmojiSearch API を使わせていただきます。
一旦 Unity を閉じた後、manifest.json に次のような記述を含めてください。

  "dependencies": {
    "com.kyub.emojisearch": "https://gitlab.com/KyubInteractive/emojisearchapi.git#com.kyub.emojisearch-1.1.5",
    ...

Unity を起動し、Packages に Kyub EmojiSearch API の存在を確認します。

Edit ➡ Project Settings ➡ TextMeshPro ➡ Settings

Default Sprite Asset に EmojiData_v14_google_apple をドラッグドロップ。

これで絵文字が表示されるようになります。

▼不要な絵文字をカットする

EmojiData14_google_apple を導入すると、変更されてほしくない文字まで絵文字になるかもしれません。例えば User00 というテキストは次のように変換されます。

この表示は普通に User00 にしたいですよね。そういった場合のカスタム方法です。

EmojiData_v14.txt

特定の絵文字をカットしたい場合、まず EmojiData_v14.txt の内容を変更します。
EmojiData_v14.txt は EmojiData14_google_apple と同じ場所にあるので、まず一旦このファイルを Assets/ の下であればどこでも構いませんが、複製。
今度は複製したテキストファイルを開きます。0～9 の絵文字をカットしたいので、今回は "KEYCAP 0" ～ "KEYCAP 9" を消去し、保存してください。

Sprite Emoji Importer

次に、Window > TextMeshPro > Sprite Emoji Importer を選択。

  • １に先ほど書き換えた EmojiData_v14.txt をドラッグ
  • ２に EmojiData_v13_apple_64.png または EmojiData_v13_google_64.png をドラッグ
  • Grid Size は 64、Padding 0、Spacing 2 に変更

以上で Create Sprite Asset > Save Sprite Asset。セーブ場所は Assets/ の下であればどこでも問題ありません。名前は EmojiData_v14 とでもしておきましょう。

最後に Project Settings > TextMesh Pro > Settings > Default Sprite Asset を作成した EmojiData_v14 をドラッグすると、変更が反映されます。

▼対応できない文字は見えないようにする

通常のフォントには登録されていないが、ユーザー入力によりどうしても入ってしまう特殊文字……これを、せめてなかったことにする（□を見えなくする）手段です。

MissingFont を作成

このようなダミーフォントを作成します。
（名前は MissingFont としておきます）

MissingFont の内容を変更する

Characters Table に先ほど登録した１文字があります。これをクリックし、入力モードにします。
Unicode を 0xffff、Scale を 0 にします。

メインフォントの Fallback に MissingFont を登録

先ほど作成した日本語フォントの Fallback Font Assets に MissingFont を登録します。

Edit ➡ Project Settings ➡ TextMeshPro ➡ Settings

Dynamic Font System Settings の Missing Character Unicode を 16777215（= 0xffffff）にします。

これは「表示できない文字は 0xffffff で出力する」という意味です。
＝先ほど作成したスケール 0 のダミーフォントが表示される ➡ スケール 0 だから見えない、というカラクリです。

TextMeshPro で表示できない文字を表示しようとすると Console に警告が出ますが、その警告も消したい場合は Disable warnings に ✔ を入れます。

これで、Unknown な文字を非表示にすることができました。

Discussion