UnityのuGUIでテキスト表示の扱いについて解説します。
目次
Textの機能
TextはuGUIでテキストを表示する機能です。
作成するには、以下の操作を行います。
Hierarchy>Create>UI>Text (もしくはメニューバー>GameObject>UI>Text )
あとはTextの内容を差し替えることで画面にテキストを表示出来ます。またFontに自前のフォントを指定してフォントを変更したり、Font Sizeで文字を大きくしたり、Line Spacingで行間の幅を指定する事ができます。
文字の位置はAlignmentで決定します。テキストの位置を行の頭に合わせるか行末に合わせるか、またテキストの初期座標を範囲の真ん中にするか範囲の上にするか決定します。
文字のエフェクト
uGUIは文字やイメージにエフェクトを追加する事ができます。
例えばOutlineコンポーネント追加で文字に輪
郭を追加したり、Shadowコンポーネント追加で影を追加したり。
ただしこの辺りはOverDrawで見ると分かる通り「ポリゴンを重ね表示」しています。なので使いすぎるとフィルレート的に悪影響が考えられるので、シェーダー等で書く方が良いケースがあるかもしれません。
それと実は文字ですがマスクが使えます。フォントによっては幅が足りない等使いドコロが微妙に難しいですが、色々と面白い表現に使えるかもしれません。
マスクはMaskです。通常の使い方と同じように、Show Mask Graphicのチェックを外すと、文字(画像)が消えマスク内の下の画像が表現されます。
またリッチテキストを使用して文字の色やサイズを変化させることが出来ます。
【Unity】uGUIのTextでリッチテキストを使用する - コガネブログ
自動改行と禁則処理
Textは文字がRectTransformの範囲外に行った際に自動的に開業する仕組みがあります。これはモバイルデバイスのようなアスペクト比が異なるデバイスである程度綺麗に改行してもらうために必要な機能です。
使い方は簡単、TextのHorizonal OverflowやVertical OverflowをWrapに変更するだけです。これで文字が範囲外に行くと自動的に改行されるようになります。
このWrap処理ですが、禁則処理には対応していません。つまり、「文末の、や。」等の表現が来た場合も気にせず改行してしまいます。
しかしなんと禁則処理をuGUIでサポートする機能を作ってくれた人がおりました。追い出しベースの禁則処理を行ってくれます。
ひとまずさっきのuGUIでの禁則処理をあげた。 https://t.co/tD4Q6TFs6h
— dizgid (@inok) 2014, 12月 27
で、これをフォークして、毎フレーム処理が実行されないようにしたり、String生成を減らしてGC負荷を下げたり、あと幾つかのバグを直してリッチテキスト対応したのがコレ。
tsubaki/HyphenationJpn_uGUI · GitHub
使い方は単純で、TextコンポーネントがアタッチされているオブジェクトにHyphenationJpn.csをアタッチして、表示したいテキストをTextに書くだけです。
下のような感じで動作します。リッチテキストでも動作するようにしました。でもsizeだけは勘弁な
実は自分も追い込みベースの禁則処理を作ってたんですが、コッチのほうが良いですね…
フォントサイズと描画範囲
文字のサイズや文字の量がRectTransformを超えてしまっている場合、範囲外の部分が表示されないといった事があります。
これは「OverflowをWrapかつTruncate」指定している場合、改行後に下の行が表現出来ず表示出来ないといったケースです。
こういった場合はBestFitを使用する案があります。BestFitを使用するとMin SizeからMax Sizeの間で一番RectTransformのサイズにフィットする大きさのフォントを自動的に使用します。稀にテキストがレイアウト内に収まらない場合、これを指定しておくとレイアウト内に収めることが出来ます。
下の画像はフォントが10〜20の間で変動します。
またフォントサイズを減らす他に、ContentSizeFItterでRectTransformをテキストのサイズにあわせて広げてしまう方法もあります。
TextにContentSizeFItterを追加し、HorizonalFitとVerticalFitをPreferred sizeを指定すると、フォントのサイズに合わせてRectTransformが変化します(ついでにサイズが更新できなくなります)。ContentSizeFItterはかなり挙動に癖があるので、今度個別に紹介します。
フォントがぼやける問題(uGUIの場合)
どうもフォントの解像度はDPIかピクセル数に依存するらしく、小さいGameViewで作業をすると文字がボヤけ、大きいGameViewで作業するとハッキリと出るみたいです。
つまり、端末の解像度に依存で文字のクォリティを決定してるっぽいです。低解像度の端末だと小さいフォント、高解像度端末だと大きいフォントを使用しています。
上がGameViewを超小さくした画像、下がGameViewをフルスクリーンにした画像です。