Unityでちょっと難しいUIを作ってみる

この記事はAdvent Calendar 2018の18日目の記事です。

こんにちは！新規ゲーム開発プロジェクトでUnityエンジニアをしている米倉です。

今回は、UnityのUIを組む上で意外と難しい「文字サイズによって可変するUI」の一例を紹介したいと思います！

今回作るものはこちら

こちらは「文字-間を埋める線-文字」という、2つのTextのサイズに依存するUIです。

左右の文字はそれぞれ、左寄せと右寄せです。

これ、適当なLayout系コンポーネントを組み合わせれば行けそうというところまではすぐ分かるのですが、ハマると時間が溶けてしまう代物です。

今回のUIはスクリプト不要でコンポーネントの組み合わせで実現できます。

実際に配置の様子を見ながら作ってみてください。

「root(白い板)」、「a_text(左のText要素)」、「line(真ん中のImage要素)」、「b_text(右のText要素)」の順に、特にコンポーネントなどをつけずに配置しています。

ここでTextはそれぞれ左寄せ、右寄せに設定しておきます。

一旦付けただけの状態だとめちゃくちゃになります(子が引き伸ばされている)。

ここではHorizontalLayoutGroupの値を調整し、左から並べ、子を引き伸ばさない設定にしておきます。

ここで、以下の設定の正しい理解が必要になります。

今回は、「子の幅は自身のテキスト幅で敷き詰め、線は可能な限り敷き詰めたい」ので、Child Controls Size のXだけONにします。

これで、子のテキストたちはTextコンポーネントの文字列を元にサイズが決まります。

そうすると、HorizontalLayoutGroupとTextのサイズのみの関係で以下のようになります。

線（Image）が見えなくなっていますが、今の段階ではLayout要素が無いため幅が0になって、aとbの間に存在しています。

線にもLayout要素として幅を設定できるよう、Layout Elementコンポーネントをアタッチします。

Layout Elementは以下のような設定値を持っています。

線はHorizontalLayoutGroupの子たちの中で可能な限り最大まで敷き詰めたいので、ここではFlexible Widthを選択し、1を設定します。

すると、以下のようにいい感じに線が伸ばされます。

Flexible Width :1を設定すると、子にいるFlexible要素全ての割合からサイズが求められます。（ここでは、Flexibleが他の子に設定されていないため、どんな値を設定しても最大まで伸びます）

HorizontalLayoutGroupの設定項目に戻り、PaddingやSpacingを設定してあげると完成形となります。

値を設定すると、

きれいに整いました！

これで完成です！

aとbのテキスト内容を変えても、緑の線が間をきれいに埋めてくれるはずです。

ちょっと難しいUI、いかかでしたでしょうか。

正しくLayout系コンポーネントを理解し、無駄なく設定してあげるのは意外と難しいですね。

私自身もこのあたりはよく調べたりするのですが、今回記事にまとめるにあたりしっかり振り返る良い機会となりました。

皆さんのUI開発の参考になれば幸いです。