【Unity徹底解説】Text【使い方・インスペクター編】

<Textとは>

フォントデータを画面に描画するためのコンポーネントです。

text view

<このコンポーネントを使用する際の注意>

文字の大きさに注意を払って下さい。Font Sizeという項目があるのでここだけで文字の大きさをでかくしてしまいがちですが、Scaleで大きくすることもできます。じゃぁ何が違うのかというのを解説していきます。

まず、↓の絵はScaleだけでFontSize10の文字の大きさを30倍にした状態です。

font scale big

ガビガビですね

↓はFontSizeを300にした状態です。

font size big

綺麗にくっきり映っています。

あれ?ScaleじゃなくてFontSizeデカくした方がいいじゃんって話になりそうですが、ちょっと待って下さい。何故、Scaleはガビガビで、FontSizeは綺麗に映るのか。それは、大きい画像をメモリにロードしているからです。フォントというのは何か特別な機能を使って文字を表示しているように見えますが、実は画像を出しているのです。

例えば、「こんにちはハローHello」という文章をTextに打ったとします。

font texture

するとこういう感じのテクスチャが作成されます。なんやねんこれって思うかもしれませんが、よーく見てみると「こんにちはハローHello」の一文字一文字が存在することがわかります。(lは同じ文字なので1個)これは何かっていうと、ゲーム中に使っている文字からテクスチャを作成して、なるべく小さいテクスチャサイズになるように頑張って詰め込んでくれているわけです。

このように文字を作成した時テクスチャが作成されるので、Scaleでデカくした場合はちっちゃいテクスチャを引き延ばしているのでガビガビになります。FontSizeはそもそものテクスチャの大きさをデカくするのでメモリに大きいテクスチャをロードしなければならないです。

ではメモリ食いたくないからってガビガビのテクスチャを使うのもまたちょっと違う気がします。ではどうすればいいかというと、ScaleとFontSize両方を駆使して大きさを調節して下さい

正直FontSize300の↑の例のようにはっきりくっきり見える必要ってそんなにないことがほとんどだと思うのでとりあえず、FontSizeで大きさを決定したら、今度はFontSizeを下げつつScaleで調整して下さい。

↓FontSizeを60,Scaleを5にしてみました。↑のようにハッキリくっきりとは見えませんが、ゲーム中この違いに気づく人が一体何人いるのか程度の違いです。FontSizeが5分の1になっているので容量的に軽くなります。

scale and font size

まぁ、文字一種類なら大した差は生まれないのですが、何種類も文字が存在した場合チリも積もればなんとやらになるので注意が必要です。何文字ではなく何種類です。最悪の場合ゲームがメモリ不足で落ちる要因の一つになったりするのでFontSizeは妥協できるラインまで下げましょう。

また、同じ種類の文字であってもFontSizeが違うと違う画像が生成されます。FontSize300の「あ」とFontSize30の「あ」が存在するとデカい「あ」と小さい「あ」の2つがメモリを食う事になるので、極力ゲーム中のFontSizeを統一するようにしましょう

と言っても一個デカい文字を使いたいからって全部デカくしてしまうとデカいやつの種類が増えてしまうので、ゲームによって調整が必要です。極力似通った大きさのフォントはFontSizeを同じにしてScaleで大きさを調節するといいと思います。

↓FontSize300とFontSize30の「あ」をゲーム中で使った場合に生成されるテクスチャ

font texture different size

ちなみに、ゲーム中と表現したのは、結構このフォントいうやつは結構キャッシュされるみたいで、シーンを切り替えてもメモリ上に残っている時があります。なのでシーン毎にサイズを決めるのではなく本当にゲーム全体でサイズを決めた方がいいです。

<インスペクター>

text inspector

Text

表示させる文

Font

文字のフォントデータを何にするか

FontStyle

・Normal・・・通常のフォント
・Bold・・・太字
・Italic・・・斜体
・Bold and Italic・・・太字かつ斜体

FontSize

文字の大きさ(上記の注意をよく呼んでください)

LineSpacing

行間の幅。何故か文字間の幅の設定はできない

RichText

リッチテキストという文体の定義を使用するかしないか

Alignment

左から「左揃え」「中央揃え」「右揃え」「上揃え」「中央揃え」「下揃え」

Align By Geometry

ジオメトリで整列するかどうか。詳しくは↓で

Horizontal Overflow

・Wrap・・・横方向にTextの幅(RectTransformのWidth)を超えた時改行する。
  >Overflow・・・横方向にTextの幅を超えてもそのまま横に表示します

・Vertical Overflow
  >Truncate・・・縦方向にTextの高さを超えた時、越えた分の文書を表示しません。
  >Overflow・・・縦方向にTextの高さを超えてもそのまま縦に表示します。

Best Fit

文字の大きさをRectTransformのWidthとHeightに合わせるかどうか。一見便利なように見えますが、これはScaleで文字のサイズを変えるのではなく、FontSizeを変えて文字の大きさを変えています。↑の注意点をよく読んで使用するのかどうか決めましょう。利便性をとるのかメモリをとるのかです。

Min Size

Best Fitにチェックが入っていると出てきます。Best Fitで変更される最小のFontSizeです。

Max Size

Best Fitにチェックが入っていると出てきます。Best Fitで変更される最大のFontSizeです。

Color

文字色を決めることができます。

Material

文字にマテリアルを持たせることができます。何も入れていないとUnityのデフォルトのものが入ります。

RaycastTarget

衝突判定を持つかどうかを決められます。例えばチェックが入っているときボタンの上にこのテキストが乗っていると、ボタンの判定の前にこのテキストにぶつかるのでボタンは反応しません。        




<Align By Geometryについて>

実は文字というのは三角形のポリゴンを2枚使って表現されています。

align by geometry

ちょっとTextを改変してみました。↑の図は各種頂点の色と座標をちょっと変えてあります。

わかりやすくすると↓のような感じです。

Split polygons

三角形2つの中に「あ」の半分ずつが描画されているのがわかります。

公式のリファレンスでは

グリフジオメトリを使用して、グリフ配置よりむしろ水平配置を行います。

と言っています。グリフジオメトリというのはこの2つの三角形の事なので文字のフォントの大きさによる整列ではなく、三角形の頂点を使用して文字を整列する形になります。

まぁ、よっぽど変な形のフォントを使用しない限りはあんまり使わない機能です。

ちなみに↑の例はグリフジオメトリがなんなのかを表したかっただけでなので、配置終了後の頂点の位置を動かしています。このAlign By Geometryは配置前のグリフジオメトリを参照するようなので、↑の用にテキストをいじって形を変えるのではなく元々のフォントが変な形でないとあんまり使える機能ではないかもです。


Textのスクリプトについての解説は↓の記事で行なっています。

<わからない事、質問等があれば>

このサイトの説明ではよくわからなかったとか、もっと知りたい事などがあれば

自分の Youtubeの動画にコメントで質問していただければ動画でお答えしようと思います。

文章同士のやり取りだと伝わりづらいし、ラリーに時間がかかりそうなので動画で回答します。

↓の動画が回答の一例になります。どの動画でもいいのでご遠慮なくコメントしてください

できたらチャンネル登録よろしくお願いします!



タイトルとURLをコピーしました