TextMeshPro(TMP)

以下のサイトを参考にオリジナルスプライト(画像)のフォントを作成した。

https://nekojara.city/unity-textmesh-pro-sprite-number

補足

画像を作る

ちびちびフォント(もう配布されていない)5pxフォント。等幅ではないが横幅は約4pxのフォント。これを2倍にして使うことにした。10pxのフォントのイメージで周りに1pxの枠を付けているので実質12pxのフォントか。

ここで作る画像を隙間なくぴっちり作ると、実行時に謎の枠線が現れる現象に見舞われたので、余白を入れて作ることにした。また、等間隔になるようにグリッドを10x14pxとした。

SNchibiフォントの作成 – Aseprite

画像をUnityに取り込んでTexture2Dの設定を行う。

  • SpriteMode:Multiple
  • FilterMode:Point(no filter)
  • Compression:None
Unity

SpriteEditorでスライス

  • Type:Grid By Cell Size
  • x:10
  • y:14
  • Pivot:Bottom Left
Sprite Editor

スライスしたら、Spriteを右クリックしてCreate→SpriteMeshPro→Sprite AssetとたどりTMP_Sprite Assetを生成する。

バージョンに寄ってはCreate → TextMeshPro →Sprite Asset

生成できたら、文字コードの割当とカーニング的な設定を行う。

SpriteCharacter Tableでコードの設定0は30~9は39、マイナスは2Dとセットしていく。このときUnityのバグで30と入力したあと、別の入力欄をクリックしないと反映されない。

Sprite Character Table

SpriteGlyph Tableでカーニング的な設定を行うADという値を変更する。1は8、1以外の数字は9、マイナスは7を指定するとちょうどよい文字間隔になった。

Sprite Glyph Table

ダミーフォントの作成

  • メニューバーの「Window」→「Font Asset Creator」でパネルを表示。
  • 「Source Font File」に適当なフォントをいれる。今回は画像作成で使ったフォント(SNchibi2_5)を入れた。
  • 「Sampling Point Size」は一応元のフォントのサイズである5pxとした。
  • 参考記事とは異なり、「Atlas Resolution」を16×16とした。理由は完全な空っぽのフォントだと警告表示(アンダーバーのフォントがない?的な)が出てしまうのでアンダーバーだけ組み込んだダミーフォントを作成するため。
  • 「Character Set」は「CustomCharacters」として「Custom Character List」に「_」だけ入力。
  • 「Generate Font Atlas」を押して生成
  • 「Save」で任意の場所にダミーフォントを保存する。
Font Asset Creator

TextMeshProに生成したフォントをセットする

  • 「FontAsset」にダミーフォントをセット
  • 「ExtraSettings」をクリックして拡張設定を表示
  • 「SpriteAsset」に画像から生成したスプライトフォントをセット
Text Mesh Pro

フォント生成で警告発生

サイトに従ってフォントを生成したが下記のエラーが出た。

The character used for Underline is not available in font asset [フォント名].

空のフォントファイルを作って騙す作戦なのだが、アンダーバーだけは作らないと警告が出てしまうようだ。サイトでは空のフォントであり、リソース節約のためにAtlas Resolutionを最低の8にしているが、アンダーバーだけは生成するので16×16で作成した。

コメントする