<h1 id="%E8%83%8C%E6%99%AF" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E8%83%8C%E6%99%AF" aria-hidden="true"></a> 背景</h1>
<ul data-line="1" class="code-line">
<li data-line="1" class="code-line">LayoutGroup あたりの解説記事書こう → なんか仕組み解説よりかフキダシ作成の手順解説記事になったけどまあいっか</li>
<li data-line="2" class="code-line">Canvas, TextMeshPro の解説はありません(追加してほしい事柄があればコメントにどうぞ)</li>
</ul>
<h1 id="%E5%AE%8C%E6%88%90%E5%BD%A2" data-line="4" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%8C%E6%88%90%E5%BD%A2" aria-hidden="true"></a> 完成形</h1>
<p data-line="5" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/b6711a0da105-20250930.gif" class="md-img" loading="lazy"></p>
<ul data-line="6" class="code-line">
<li data-line="6" class="code-line">こんなフキダシを作りながら、各コンポーネントの使い方を覚えていきましょ～</li>
</ul>
<h1 id="%E6%BA%96%E5%82%99%2C-%E8%A8%AD%E8%A8%88" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E6%BA%96%E5%82%99%2C-%E8%A8%AD%E8%A8%88" aria-hidden="true"></a> 準備, 設計</h1>
<p data-line="9" class="code-line">↓使用するフキダシ スプライトはこちら↓<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b5c0c136ec06d" src="https://embed.zenn.studio/card#zenn-embedded__b5c0c136ec06d" data-content="https%3A%2F%2Ffukidesign.com%2Fe1695%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://fukidesign.com/e1695/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://fukidesign.com/e1695/</a></p>
<p data-line="12" class="code-line"><strong>フキダシUI のオブジェクト構成</strong></p>
<div class="code-block-container"><pre><code class="code-line" data-line="13">Canvas
└─ WordBubble
   └─ Text
</code></pre></div><p data-line="19" class="code-line"><strong>WordBubble オブジェクトの担当</strong></p>
<ul data-line="20" class="code-line">
<li data-line="20" class="code-line">スプライト表示(Image)</li>
<li data-line="21" class="code-line">子オブジェクト自動整列(HorizontalLayoutGroup)</li>
<li data-line="22" class="code-line">子オブジェクトの大きさに応じた、スプライト自動リサイズ(ContentSizeFitter)</li>
</ul>
<p data-line="24" class="code-line"><strong>Text オブジェクトの担当</strong></p>
<ul data-line="25" class="code-line">
<li data-line="25" class="code-line">テキスト表示(TextMeshProUGUI)</li>
<li data-line="26" class="code-line">テキスト最大幅の指定(LayoutElement)</li>
</ul>
<h1 id="%E4%BD%9C%E6%88%90" data-line="28" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 作成</h1>
<h3 id="%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A" data-line="29" class="code-line">
<a class="header-anchor-link" href="#%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 初期設定</h3>
<div class="code-block-container"><pre><code class="code-line" data-line="30">Canvas[コンポーネント略(初期設定)]
└─ WordBubble[Image, HorizontalLayoutGroup, ContentSizeFitter]
   └─ Text[TextMeshProUGUI, LayoutElement]
</code></pre></div><ul data-line="35" class="code-line">
<li data-line="35" class="code-line">とりあえず上記の通りにオブジェクト, コンポーネントを組み立てる</li>
</ul>
<p data-line="37" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/8f752f8d4a9e-20251010.png" class="md-img" loading="lazy"><br>
<em>WordBubble の Width, Height はスプライトのサイズ値と同じものを入力しています</em></p>
<h3 id="wordbubble-%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="40" class="code-line">
<a class="header-anchor-link" href="#wordbubble-%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> WordBubble の設定</h3>
<p data-line="41" class="code-line"><strong>Text オブジェクト自動整列</strong></p>
<ol data-line="42" class="code-line">
<li data-line="42" class="code-line">
<p data-line="42" class="code-line">HorizontalLayoutGroup の Padding を以下の設定にする<br>
<img src="https://storage.googleapis.com/zenn-user-upload/1248b5061a89-20251010.png" class="md-img" loading="lazy"></p>
</li>
<li data-line="45" class="code-line">
<p data-line="45" class="code-line">このとき、子要素群が基準(Child Alignment)から設定値だけ離れて配置される<br>
<img src="https://storage.googleapis.com/zenn-user-upload/8917b8402c83-20251010.png" class="md-img" loading="lazy"><br>
<em>イメージ</em></p>
</li>
</ol>
<details><summary>子要素 "群" ？</summary><div class="details-content">
<ul data-line="50" class="code-line">
<li data-line="50" class="code-line">HorizontalLayoutGroup は元々<strong>複数</strong>の子オブジェクトを横に整列するためのコンポーネント</li>
<li data-line="51" class="code-line">例えば アイコン, テキスト, ボタンなどを並べる場面で有効</li>
</ul>
<div class="code-block-container"><pre><code class="code-line" data-line="52">WordBubble
 ├─ Icon(Image)
 ├─ Text(TextMeshProUGUI)
 └─ Button(Image)
</code></pre></div>
<ul data-line="58" class="code-line">
<li data-line="58" class="code-line">このとき LayoutGroup は各子の RectTransformを取得し Padding, Spacing の値を加えて全体のレイアウトを自動計算する</li>
<li data-line="59" class="code-line">今回は少し応用として「子のサイズを基準に親の余白を管理する機構」に用いている</li>
</ul>
</div></details>
<p data-line="61" class="code-line"><strong>Text オブジェクトの大きさに応じた、スプライトの自動リサイズ</strong></p>
<ol data-line="62" class="code-line">
<li data-line="62" class="code-line">
<p data-line="62" class="code-line">ContentSizeFitter を以下の設定にする</p>
</li>
<li data-line="63" class="code-line">
<p data-line="63" class="code-line">HorizontalLayoutGroup の Control Child Size を有効にする<br>
<img src="https://storage.googleapis.com/zenn-user-upload/c7d2a1a8b5f7-20251010.png" class="md-img" loading="lazy"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/d8bd44355d86-20251010.png" class="md-img" loading="lazy"></p>
</li>
<li data-line="67" class="code-line">
<p data-line="67" class="code-line">このとき、テキストに応じてスプライトが伸びるようになる(ただし、横だけ)<br>
<img src="https://storage.googleapis.com/zenn-user-upload/b725cd0a45c9-20251010.gif" class="md-img" loading="lazy"></p>
</li>
</ol>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="71" class="code-line">Padding を設定していないと以下のように…<br>
(「Text オブジェクトとスプライト間に最低限確保する隙間」の設定がないため)<br>
<img src="https://storage.googleapis.com/zenn-user-upload/7dc62a33294d-20251010.gif" class="md-img" loading="lazy"></p>
</div></aside>
<hr data-line="76" class="code-line">
<h3 id="text-%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="78" class="code-line">
<a class="header-anchor-link" href="#text-%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Text の設定</h3>
<p data-line="79" class="code-line"><strong>テキスト最大幅の指定</strong></p>
<ul data-line="80" class="code-line">
<li data-line="80" class="code-line">LayoutElement を以下の設定にする<br>
<img src="https://storage.googleapis.com/zenn-user-upload/6fba772b8c46-20251013.png" class="md-img" loading="lazy"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/0d82e5a77bc9-20251013.png" class="md-img" loading="lazy"><br>
<em>テキスト幅に応じてスプライト縦幅が変更される</em>
</li>
</ul>
<h1 id="%E3%83%95%E3%82%AD%E3%83%80%E3%82%B7%E5%AE%8C%E6%88%90%EF%BC%9F" data-line="85" class="code-line">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%AD%E3%83%80%E3%82%B7%E5%AE%8C%E6%88%90%EF%BC%9F" aria-hidden="true"></a> フキダシ完成？</h1>
<p data-line="86" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/9d8e1f2584c7-20251013.gif" class="md-img" loading="lazy"><br>
<em>🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔</em></p>
<h3 id="%E4%BF%AE%E6%AD%A3---%E3%82%B9%E3%83%97%E3%83%A9%E3%82%A4%E3%83%88%E3%81%8C%E7%84%A1%E7%90%86%E7%9F%A2%E7%90%86%E4%BC%B8%E3%81%B0%E3%81%95%E3%82%8C%E3%81%9F%E3%82%88%E3%81%86%E3%81%AA%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%AB%E3%81%AA%E3%82%8B" data-line="89" class="code-line">
<a class="header-anchor-link" href="#%E4%BF%AE%E6%AD%A3---%E3%82%B9%E3%83%97%E3%83%A9%E3%82%A4%E3%83%88%E3%81%8C%E7%84%A1%E7%90%86%E7%9F%A2%E7%90%86%E4%BC%B8%E3%81%B0%E3%81%95%E3%82%8C%E3%81%9F%E3%82%88%E3%81%86%E3%81%AA%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%AB%E3%81%AA%E3%82%8B" aria-hidden="true"></a> 修正 - スプライトが無理矢理伸ばされたような見た目になる</h3>
<ul data-line="90" class="code-line">
<li data-line="90" class="code-line">Inspector(スプライトファイル) → Open Sprite Editor をクリック</li>
<li data-line="91" class="code-line">SpriteEditor で Border 設定<br>
<img src="https://storage.googleapis.com/zenn-user-upload/1ac07f72fbf6-20251013.png" class="md-img" loading="lazy"><br>
<em>フキダシのしっぽ辺りが伸びないようにしよう</em>
</li>
</ul>
<h3 id="%E4%BF%AE%E6%AD%A3---%E6%AE%B5%E3%80%85%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%8C%E3%81%AF%E3%81%BF%E5%87%BA%E3%82%8B" data-line="95" class="code-line">
<a class="header-anchor-link" href="#%E4%BF%AE%E6%AD%A3---%E6%AE%B5%E3%80%85%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%8C%E3%81%AF%E3%81%BF%E5%87%BA%E3%82%8B" aria-hidden="true"></a> 修正 - 段々テキストがはみ出る</h3>
<ul data-line="96" class="code-line">
<li data-line="96" class="code-line">HorizontalLayoutGroup の Padding の Bottom を調整</li>
</ul>
<h1 id="%E3%83%95%E3%82%AD%E3%83%80%E3%82%B7%E5%AE%8C%E6%88%90" data-line="98" class="code-line">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%AD%E3%83%80%E3%82%B7%E5%AE%8C%E6%88%90" aria-hidden="true"></a> フキダシ完成</h1>
<p data-line="99" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/3ea6b6a467b0-20250930.gif" class="md-img" loading="lazy"><br>
<em>完成～めでたしめでたし</em></p>
<h1 id="%E5%87%BA%E5%85%B8" data-line="103" class="code-line">
<a class="header-anchor-link" href="#%E5%87%BA%E5%85%B8" aria-hidden="true"></a> 出典</h1>
<ul data-line="104" class="code-line">
<li data-line="104" class="code-line">TOPECON HEROES さんのサイト
<ul data-line="105" class="code-line">
<li data-line="105" class="code-line">アイコン, ピクトグラムなど幅広いフリー素材が大量に公開されているスゴイサイト</li>
</ul>
</li>
</ul>
<p data-line="107" class="code-line"><strong>本記事で使わせていただいた素材</strong></p>
<ul data-line="108" class="code-line">
<li data-line="108" class="code-line"><a href="https://fukidesign.com/e1695/" target="_blank" rel="nofollow noopener noreferrer">TOPECON HEROES - フキダシデザイン - 手書き風プチ3dワイド角丸長方形フキダシ1</a></li>
<li data-line="109" class="code-line"><a href="https://bg-patterns.com/?p=2415" target="_blank" rel="nofollow noopener noreferrer">TOPECON HEROES - Bg-patterns - 追加パターン素材607</a></li>
</ul>
<h1 id="%E5%8F%82%E8%80%83" data-line="111" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<ul data-line="112" class="code-line">
<li data-line="112" class="code-line"><a href="https://docs.unity3d.com/ja/2023.2/Manual/script-HorizontalLayoutGroup.html" target="_blank" rel="nofollow noopener noreferrer">Unity - Horizontal Layout Group</a></li>
<li data-line="113" class="code-line"><a href="https://docs.unity3d.com/ja/2023.2/Manual/script-ContentSizeFitter.html" target="_blank" rel="nofollow noopener noreferrer">Unity - Content Size Fitter</a></li>
<li data-line="114" class="code-line"><a href="https://docs.unity3d.com/ja/2023.2/Manual/script-LayoutElement.html" target="_blank" rel="nofollow noopener noreferrer">Unity - Layout Element</a></li>
</ul>


フリーテーマ

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

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

Discussion