Posted by こんにちは！Unityエンジニアの米倉です。
今回は、Unityで「文字数によってサイズ可変し、指定したサイズを超えたらBestFitにする」といったコンポーネントをコード無しで作る方法を紹介します。
今回作るもの
上記の図では、文字が増えるたびにテキスト幅が可変し、ある程度以上の幅になるとBestFit設定が働き、フォントサイズが小さくなって表示されていることがわかります。
このような挙動は、ゲームでは所持金アイコンやヒントのアイコンと文字を合わせて綺麗に並べたいときなどに便利ですので、ぜひ気になった方は以下に紹介する方法を参考にしてみてください。
よくある例
「文字数によってTextの幅を変えたい」といった場合には、よくContentSizeFitterが選ばれます。
このTextの子要素にImageをぶらさげれば、widthが可変して追従するので、一見問題なさそうに見えます。BestFitもチェックをいれているのでいい感じにやってくれそうです。
しかしながら、これではContentSizeFitterの働きによりwidthが無限に増加し、BsetFitにチェックしていてもBestFit設定が効かないという状態になります。
このままでは、冒頭で述べたようなBestFitを効かせて表示するようなテキストは作れません。
そしてこのあたりで、なんとなくContentSizeFitterだけでは無理そうに見えてきて、「自前でコード書くか…」という考えが浮かびます。（1敗）
ですが、コードを書かずに実現出来る方法があります。
うまくいく方法
方針としては、ContentSizeFitterをやめてHorizontalLayoutGroupに切り替えていきます。（縦でやりたい場合はVertialLayoutGroup）
- Textの親にHorizontalLayoutGroupコンポーネントをアタッチしたGameObjectを置く
※一般的なLayoutGroupの使い方ですが、TextにContentSizeFitterがついている場合は外してください。
- HorizontalLayoutGroupのChild Cotrols Size : Widthにチェックをいれる
これにより、配下のTextが文字数に応じてサイズ可変するようになります。（ContentSizeFitterと同様の動作になります。）
ここまでの挙動は以下のようになります。
あとはBestFit設定を付けるだけです。
- Textコンポーネントの「BestFit」にチェックを入れる
これで完成です！以下のように限界幅になると文字が小さくなります。
これで、「文字数によってサイズ可変し、指定したサイズを超えたらBestFitにする」が実現できたかと思います。
まとめ
今回の例に限らず、綺麗にUIを配置する場合はContentSizeFitterよりLayoutGroupの使うほうがうまくいくことが多いです。（もちろん、ContentSizeFitterが有効な例もあります。）
ゲームにおいてUI表示はとても重要ですが、毎回コードを書くのはつらいですよね。コンポーネントの挙動を正しく理解することで、コードなしでも意外とうまく実現できたりします。
LayoutGroupに関して、以下の記事でも挙動を試しているので気になった方はご覧ください。
この記事が、コードを書かずに綺麗なUIを作るための一助となれば幸いです。
