環境
- Unity 2019.1.5f1
- TextMeshPro 2.0.1
症状
TextMeshProでUIを作っていたところ、特定の文字がズレて見えました。
下記画像の ち が下がって見える
ざっと調べてなぜズレるのか分かったのでまとめておきます。
再現手順
日本語フォントを用意
- 使ったのは mojimo gameさんの
UD丸ゴ_スモール-B - UnityのAssetsフォルダに入れておきます。
- 事前にIllustratorで確認したのが下記画像です。
- とても綺麗なフォントですね。
TextMeshProのフォントアセットを作る
- Window -> TMPro -> Font Asset Creator
- 設定はこんな感じ
- Sampling Point Sizeは32にしました。
- 2048*2048に日本語全部入れようとするとこのサイズが限界のため
- （実際は漢字含む大量の文字を含みます）
Generate Font AssetしてSave
TextMeshProTextを配置
- HierarchyにてCreate -> UI -> Text
- 作成したフォントアセットを選び、テキストに
もちものと記入 ちが下がってますよね。
原因
GlyphTableのBYによるズレ
- このズレは作成した
FontAssetのGlyph Tableにある、BYの値が関係していました。 - 適当に変えてみると文字が移動することが確認できます。
Sampling Point Size と BY の関係
Font Asset CreatorのSampling Point Sizeを変えながらいくつか作ってみました。Sampling Point Size Glyphサイズ BY 32 27 * 29 26 64 53 * 57 52 128 105 * 112 103
BY自体には小数を入れて微調整できるものの、Font Asset Creatorで作られた直後のアセットでは必ず整数値が入ってしまうようです。
この小数から整数への丸め誤差がズレの原因と思われます。
対策
A. Sampling Point Sizeを大きくする
Font Asset作成時のフォントサイズを大きくすれば、小数から整数に変換される誤差は相対的に小さくなるので、ズレは目立たなくなります。
使用する文字種が少なければ、大きいサイズで作成しておけば良さそうです。
B. Font Fallbackを活用する
【Unity】TextMeshProにFont FallbackとDynamic SDF Systemが追加、日本語が使いやすくなった。 - テラシュールブログ
TextMeshPro 1.4から Font Fallback や Dynamic SDF という仕組みが使えるようになりました。
複数のFontAssetを組み合わせることができるので、
- UIなど、綺麗に表示したい限られた文字は大きめフォントサイズで作成しておく
- 漢字を含む日本語フォントなど、文字数が多いものはフォントサイズ小さめで作成しておく（ズレを許容する）
前者に存在しない場合のみ後者を使うようにすれば、UI上での文字ズレは目立たなくできそうです。
後者のフォントは Dynamic SDF System で生成してもよいかもしれません。
C. FontAssetCreatorに手を加える
最近のTextMeshProはPackageManager経由で導入されるので、ソースコードが同梱されてます。
FontAsset作成処理に手を加えればBYの値を整数ではなく小数値で作成できるのではと思います。（私は断念しました）
D. TextMeshProの更新を待つ
標準でズレなく表示できるようになるのを待つ。
（フォーラム検索しても同様の問題みつけられませんでした・・・誰も困ってない？？）
おわり
ググっても全くと言っていいほど出てこなかったのですが、この症状は誰も困ってないんでしょうか？
なんらか情報お持ちでしたら教えていただけると嬉しいです。
