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

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

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

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

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

本記事ではUnityのUIにおける
テキスト事情の課題と解決 をまとめます。

TextMeshProを使おう

結論を簡単にまとめます。

uGUIのデフォルトTextは、
TextMeshProによって淘汰されるでしょう。

圧倒的に機能が豊富です。
では詳細の解説に入ります。

この記事の内容

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

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

などなど。

UIデザイナーのこだわりたい点はたくさん あります。
なぜならクオリティアップに必要だからです。

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

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

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

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

uGUIのテキストは文字間変更できない

uGUIのテキストでぶつかった壁は
文字間変更できない こと。

この事実をUIデザイナーに伝えると、
結構ショックを受けます。

それだけUIデザインにとって
文字間とは重要なのです。

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

Textコンポーネントの全ての項目

【Unity】UIテキストの文字間(カーニング)事情まとめ_0

文字間設定が存在しない

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

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

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

【Unity】UIテキストの文字間(カーニング)事情まとめ_1

こちらは 行間設定 です。

行間 Before行間 After
【Unity】UIテキストの文字間(カーニング)事情まとめ_2
【Unity】UIテキストの文字間(カーニング)事情まとめ_2

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

一方NGUIではバッチリ可能

古参のUIアセットNGUIはどうか検証します。

【Unity】UIテキストの文字間(カーニング)事情まとめ_3

バッチリ文字間の変更できますね。

オオバ
オオバ
さすが歴戦のアセットです

【Unity】UIテキストの文字間(カーニング)事情まとめ_4

NGUIの場合は UILabel コンポーネントを使います。
昔はほんとうによく使いました。

TextMeshProでもろもろ解決

現在までの歴史を解説しましたが、今の話をしましょう。
TextMeshProを使うともろもろ解決します。

新規で作り始めるプロジェクトであれば、TextMeshPro一択。
uGUIテキスト、NGUIも使わなくて良いかなと思っています。

文字間の変更

【Unity】UIテキストの文字間(カーニング)事情まとめ_5

行間の変更

【Unity】UIテキストの文字間(カーニング)事情まとめ_6

文字間、行間ともに対応しています。
また TextMeshProの開発元がUnity になり
サポートが手厚くなりました。

TextMeshProの充実度

これらのインスペクタを
それぞれ比較してみましょう。

uGUIのTextNGUIのUILabelTextMeshPro
【Unity】UIテキストの文字間(カーニング)事情まとめ_7
【Unity】UIテキストの文字間(カーニング)事情まとめ_7
【Unity】UIテキストの文字間(カーニング)事情まとめ_7

圧倒的にTextMeshProの設定項目が多く、
機能が充実していますね。

まとめ : uGUIのテキストは捨てて、TextMeshProを使うがベストアンサー

記事の内容を簡単にまとめます。

こんな感じです。

TextMeshProと比べると
uGUIのテキストを使うメリットはなく、
TextMeshProに慣れていくのがよいかと。

TextMeshProには
行間以外にも大きなメリット があります。
それがアウトライン表現です。

以前ツイートした内容ですが、 アウトライン文字の消え方を検証したものです。

若干わかりづらいかも知れませんが、
TextMeshProの方がきれいに消えます。

uGUIテキストはアウトラインが残ってしまうんですよね。

TextMeshProには
他にもたくさん機能があります。

結論としてはuGUIの課題は
技術の進歩で解決していっています。

TextMeshProを使いましょう。

あわせて読みたい記事
【初心者向け】TextMeshProの始め方

フォローすると UIデザイナー力の上がるTwitter やってます!
今日から使えるテクニックを発信中。
ぜひフォローしてみてください!
👉フォローはこちら!

最後まで読んでいただきありがとうございました!
すばらしいUnityライフをお過ごしください。

オススメ記事
検証環境