■ はじめに
Unityでクイズゲームを制作していると、
問題文が長くなったときにUIから文字がはみ出す問題が出てきました。
TextMeshProのInspectorを見ると、
・Auto Size
・Text Wrapping Mode
・Overflow
などの項目があります。
今回は、それぞれ何を設定しているのかを、
実際にクイズUIを制作しながら調べた内容としてまとめます。
TextMeshProの表示領域はRectTransformで決まる
まず理解しておきたいのが、
RectTransform
→ 文字を表示する領域
TextMeshPro
→ その領域の中で文字をどう表示するか
という関係です。
TextMeshProだけを設定すればいいわけではなく、
RectTransformのWidthやHeightも重要になります。
Text Wrapping Modeとは
Text Wrapping Modeは、文章がTextMeshProの表示領域の横幅に収まらない場合に、文字をどのように折り返すかを設定する項目です。
Normalにすると、文章がRectTransformの横幅を超えそうになると、TextMeshProが自動的に折り返して表示してくれます。
例えば、
questionText.text = “Q. bool canAttack = false; !canAttack の結果として正しいものを選んでください。”;
コード上では改行していません。
しかし、TextMeshProの表示領域が狭ければ、実際の画面では、
Q. bool canAttack =
false; !canAttack の
結果として正しいものを
選んでください。
というように、TextMeshProがRectTransformの横幅に合わせて自動的に折り返します。
そのため、文章の長さに合わせて毎回自分で改行位置を指定する必要はありません。
Overflowとは
Overflowは、文字がRectTransformの表示領域に収まらなかった場合の処理を設定します。
Overflowを選択している場合は、
表示領域を超えても文字がそのまま表示されます。
そのため、
「Wrappingを設定したのにUIから文字がはみ出す」
という場合は、Overflowの設定やRectTransformの高さも確認する必要があります。
Auto Sizeとは
Auto Sizeを有効にすると、
RectTransformに文字が収まるようにフォントサイズを自動調整できます。
ただし、長文になるほど文字が小さくなる可能性があります。
そのため、
「とにかくAuto SizeをONにする」
のではなく、
- RectTransformに十分な表示領域を作る
- Wrappingで文章を折り返す
- 必要ならAuto Sizeを使用する
という順番で考えると分かりやすいです。
今回学んだこと
TextMeshProで長文を扱う場合、
RectTransform
↓
Wrapping
↓
Overflow
↓
必要ならAuto Size
という順番で確認すると、
どこに問題があるのか判断しやすくなりました。
特に、
「RectTransformは表示する範囲」
「TextMeshProはその範囲でどう文字を表示するか」
と分けて考えると理解しやすかったです。
まとめ
Unityで長い文章を表示するときは、
TextMeshProのFont Sizeだけを調整するのではなく、
・RectTransform
・Text Wrapping Mode
・Overflow
・Auto Size
を確認することが重要です。
クイズゲームや会話UIなど、
文章量が変化するUIでは特に注意したい設定です。
コメント