TextMeshProで字の幅をあわせる [カーニング]

レースゲームなんかを作っていると電光掲示板のようなカウントダウンを作りたくなる時があると思います。
しかしそのままだと文字同士の幅がバラバラなので２ケタ表示した時にずれてしまいます。文字同士の間隔は FONT SETTINGS -> SpacingOptions から変更できますが、全ての文字に対してスペースをとるので結局またばらけてしまいます。

とくに1,3,7がズレやすいみたいですね。

TextMeshProのドキュメントをみたのですが情報が古いのか2018/9の時点で実際のインスペクタと違いました。ググってもあまり情報が載ってなかったので書き留めておきます。

まずはあらかじめ使いたいFontAssetを作っておきます。今回はdigitalismというフォントをお借りしました。

上の画像のように修正する幅がわかりやすいようにテキストを88とした黒いオブジェクトを作ってガイドとします。最終的に合わせたい幅に Inspectorから FONT SETTING -> SpacingOptions -> Char を設定しておきます。今回は10にしました。

次に修正したい文字(11)を色を変えて作り、positionとSpacingOptionsを合わせておきます。
ここまででこんな感じになってると思います。電光掲示板っぽい背景も置いてみました。

ここからは始めに作成したFontAssetを編集します。

下のほうにある Glyph Table のGlyphe Searchで編集したい文字を検索すると半透明状態で表示されます。この半透明は一見選択できなさそうですがクリックすることで編集できるようになります。

• X,Y　    -> 作成したアトラスから切り取る基準点
• W,H      -> 基準点からの表示する範囲
• OX,OY   -> 中心点からの表示位置
• ADV     -> 文字送り
• SF        -> 拡大率 

基本的に赤い項目はいじる必要がないと思います。
文字送りというのは、その文字の中心から次の文字の中心を指定する距離です。

まずは Glyph Search から8を検索してADVをみます。ここでは89でした。この値を他の数字にも当てはめていきます(赤で囲んだ部分)。

これで中心が揃いましたが、描画位置がずれているのでまだずれたままだと思います。


これをOXを調整して合わせます。

他の文字も調整して完成です。