読者です 読者をやめる 読者になる 読者になる

テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

UnityのuGUIのテキスト表示機能について解説してみる

Unity GUI(uGUI/NGUI/旧UI) 2D

UnityのuGUIでテキスト表示の扱いについて解説します。

目次

Textの機能

TextはuGUIでテキストを表示する機能です。

作成するには、以下の操作を行います。

Hierarchy>Create>UI>Text (もしくはメニューバー>GameObject>UI>Text )

f:id:tsubaki_t1:20141228114302p:plain

あとはTextの内容を差し替えることで画面にテキストを表示出来ます。またFontに自前のフォントを指定してフォントを変更したり、Font Sizeで文字を大きくしたり、Line Spacingで行間の幅を指定する事ができます。

f:id:tsubaki_t1:20141228114504p:plain

f:id:tsubaki_t1:20141228113632p:plain

文字の位置はAlignmentで決定します。テキストの位置を行の頭に合わせるか行末に合わせるか、またテキストの初期座標を範囲の真ん中にするか範囲の上にするか決定します。

f:id:tsubaki_t1:20141228114953p:plain

文字のエフェクト

uGUIは文字やイメージにエフェクトを追加する事ができます。

例えばOutlineコンポーネント追加で文字に

を追加したり、Shadowコンポーネント追加で影を追加したり。

ただしこの辺りはOverDrawで見ると分かる通り「ポリゴンを重ね表示」しています。なので使いすぎるとフィルレート的に悪影響が考えられるので、シェーダー等で書く方が良いケースがあるかもしれません。

f:id:tsubaki_t1:20141228125736p:plain

それと実は文字ですがマスクが使えます。フォントによっては幅が足りない等使いドコロが微妙に難しいですが、色々と面白い表現に使えるかもしれません。

マスクはMaskです。通常の使い方と同じように、Show Mask Graphicのチェックを外すと、文字(画像)が消えマスク内の下の画像が表現されます。

f:id:tsubaki_t1:20141228130651g:plain

またリッチテキストを使用して文字の色やサイズを変化させることが出来ます。


【Unity】uGUIのTextでリッチテキストを使用する - コガネブログ

自動改行と禁則処理

Textは文字がRectTransformの範囲外に行った際に自動的に開業する仕組みがあります。これはモバイルデバイスのようなアスペクト比が異なるデバイスである程度綺麗に改行してもらうために必要な機能です。

使い方は簡単、TextのHorizonal OverflowVertical OverflowWrapに変更するだけです。これで文字が範囲外に行くと自動的に改行されるようになります。

f:id:tsubaki_t1:20141228115600p:plain

このWrap処理ですが、禁則処理には対応していません。つまり、「文末の、や。」等の表現が来た場合も気にせず改行してしまいます。

f:id:tsubaki_t1:20141228121000p:plain

しかしなんと禁則処理をuGUIでサポートする機能を作ってくれた人がおりました。追い出しベースの禁則処理を行ってくれます。

 で、これをフォークして、毎フレーム処理が実行されないようにしたり、String生成を減らしてGC負荷を下げたり、あと幾つかのバグを直してリッチテキスト対応したのがコレ。


tsubaki/HyphenationJpn_uGUI · GitHub

使い方は単純で、TextコンポーネントがアタッチされているオブジェクトにHyphenationJpn.csをアタッチして、表示したいテキストをTextに書くだけです。

f:id:tsubaki_t1:20141228124943p:plain

下のような感じで動作します。リッチテキストでも動作するようにしました。でもsizeだけは勘弁な

f:id:tsubaki_t1:20141228121023p:plain

f:id:tsubaki_t1:20141228124718g:plain

実は自分も追い込みベースの禁則処理を作ってたんですが、コッチのほうが良いですね…

フォントサイズと描画範囲

文字のサイズや文字の量がRectTransformを超えてしまっている場合、範囲外の部分が表示されないといった事があります。

これは「OverflowWrapかつTruncate」指定している場合、改行後に下の行が表現出来ず表示出来ないといったケースです。

f:id:tsubaki_t1:20141228133956p:plain

こういった場合はBestFitを使用する案があります。BestFitを使用するとMin SizeからMax Sizeの間で一番RectTransformのサイズにフィットする大きさのフォントを自動的に使用します。稀にテキストがレイアウト内に収まらない場合、これを指定しておくとレイアウト内に収めることが出来ます。

下の画像はフォントが10〜20の間で変動します。

f:id:tsubaki_t1:20141228131048p:plain

f:id:tsubaki_t1:20141228133411g:plain

またフォントサイズを減らす他に、ContentSizeFItterRectTransformをテキストのサイズにあわせて広げてしまう方法もあります。

TextContentSizeFItterを追加し、HorizonalFitVerticalFitPreferred sizeを指定すると、フォントのサイズに合わせてRectTransformが変化します(ついでにサイズが更新できなくなります)ContentSizeFItterはかなり挙動に癖があるので、今度個別に紹介します。

f:id:tsubaki_t1:20141228133818p:plain

フォントがぼやける問題(uGUIの場合)

どうもフォントの解像度はDPIかピクセル数に依存するらしく、小さいGameViewで作業をすると文字がボヤけ、大きいGameViewで作業するとハッキリと出るみたいです。

つまり、端末の解像度に依存で文字のクォリティを決定してるっぽいです。低解像度の端末だと小さいフォント、高解像度端末だと大きいフォントを使用しています。

上がGameViewを超小さくした画像、下がGameViewをフルスクリーンにした画像です。

f:id:tsubaki_t1:20141228132203p:plain

f:id:tsubaki_t1:20141228132219p:plain

tsubakit1.hateblo.jp