こんにちわ、オオバです。
ここ最近のUIシステムは、uGUI一択です。
一昔前はNGUIを採用することもありましたが、
Unity社のがんばりでuGUIでのレベルも上がりました。
オオバはUI周りの仕事に携わることが多いです。
UIデザイナーからもらった画像データをUnityに組み込みます。
NGUIではできたことが、uGUIではできないことが現実的にあります。
uGUIでできること、できないことを理解して、
UIデザイナーと対話するということも
UIに関わるUnityエンジニアの大きな役目です。
※UIに関わるUnityエンジニアを
ここではUIエンジニア と呼称します。
📝 目次
デザインの再現はUIエンジニアの腕の見せどころ
デザインする上で文字の扱いは非常に重要な要素です。
- フォントの選択
- 文字の大きさ
- 文字色
- 文字同士間隔(カーニング)
- 行間
などなど。デザイナーがこだわりたい点はたくさんあります。
プロダクトのクオリティアップには必要なのです。
オオバも元々デザイナーでした。
文字には苦労した経験があります。
時間を書けて選びに選んだフォント。
デザイナーではない職種の人からは、
簡単そうに見えるかもしれませんが、
かなり骨が折れる作業です。
そういうデザイナーの血の滲むような苦労がある分、
UIエンジニアとしてはできる限り要望に応えたい。
むしろ、ここが腕の見せどころではないでしょうか。
uGUIのテキスト表示機能には改善の余地あり
さっそくuGUIのテキストで
ぶつかった壁について紹介します。
テキストを表示させるためには、
uGUIのTextコンポーネントを使用します。
こちらがTextコンポーネントのインスペクタで、
全ての設定項目です。
文字間設定が存在しない
よくよく見てみると、、、
カーニング（文字間）設定がないんです!!
ちなみに 『Line Spacing』という
それっぽい設定項目がありますが、
これは 行間設定 です。
| 行間 Before | 行間 After |
|---|---|
 |  |
このように行間の調整は可能です。
一方NGUIではバッチリ可能
uGUIよりずっと古参のUIアセットNGUIはどうか。
バッチリカーニングされます。
話がそれますが、気持ちuGUIのテキストより綺麗にくっきり描画されているように見えます。
NGUIにはUILabelという高機能なテキストコンポーネントがあります。
非常に役に立ってくれました。
コンポーネントの比較
uGUIのTextコンポーネントとNGUIのUILabelコンポーネントの中身を比較してみます。
| uGUIのText | NGUIのUILabel |
|---|---|
 |  |
設定項目数自体ぱっと見でNGUIの方が
充実していて実現できる幅が違います。
まとめ
色々と調べましたがuGUIでカーニングする方法は、
現バージョンではやはり無いです。
代案としては以下の2つくらいかなと思います。
- NGUIを使う ※この場合uGUIはとの併用は難しい
- TextMeshProを使う
ここで新しくTextMeshProというキーワードが現れましたが、
こちらはuGUIと併用可能なビットマップフォントを使用することができるアセットです。
これを使えばカーニングを指定できますが、
ビットマップフォンのため文字数が多かったり
文字サイズが大きかったりすると容量を圧迫してしまいます。
カーニングが出来ないデザインって、
もはやデザインではないと個人的には思っているため、
uGUIを捨ててNGUIを使うというのが最善の解では無いかなと思っています。
まだまだ、UnityのUI開発は発展途上のようで、これからの進化が楽しみです。
早急に発展してもらいたいところです。
👉 オススメ記事
- 【UIデザイナー向け】uGUIでグラデーションマスクの作り方
- 【Unity】UIデザイナー向け！uGUIで色の加算合成をする方法
- 【初心者向け】Unityを使ったUI開発で大事にしている9つのTips
- 【UI開発】背景を画面に内包すると破綻する理由
- 【Unity】uGUIのCanvasGroupは頂点カラーを操作している事を知ってますか？
👩💻 検証環境
- Unity5.1.1f1
- NGUI v3.8.2
- macOS 10.10.2