こんにちわ、オオバです。

ここ最近のUIシステムは、uGUI一択です。
一昔前はNGUIを採用することもありましたが、
Unity社のがんばりでuGUIでのレベルも上がりました。

オオバはUI周りの仕事に携わることが多いです。

UIデザイナーからもらった画像データをUnityに組み込みます。
NGUIではできたことが、uGUIではできないことが現実的にあります。

uGUIでできること、できないことを理解して、
UIデザイナーと対話するということも
UIに関わるUnityエンジニアの大きな役目です。

※UIに関わるUnityエンジニアを
ここではUIエンジニア と呼称します。

📝 目次

デザインの再現はUIエンジニアの腕の見せどころ

デザインする上で文字の扱いは非常に重要な要素です。

などなど。デザイナーがこだわりたい点はたくさんあります。
プロダクトのクオリティアップには必要なのです。

オオバも元々デザイナーでした。
文字には苦労した経験があります。

時間を書けて選びに選んだフォント。
デザイナーではない職種の人からは、
簡単そうに見えるかもしれませんが、
かなり骨が折れる作業です。

そういうデザイナーの血の滲むような苦労がある分、
UIエンジニアとしてはできる限り要望に応えたい

むしろ、ここが腕の見せどころではないでしょうか。

uGUIのテキスト表示機能には改善の余地あり

さっそくuGUIのテキストで
ぶつかった壁について紹介します。

【Unity】uGUIテキストの行間について知っておくべき事実_64

テキストを表示させるためには、
uGUIのTextコンポーネントを使用します。

【Unity】uGUIテキストの行間について知っておくべき事実_68

こちらがTextコンポーネントのインスペクタで、
全ての設定項目です。

文字間設定が存在しない

よくよく見てみると、、、

カーニング(文字間)設定がないんです!!

ちなみに 『Line Spacing』という
それっぽい設定項目がありますが、

【Unity】uGUIテキストの行間について知っておくべき事実_81

これは 行間設定 です。

行間 Before行間 After
【Unity】uGUIテキストの行間について知っておくべき事実_87【Unity】uGUIテキストの行間について知っておくべき事実_87

このように行間の調整は可能です。

一方NGUIではバッチリ可能

uGUIよりずっと古参のUIアセットNGUIはどうか。

【Unity】uGUIテキストの行間について知っておくべき事実_97

バッチリカーニングされます。
話がそれますが、気持ちuGUIのテキストより綺麗にくっきり描画されているように見えます。

【Unity】uGUIテキストの行間について知っておくべき事実_102

NGUIにはUILabelという高機能なテキストコンポーネントがあります。
非常に役に立ってくれました。

コンポーネントの比較

uGUIのTextコンポーネントとNGUIのUILabelコンポーネントの中身を比較してみます。

uGUIのTextNGUIのUILabel
【Unity】uGUIテキストの行間について知っておくべき事実_113【Unity】uGUIテキストの行間について知っておくべき事実_113

設定項目数自体ぱっと見でNGUIの方が
充実していて実現できる幅が違います。

まとめ

色々と調べましたがuGUIでカーニングする方法は、
現バージョンではやはり無いです。

代案としては以下の2つくらいかなと思います。

ここで新しくTextMeshProというキーワードが現れましたが、
こちらはuGUIと併用可能なビットマップフォントを使用することができるアセットです。

【Unity】uGUIテキストの行間について知っておくべき事実_132

TextMeshPro | AssetStore

これを使えばカーニングを指定できますが、
ビットマップフォンのため文字数が多かったり
文字サイズが大きかったりすると容量を圧迫してしまいます。

カーニングが出来ないデザインって、
もはやデザインではないと個人的には思っているため、
uGUIを捨ててNGUIを使うというのが最善の解では無いかなと思っています。

まだまだ、UnityのUI開発は発展途上のようで、これからの進化が楽しみです。
早急に発展してもらいたいところです。

👉 オススメ記事

2021秋 Asset Refreshセール
100以上のアセットがなんと50%OFF!!オオバもいくつか買いました!
期間 : 10月2日午後3時59分まで

👩‍💻 検証環境