LoginSignup
3
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-02-07

最終的なイメージ

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

・自動でサイズを変更したいのでImage(背景)の子にTextは配置しましょう。
BG
-Text
-ButtonRoot(ここには「はい」「いいえ」のボタンを子にしています)
Unity_xyfOV5J00j.png

・BGのコンポーネント
Unity_sVLZvcHB54.png

Vertical Layout Group
Control Child Size:Height
Use Child Scale:Height
にチェックを入れます
Child Alighment:Upper Center(こちらはどのように配置したいかで変更します)

Content Size Fitter
Vertical Fit:Preferred Size

※やってしまいがちなのはTextにContent Size Fitterをつけて警告が出るようなことがあるかと思います
(私は警告を無視してこの方法でやっていました。 いい感じになっていたので
おそらくオブジェクトのオンオフのタイミングなどでレイアウトの再計算がされ問題なかったのかなと思っています。

やはり警告はあるケースではおかしなレイアウトになるのでしっかりした方法でレイアウトを設定しましょう。

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

ここまで調べればレイアウトの設定は同じような記事が出てくると思います。
(私もContent Size Fitterの警告を取りたくて調べていると見つけました。)
よしできたと思っても実際に正式な画像でやってみるとうまくレイアウトされないことがあります。
BGに画像(DialogBG.png)500*500のpngを作ってアタッチしたところ。

(ある程度分かりやすく画像の上下に赤と青をつけています)
何か違う、一行の場合はもっと小さくなってほしい・・・

そうか先ほどの
Content Size Fitter
Vertical Fit:Preferred Size
Vertical Fit:Min Sizeにするのか!

image.png
違う
Vertical Layout GroupのPaddingを調整すればうまくいく!
実際には最終的なレイアウトの位置調整でいじるパラメーターだと思うのでButtom:-140などすると可変の際におかしくなっていきます。

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

結論

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

画像について

追加したDialogBG.pngでは何もスライスされていません。(デフォルトインポートだと)
image.png
こちらを9スライスにしましょう。

LRTB全て60にしています、これは画像によって変わるので自分の画像を見て調整してください。

よし反映
image.png
忘れていました、ImageTypeをSlicedにしましょう。

完成

おわりに

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

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

image.png
ちょっとわかりにくいですがTextのオブジェクトを非表示にしても120からは小さくなりません。

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

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

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2