UNITY* TextMeshPro 特集 * 第 5 部
* タイポグラフィによる美しいテキストレイアウト *
FontAsset Atlas
管理ソース変更によるカーニング実装
《 FontAsset ▷ Inspector ▷ GlyphTable 》
第4部までの検証で TextMeshPro のカーニングは
まーったく使い物にならないことがよーっくわかった。
なので少々強引だが最終手段として FontAsset 内にある
Atlas
の管理ソースを変更する。
第2部で述べたが、Atlasというのは Font のベジェパスを画像変換して
まとまった集合体のこと。
どの位置にどの Font がどのようになっているか。
それらを管理しているのが、FontAsset を選択して表示される
Inspector 下方にある GlyphTable だ。
日本語で言えば図形（グリフ）テーブルかな。
（その下に第4部で説明した GlyphAdjustmentTable という
似たような名前のカーニング設定があるので間違えなないように。
あと、画像が見づらい場合は、クリックして拡大。）
CheckGlyphTable
GlyphTable を開くと下のようなコンソールが出てくる。
GlyphSearch という検索エリアに文字を入力して
サーチをかけると対象ソースだけに絞られる。
（数字・英語は検索対象が多く複数表示される）
TextMeshPro
始める前に、当方の作品コンセプトでは文字は斜体と決めており、
紹介している文字が正規スタイルではないため、
理解しづらい場面もあるかもしれない。
ご了承いただきたい。
ではやっていこう、カーニング設定を。
まずシーンに TextMeshPro を2つ配置。
Textではなく、TextMeshPro - Text。
1つ目に 「 ■ 」（四角）記号を2つ。
2つ目に漢字以外の文字と記号。
「 ■ 」サイズは大きめに。
レイアウトはこんな感じ。
漢字はないが。
GlyphTable
GlyphTable の説明。
1. GlyphSearch 対象文字ソース検索
2. 対象文字
3. OX: 文字 左側幅値
4. OY: 文字 天地位置
5. ADV: 文字 右側幅値
6. Previous Page: 前の一覧へ
7. Page: ページ
8. NextPage: 次の一覧へ
9. Ascii: 文字コード
10. Hex: 管理コード
11. X: Atlas 水平位置
12. Y: Atlas 垂直位置
13. W: 文字幅
14. H: 文字高さ
15. SF: 比率
基本1〜5以外は使用しない。
注意として15の比率は絶対変えてはならない。
比率の異なる文字が混入するとレイアウトが崩れる。
MakeDeck
はじめに Inspector へ入力した「 ■ 」のカーニング設定を行う。
これがカーニングの基準文字となる。
まずは GlyphTable の GlyphSearch から「 ■ 」四角文字を
入力してソースを表示させる。
基準文字の作成。
文字左側の設定値 OX を0に。
次に右側の文字との空きの設定値 ADV を図の空き幅になるくらいに調整。
ギリギリすぎないように。
漢字以外はサイズがバラバラなので文字間が割と広く見える。
なので漢字より少し狭いカーニングの方が綺麗に見える。
SETkerning!
カーニングの設定方法。
デッキ中央に文字を挟む。
GlyphTable で対象の「あ」を検索してソースを表示させる。
デッキを見ながら OX とADV の値を「 ■ 」を調整したときと
同じくらいの空きになるように変更する。
これだけ。
文字によって値は異なるが、
感覚はすぐ理解できると思う。
1文字だけだと作業効率が悪いので、
3つくらいかな。
おさらいも含めて GlyphTable の場所。
FontAsset を選択して Inspector に表示。
デッキ下はカーニング調整後の確認用。
カーニング設定が終わると即時反映されるので
デッキ下の一覧がどんどん詰まっていく。
Fight!
あとはがんばるだけ。
がんばる。
小文字は気持ち幅狭め。
「」『』【】［］｛｝この5種カッコ（半角含む）は図のように
左右隣接文字から少し離す。
逆に挟む文字との幅は狭め。
() [] {} 半角カッコ類はデフォでかなり下に落ちているので、
上に移動させて「 ■ 」の天地センターになるように調整する。
また、 _ ＿ 半角全角のアンダーバーも下に落ちているので、
上に移動させて「 ■ 」のぴったり下ぞろえになるように調整する。
、。も右側の文字との幅を図のくらい広げる。
ボポマ。
カーニング設定完了。
図の上の方がカーニング設定済み。
当然だが Atlas の文字ソースを直接変更しているので、
第 4 部で発生した問題はまったく起きていない。
保存をかけると表示されている文字が白四角になる場合があるが、
何かすれば元に戻るので慌てない。
1日かかった。
Inspector で文字間を少し広げて調整。
綺麗な文字組。
漢字の文字間が少し気になるが、まぁ最後に調整すればいい。
結論：
がんばって、何とかなった
カーニング
FontAssetCreator のカーニングの読み取りがちゃんとしていればいいだけの話だが...
さて、次の第 6 部で文字に美しい演出をかける。
入れ忘れた文字の追加方法も紹介しているので是非。
UNITY* TextMeshPro 特集 *
* 第 1 部 TextMeshPro：テキスト表示にもの申す
* 第 2 部 FontAssetCreater：フォントベジェパス画像変換
* 第 3 部 FontAssetCreator：カーニング読み取りチェック
* 第 4 部 GlyphAdjustmentTable：設定テーブルへ直接カーニング値をセット
* 第 5 部 FontAsset Atlas：管理ソース変更によるカーニング実装
* 第 6 部 Materia FaceOutline：未来的な文字表現へ
* 第 7 部 KUMA* STUDIO 厳選！常用漢字を含む文字一覧