UnityのuGUIカーニングについて皆が知っておかなくてはならない事実

開発環境

• Unity v5.1.1f1
• NGUI v3.8.2
• MacOS 10.10.2

最近の仕事はuGUIを使ったゲームUI制作です。

デザイナーからもらった画像データをせっせとUnityに組み込みます。
今までNGUIを使っていたのですが、uGUIとは文化の違いがあるため、考え方を180度切り替えないといけません。

ある程度は勉強してきたので、そこまで戸惑いは無いのですが、大きな壁にぶつかったので、記事に残しておこうと思います。

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

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

• フォントの選択
• 文字の大きさ
• 文字色
• 文字同士間隔(カーニング)
• 行間

などなど。デザイナーがこだわりたい点はたくさんあります。
こだわることで、プロダクト自体のクオリティは大幅にアップします。

私も元々デザイナーだったため、文字には苦労しました。

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

そういうデザイナーの血の滲むような苦労がある分、フロントエンジニアとしては出来る限り要望に応えたい所です。

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

uGUIのテキスト表示機能

さっそく、ぶつかった壁について紹介していきます。

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

こちらがTextコンポーネントの全設定項目です。

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

カーニング設定がないんです!!

カーニング設定が出来ないんです!!

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

これは行間設定なので違います。

行間 Before	行間 After

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

一方NGUIではバッチリ可能

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

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

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

コンポーネントの比較

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

uGUIのText	NGUIのUILabel

設定項目数自体、ぱっと見でNGUIの方が充実していて、実現できる幅が違います。
やはり古参で且つ、未だにバリバリ現役のアセットはすごいなと改めて思いました。

まとめ

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

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

• NGUIを使う ※この場合uGUIはとの併用は難しい
• TextMeshProを使う

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

TextMeshPro | AssetStore

これを使えばカーニングを指定できますが、ビットマップフォンのため文字数が多かったり文字サイズが大きかったりすると容量を圧迫してしまいます。
※とはいえTextMeshProは非常に便利なので詳しい使い方は別の機会に執筆する予定です。

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

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

uGUI参考書籍

UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード

uGUI初心者には重宝すぎる1冊。これだけでuGUIはほぼ使えるようになります。