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

概要

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

f:id:Goropocha:20200326001232g:plain
動的なテキストフレーム

実装時間

30秒くらい

実装

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

 - Canvas
    - Image
        - Text 

図で表すと下図のようになります(※ImageはFrameに名前を変えています)
f:id:Goropocha:20200326001346p:plain

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

Horizontal Layout Group は Vertical Layout GroupGrid Layout Group でもOKです。

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

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

④ Content Size Fitter の Horizontal FitPreferred Size にして、このフレームオブジェクトのサイズも動的に変動するようにします。
図だとこんな感じです↓
f:id:Goropocha:20200326001355p:plain

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

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