💬

【Unity】フキダシUIを作ろう、それもテキストに応じて伸びるやつな【ハンズオン, LayoutGroup, LayoutElement】

に公開
Unity
Tech
ゲーム開発
zennfes2025free
tech

背景

  • LayoutGroup あたりの解説記事書こう → なんか仕組み解説よりかフキダシ作成の手順解説記事になったけどまあいっか
  • Canvas, TextMeshPro の解説はありません(追加してほしい事柄があればコメントにどうぞ)

完成形

  • こんなフキダシを作りながら、各コンポーネントの使い方を覚えていきましょ～

準備, 設計

↓使用するフキダシ スプライトはこちら↓
https://fukidesign.com/e1695/

フキダシUI のオブジェクト構成

Canvas
└─ WordBubble
   └─ Text

WordBubble オブジェクトの担当

  • スプライト表示(Image)
  • 子オブジェクト自動整列(HorizontalLayoutGroup)
  • 子オブジェクトの大きさに応じた、スプライト自動リサイズ(ContentSizeFitter)

Text オブジェクトの担当

  • テキスト表示(TextMeshProUGUI)
  • テキスト最大幅の指定(LayoutElement)

作成

初期設定

Canvas[コンポーネント略(初期設定)]
└─ WordBubble[Image, HorizontalLayoutGroup, ContentSizeFitter]
   └─ Text[TextMeshProUGUI, LayoutElement]
  • とりあえず上記の通りにオブジェクト, コンポーネントを組み立てる


WordBubble の Width, Height はスプライトのサイズ値と同じものを入力しています

WordBubble の設定

Text オブジェクト自動整列

  1. HorizontalLayoutGroup の Padding を以下の設定にする

  2. このとき、子要素群が基準(Child Alignment)から設定値だけ離れて配置される

    イメージ

子要素 "群" ？
  • HorizontalLayoutGroup は元々複数の子オブジェクトを横に整列するためのコンポーネント
  • 例えば アイコン, テキスト, ボタンなどを並べる場面で有効
WordBubble
 ├─ Icon(Image)
 ├─ Text(TextMeshProUGUI)
 └─ Button(Image)
  • このとき LayoutGroup は各子の RectTransformを取得し Padding, Spacing の値を加えて全体のレイアウトを自動計算する
  • 今回は少し応用として「子のサイズを基準に親の余白を管理する機構」に用いている

Text オブジェクトの大きさに応じた、スプライトの自動リサイズ

  1. ContentSizeFitter を以下の設定にする

  2. HorizontalLayoutGroup の Control Child Size を有効にする

  3. このとき、テキストに応じてスプライトが伸びるようになる(ただし、横だけ)

Text の設定

テキスト最大幅の指定

  • LayoutElement を以下の設定にする


    テキスト幅に応じてスプライト縦幅が変更される

フキダシ完成？


🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔

修正 - スプライトが無理矢理伸ばされたような見た目になる

  • Inspector(スプライトファイル) → Open Sprite Editor をクリック
  • SpriteEditor で Border 設定

    フキダシのしっぽ辺りが伸びないようにしよう

修正 - 段々テキストがはみ出る

  • HorizontalLayoutGroup の Padding の Bottom を調整

フキダシ完成


完成～めでたしめでたし

出典

  • TOPECON HEROES さんのサイト
    • アイコン, ピクトグラムなど幅広いフリー素材が大量に公開されているスゴイサイト

本記事で使わせていただいた素材

参考

Discussion