アニメーションの統合
リッチテキスト

自動レイアウト

Rect Transform レイアウトシステムは、多くの異なるタイプのレイアウトを扱うのに十分な柔軟さを持ちます。そして、自由な形式のやり方での要素配置も可能にします。しかし、もう少しだけ構造的なものが必要になることもあります。

自動レイアウトシステムは、Horizontal Group、Vertical Group、Grid Group などのネストされたレイアウトグループにある要素の配置方法を提供します。また、要素を自動的に中身のコンテンツに応じたサイズに変更することも可能にします。たとえば、ボタンは動的にそのテキストコンテンツとパディングに正確に合うようなサイズに変更することができます。

自動レイアウトシステムは、基本の Rect Transform レイアウトシステム上のビルトインシステムです。いくつかを使用するか、すべてを使用するかを選択的に実行できます。

レイアウト要素を理解する

自動レイアウトシステムは レイアウト要素レイアウトコントローラー の概念に基づいたものです。レイアウト要素は Rect Transform や、オプショナルでその他のコンポーネントを有しているゲームオブジェクトです。レイアウト要素は自身のあるべきサイズを正確に把握しています。レイアウト要素はそれ自体のサイズを直接設定することはできませんが、レイアウトコントローラーとして機能するほかのコンポーネントが、使用サイズを計算するためにその情報を使用できます。

レイアウト要素はそれ自体を定義する以下のプロパティーを有しています。

  • Minimum width
  • Minimum height
  • Preferred width
  • Preferred height
  • Flexible width
  • Flexible height

レイアウト要素に提供される情報を使用するレイアウトコントローラーの例は、Content Size Fitter とさまざまな Layout Group コンポーネントです。レイアウトグループの要素のサイズを決める基本原理は以下のとおりです。

  • まず minimum サイズが割り当てられます。
  • 十分に使用可能な領域があれば、Preferred サイズが割り当てられます。
  • まだ利用可能な領域があれば、flexible サイズが割り当てられます。

Rect Transform がアタッチされているゲームオブジェクトは レイアウト要素として動作可能です。それらはデフォルトで minimum、preferred、flexible サイズを 0 で持っています。コンポーネントの中には、ゲームオブジェクトに加えられたときにそれらのレイアウトプロパティーを変更するものもあります。

Image と Text コンポーネントは、レイアウト要素のプロパティーを提供するコンポーネントの 2 例です。それらはスプライトやテキストコンテンツにサイズを合わせるため、preferred width と height を変更します。

Layout Element コンポーネント

minimum、preferred、または flexible のサイズを上書きする場合は、Layout Element コンポーネントをゲームオブジェクトに加えます。

Layout Element コンポーネントは、1 つ以上のレイアウトプロパティーの値を上書きします。上書きしたいプロパティーのチェックボックスを有効にして、上書きしたい値を指定してください。

詳しくは Layout Element ページを参照してください。

レイアウトコントローラーを理解する

レイアウトコントローラーは、 1 つ以上のレイアウト要素 (つまり、 Rect Transform コンポーネントを持つゲームオブジェクト) のサイズと、場合によっては位置を制御するコンポーネントです。レイアウトコントローラーは それ自体のレイアウト要素 (レイアウトコントローラー自体がアタッチされているゲームオブジェクト) か、子のレイアウト要素 を制御します。

レイアウトコントローラーとして機能するコンポーネントは、同時にレイアウト要素としても機能する場合があります。

Content Size Fitter

Content Size Fitter は、それ自体のレイアウト要素のサイズを管理するレイアウトコントローラーとして機能します。自動レイアウトシステムの挙動を見る方法として最もシンプルなのは Content Size Fitter コンポーネントを Text コンポーネントを持つゲームオブジェクトに加えることです。

Horizontal Fit と Vertical Fit のどちらかを Preferred に設定すれば、Rect Transform は自身の width と height をテキストコンテンツに合うように調整します。

詳しくは Content Size Fitter ページを参照してください。

Aspect Ratio Fitter

Aspect Ratio Fitter は、それ自体のレイアウト要素のサイズを制御するレイアウトコントローラーとして機能します。

height を width に合うように、もしくはその逆へと調整できます。もしくは、要素をその親の内側に合わせたり、もしくはその親に内包することができます。Aspect Ratio Fitter は minimum サイズと preferred サイズのようなレイアウト情報を考慮しません。

詳しくは Aspect Ratio Fitter ページを参照してください。

レイアウトグループ

レイアウトグループは子の レイアウト要素のサイズと位置を制御する レイアウトコントローラー として機能します。たとえば、Horizontal Layout Group はそれぞれの隣に子を配置していき、Grid Layout Group は子をグリッド状に配置していきます。

レイアウトグループはそれ自体のサイズ管理はしません。代わりに、ほかのレイアウトコントローラーに管理されている、もしくは手動で設定されたレイアウト要素として機能します。

レイアウトグループに割り当てられたサイズがどんなものであっても、ほとんどの場合、報告される minimum、preferred、そして flexible サイズに基づき、子のレイアウト要素それぞれに適切なスペースを割り当てようとします。

詳しくは Horizontal Layout GroupVertical Layout GroupGrid Layout Group を参照してください。

駆動する Rect Transform プロパティー

自動レイアウトシステムの レイアウトコントローラー は自動的に特定の UI 要素の大きさと位置取りの管理ができるため、それらの大きさと位置はインスペクターやシーンビューを通して同時に手動で編集するべきではありません。そのように変更された値はいずれにせよ次のレイアウト計算で レイアウトコントローラーを通してリセットされることでしょう。

Rect Trasform にはこれを行う 駆動するプロパティー があります。たとえば、Horizontal Fit プロパティーを minimum、もしくは preferred に設定した Content Size Fitter は同一のゲームオブジェクトの Rect Transform の width を動作させます。width は読み取り専用として表示され、Rect Transform 上部の小さな情報ボックスには 1 つ以上のプロパティーが Content Size Fitter によって駆動していることが表示されます。

駆動する Rect Transform プロパティーには手動編集予防以外の理由もあります。レイアウトはゲームビューの解像度やサイズを変更するだけで変わることがあります。これによって、レイアウト要素のサイズと配置を変更し、次に、それが駆動プロパティーの値を変更します。しかし、ゲームビューがサイズ変更されたという理由だけで、シーンに保存されない変更があると記録されることは望ましいものではないかもしれません。この事態を避けるために、駆動するプロパティーの値はシーンの一部として保存されずに、値を変更してもシーンが変更されたと記録されません。

技術詳細

自動レイアウトシステムは特定のビルトインコンポーネントが付属していますが、カスタム方式でレイアウトを管理する新しいコンポーネントを作成することも可能です。これは自動レイアウトシステムに認められた特定のインターフェースを実装したコンポーネントを持つことで実行されます。

レイアウトインターフェース

ILayoutElement インターフェースを実装していれば、コンポーネントは自動レイアウトシステムによって レイアウト要素として扱われます。

子が ILayoutGroup インターフェースを実装していれば、コンポーネントは自身の子の Rect Transform を動作させることを期待されます。

ILayoutSelfController インターフェースを実装していれば、コンポーネントは自身の Rect Transform を動作させることを期待されます。

レイアウトの計算

自動レイアウトシステムは以下の順でレイアウトを評価、実行します。

  1. レイアウト要素の minimum、preferred、そして flexible width が ILayoutElement コンポーネントの CulateLayoutInputHorizontalcomponents の呼び出しによって計算されます。これは、子が親の前に計算されるボトムアップオーダーで実行されます。親が子自身の計算情報を考慮するかもしれないためです。
  2. レイアウト要素の有効な width が ILayoutController コンポーネントの SetLayoutHorizontal の呼び出しによって計算され、設定されます。これは、子の width の割り当てが、親の利用可能な width すべてに基づく必要があるため、子が親の後に計算されるトップダウンオーダーによって実行されます。このステップの後、レイアウト要素の Rect Transform は新しい width を持ちます。
  3. レイアウト要素の minimum、preferred、そして flexible height が ILayoutElement コンポーネントの CulateLayoutInputVertical の呼び出しによって計算されます。これは、子が親の前に計算されるボトムアップオーダーで実行されます。親が子自身の計算情報を考慮するかもしれないためです。
  4. レイアウト要素の有効な height が ILayoutController コンポーネントの SetLayoutVertical の呼び出しによって計算され、設定されます。これは、子の height の割り当てが、親の利用可能な height すべてに基づく必要があるため、子が親の後に計算されるトップダウンオーダーによって実行されます。このステップの後、レイアウト要素の Rect Transform は新しい height を持ちます。

上記のものにみられるように、自動レイアウトシステムは width を先に評価し、その後に height を評価します。それゆえに、計算された height は width に基づくもので、計算された width は決して height に基づくものではありません。

レイアウトの再構築の発生

コンポーネントのプロパティーが変更されて、現在のレイアウトがもう有効でなくなる可能性がある場合、レイアウトの再計算が必要です。これは以下の呼び出しを行うと実行されます。

LayoutRebuilder.MarkLayoutForRebuild (transform as RectTransform);

再構築は直ちに起こるわけではなく、レンダリングの起こる直前、現在のフレームの最後に起こります。直ちに起こらない理由は、レイアウトは潜在的に同じフレーム間に何度も再構築し得るからで、これがパフォーマンスへの悪影響になるからです。

いつ再構築が起こるべきかを示すガイドラインです。

  • レイアウトを変更できるプロパティーのセッター内で。
  • 以下のコールバック内で。
  • OnEnable
  • OnDisable
  • OnRectTransformDimensionsChange
  • OnValidate (エディター内のみ。実行中は必要ありません)
  • OnDidApplyAnimationProperties
アニメーションの統合
リッチテキスト