コードレスuGUIテクニック① 〜動的なテキストフレーム〜

概要

下のGIF動画のように、テキストの内容に応じて後ろのフレームを動的に変動させることを、コードを書かずにuGUIだけで実現させます。

動的なテキストフレーム

実装時間

30秒くらい

実装

① Canvas下にImageコンポーネントを付与したゲームオブジェクトを用意し、その子にテキストを用意します。

 - Canvas
    - Image
        - Text 

図で表すと下図のようになります（※ImageはFrameに名前を変えています）

② 次に、Image（上図だとFrame)に以下のコンポーネントをアタッチします：

• Horizontal Layout Group
• Content Size Fitter

Horizontal Layout Group は Vertical Layout Group や Grid Layout Group でもOKです。

③ Horizontal Layout Group で以下の設定を行います：

• Child Alignment を Middle Center にしてテキストを中央の中心位置に表示します
• Child Controls Size の Width にチェックを入れます。これで子の Layout を元に子の RectTransform の Width が変更されます
  • 今回は横だけなので Width だけでしたが、もし縦を変えたい場合は Height にチェックを入れましょう。

④ Content Size Fitter の Horizontal Fit を Preferred Size にして、このフレームオブジェクトのサイズも動的に変動するようにします。
図だとこんな感じです↓

以上①〜④の作業でテキスト量に応じてテキストのサイズが変わり、さらにその変更を見てフレーム枠のサイズも変更されるようになります。
テキストとフレームの間のスペースの調整などの細かいレイアウト調整は Horizontal Layout Group のPadding から設定できます。

次回はこれを応用させたものを作ります。