【Tech Blog】Unity Tips のご紹介

2022年8月4日 16:59

セガエックスディーでは、Unityを使用したサービス開発も行なっております。

最近、Unityで理解が難しいと噂の自動レイアウトを使用し、UIの実装を行う機会がありました。その際、改めてUnityの自動レイアウトについて調査し、理解を深めることができましたので、今回は、その自動レイアウトの調査内容と自動レイアウトTipsの紹介をさせていただきます。

■ 自動レイアウトとは？

自動レイアウトに関して、Unity 公式のドキュメントには以下のように書かれています。

自動レイアウトシステムは、水平グループ、垂直グループ、もしくはグリッドグループといった、入れ子のレイアウトグループに要素を配置する方法を提供します。中身のコンテンツに応じて、要素の大きさを自動的に変更することも可能にします。

https://docs.unity3d.com/ja/current/Manual/comp-UIAutoLayout.html

Unity Documentation Version 2021.3

ややこしい気もしますが、上記のうち「中身のコンテンツに応じて、要素の大きさを自動的に変更することも可能にします。」という部分を頭に入れておき、「柔軟なレイアウトをある程度自動的に実装することができるもの」と認識しておけば大丈夫かと思います。

■ 自動レイアウトシステムを理解する

自動レイアウトシステムを理解するためには、レイアウト要素とレイアウトコントローラーという概念を知る必要があります。

レイアウト要素

レイアウト要素とは、“Rect TransformやLayoutElement などのコンポーネントがアタッチされたオブジェクト”のことです。
レイアウト要素は自らのオブジェクトのサイズや位置を持っています。
また、レイアウト要素は以下のプロパティも有しています。

　Min Width （最小幅）
　Min Height （最小の高さ）
　Preferred Width （推奨幅）
　Preferred height （推奨の高さ）
　Flexible Width （可変幅）
　Flexible Height （可変の高さ）

レイアウトコントローラー

レイアウトコントローラーとは、“レイアウト要素のサイズや位置を制御するコンポーネント”のことです。
レイアウトコントローラーには、自分自身のレイアウト要素を制御できるものと、子オブジェクトのレイアウト要素を制御できるものの２種類があります。

■自動レイアウトに使用するコンポーネント紹介

自動レイアウトに関するコンポーネントについて解説していきます。

レイアウト要素

LayoutElement

レイアウト要素が保持する定義上書きすることができるコンポーネントです。

- Ignore Layout
　レイアウトコントローラーが自身のレイアウト要素を無視するように設定

- Min （Width / Height）
　最低限の表示サイズ。どんな場合でも Min のサイズより小さくなることはない

- Preferred （Width / Height）
　理想の表示サイズ。レイアウトコントローラーが管理する表示範囲に十分なスペースがあった場合、 Preferred のサイズで表示される

- Flexible （Width / Height）
　付加的なサイズ。0より大きい Flexible を持つ場合、レイアウトコントローラーが管理する表示範囲を全て埋める。この値のみ割合だということに注意

- Layout Priority
　複数レイアウト要素があったときの適用優先順位

レイアウトコントローラー

Content Size Fitter

自身のサイズを、自身のレイアウト要素の Min や Preferred のサイズによって決めることのできるコンポーネントです。

- Horizontal Fit
　レイアウト要素の幅制御

- Vertical Fit
　レイアウト要素の高さ制御

Aspect Ratio Fitter

自身のサイズを、自身のレイアウト要素のアスペクト比に基づいて決めることのできるコンポーネントです。
このコンポーネントは、Min や Preferred プロパティを考慮しないことに気をつけてください。

- Aspect Mode
　どのようにアスペクト比を維持したままサイズ変更するかを指定

以下は、子オブジェクトのレイアウト要素を制御するレイアウトコントローラーです。

Horizontal Layout Group

子のレイアウト要素を横並びに配置するコンポーネントです。

- Padding
　レイアウトグループの端のパディング

- Spacing
　レイアウト要素とレイアウト要素の間のスペース

- Child Alignment
　レイアウトコントローラーが管理する表示範囲がすべて埋まっていない場合、どのように子要素を整列させるかを指定

- Reverse Arrangement
　子オブジェクトのレイアウト要素の並びを反転

- Control Child Size
　レイアウトグループが子オブジェクトのレイアウト要素(WidhtとHeight)を制御するかどうかを指定

- Use Child Scale
　子オブジェクトの位置を求める際に子オブジェクトのスケールを考慮するかどうかを指定

- Child Force Expand
　レイアウトコントローラーが管理する表示範囲を全て埋めるため、子オブジェクトのレイアウト要素を強制的に拡大するかどうかを指定

Vertical Layout Group

子のレイアウト要素を縦並びに配置するコンポーネントです。

各項目の意味は Horizontal Layout Group と同じです。

Grid Layout Group

子のレイアウト要素をグリッド状に配置するコンポーネントです。

- Padding
　レイアウトグループの端のパディング

- Cell Size
　グループ内の角レイアウト要素のサイズ指定

- Spacing
　レイアウト要素とレイアウト要素の間のスペース

- Start Corner
　４つ角のうち、最初の要素が配置される場所

- Start Axis
　要素をどの軸にそって配置させていくかを指定

- Child Alignment
　レイアウトコントローラーが管理する表示範囲がすべて埋まっていない場合、どのように子要素を整列させるかを指定

- Constraint
　グリッドを一定の行数または列数までに制限

■ 自動レイアウト Tips 紹介

それでは、自動レイアウトを使用した UI レイアウトの例をいくつか紹介していきます。

テキストに合わせて背景画像のサイズが変更する Tips

以下のように、テキストに合わせて Image 画像のサイズが変化するUIを実装していきます。

まず、テキストのレイアウト要素をテキスト文字数によって自動的に変化させることができるようにします。
Text コンポーネントがアタッチされているオブジェクトに、Content Size Fitter をアタッチし、Horizontal Fit と Vertical Fit パラメータの値を変更してください。