【Unity】テキスト長さによって大きさが可変するダイアログのためのインスペクター、画像設定

## 最終的なイメージ

<img width="500"src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175167/622c3d6b-adba-ac74-32f2-197e59fd0ff5.gif>

# レイアウト設定(縦を可変)

・自動でサイズを変更したいのでImage(背景)の子にTextは配置しましょう。
BG
-Text
-ButtonRoot(ここには「はい」「いいえ」のボタンを子にしています)
![Unity_xyfOV5J00j.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175167/441b673b-90c7-63f4-e3a5-82b629ce3d8a.png)

・BGのコンポーネント
![Unity_sVLZvcHB54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175167/5427cfb0-6919-e468-a9a4-5234ef460190.png)

<b>Vertical Layout Group</b>
Control Child Size：Height
Use Child Scale：Height
にチェックを入れます
Child Alighment：Upper Center（こちらはどのように配置したいかで変更します）

<b>Content Size Fitter</b>
Vertical Fit：Preferred Size


※やってしまいがちなのはTextにContent Size Fitterをつけて警告が出るようなことがあるかと思います
（私は警告を無視してこの方法でやっていました。 ~~いい感じになっていたので~~ ）
おそらくオブジェクトのオンオフのタイミングなどでレイアウトの再計算がされ問題なかったのかなと思っています。
<img width="500"src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175167/8a4d43ef-fd99-c85b-5c4c-de0b57367c47.png>
やはり警告はあるケースではおかしなレイアウトになるのでしっかりした方法でレイアウトを設定しましょう。

## 画像に差し替えてみると・・・

ここまで調べればレイアウトの設定は同じような記事が出てくると思います。
（私もContent Size Fitterの警告を取りたくて調べていると見つけました。）
よしできたと思っても実際に正式な画像でやってみるとうまくレイアウトされないことがあります。
BGに画像(DialogBG.png)500*500のpngを作ってアタッチしたところ。
<img width="500"src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175167/2855ad20-b0fa-323a-ce30-7710420a98fd.gif>
（ある程度分かりやすく画像の上下に赤と青をつけています）
<b>何か違う、一行の場合はもっと小さくなってほしい・・・</b>

そうか先ほどの
<b>Content Size Fitter</b>
Vertical Fit：Preferred Size
Vertical Fit：Min Sizeにするのか！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175167/2a196232-9520-5bef-d0cd-f35ab702d723.png)
違う
<b>Vertical Layout Group</b>のPaddingを調整すればうまくいく！
実際には最終的なレイアウトの位置調整でいじるパラメーターだと思うのでButtom：-140などすると可変の際におかしくなっていきます。

やっぱりTextに<b>Content Size Fitter</b>がいるのでは！？
調べると<b>Vertical Layout Group</b>をつけるなどの記事を見かける。
先ほどの警告が出て堂々巡りになります。

# 結論

背景用の画像の設定を9スライス用にします。</b>
（実際縦のみの可変の場合は上下スライスでいいですが大抵横も調整したいことが多いので9スライスにしておくといいと思います。）

# 画像について

追加したDialogBG.pngでは何もスライスされていません。(デフォルトインポートだと)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175167/7aa37e1d-dc86-d77d-d94e-0544a2ab1c0c.png)
こちらを9スライスにしましょう。
<img width="500"src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175167/cac3eb2d-ed2d-46b9-dc57-a9b03de417ad.png>
LRTB全て60にしています、これは画像によって変わるので自分の画像を見て調整してください。

よし反映
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175167/b9a27628-6b5e-557c-c613-2dff9acb6b1a.png)
忘れていました、ImageTypeをSlicedにしましょう。

# 完成
<img width="500"src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175167/ec0104a5-bed6-0a2f-ab5e-8759fa868d3c.gif>

# おわりに
Unityのデフォルトだと9スライスになっていたり、Imageに何も貼り付けていないと内部の画像(9スライス)ができているものを使っているのか、うまくいきましたがいざ実装レベルでの設定ミスの話題がなかったので今回自分のメモとして残しました。

自分なりの解釈では9スライス設定にしてもそれでも足りない場合があります。
これは
<b>Content Size Fitter</b>
Vertical Fit：Preferred Size
がスライスした引き延ばされない範囲が最小値となるからです。
デフォルトの場合は今回は500*500の画像なので高さが500以下にはなりませんでした。
今回60にしているのは初めに1行のテキストの場合に背景の高さが120になっていることを確認したので60にしています。
なので最小の120までは縮みます。（実は画像の赤と青の帯も60にして作りました。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175167/07309879-b3c9-1560-1395-36b395c1cbd5.png)
ちょっとわかりにくいですがTextのオブジェクトを非表示にしても120からは小さくなりません。

怖い方はなるべく引き延ばされない範囲を小さくしてスライスの設定を行ってみてください。

この画像の設定を意識していると様々な可変長のレイアウトがうまく実現できると思います。