レイアウトエンジンによる要素の配置

UI Toolkit には、レイアウトやスタイルのプロパティに基づいてビジュアル要素を配置するレイアウトエンジンが搭載されています。レイアウトエンジンは、HTML/CSS のレイアウトシステムである Flexbox のサブセットを実装した Yoga のレイアウト法則を使用しています。UI Toolkit のプロパティは Yoga のレイアウト動作と一致します。UI Toolkit は Flexbox のほとんどのプロパティをサポートしています。

デフォルトでは、すべての要素がレイアウトの一部になっています。レイアウトには以下のデフォルトの動作があります。

コンテナは子を垂直に配置します。
コンテナの矩形内に子の矩形が追加されます。この動作は他のレイアウトプロパティによって制限される場合があります。
テキストを持つ VisualElement は、サイズ計算でテキストサイズを使用します。この動作は他のレイアウトプロパティによって制限される場合があります。

UI Toolkit には、ボタン、トグル、テキストフィールド、などの標準 UI コンポーネント用のビルトインコントロールが用意されています。これらのビルトインコントロールにはスタイルがあり、レイアウトに影響します。

主なスタイルプロパティ

以下は主なスタイルプロパティです。

Flex > Direction (USS では flex-direction): レイアウト方向の主軸を指定します。デフォルトは column で、主軸の上から下へ要素を並べます。
Flex > Grow (USSでは flex-grow): 要素を主軸方向にどれだけ伸長させるかを定義します。これは、同じ親の他の兄弟と共通の比率です。このプロパティは、要素を親のサイズ (兄弟を除く) 全体を占めるように伸長させたい場合に便利です。これを行うには、 Flex > Grow の値を 1 に設定します。flex-grow が 1 に設定された 2 つの兄弟がある場合、それぞれ主軸に沿って利用可能な親のサイズの 50% に伸長します。
Align > Align Items (USSではalign-items): 交差軸、つまり主軸に対して垂直な軸での要素の整列を定義します。例えば、flex-direction: column と align-items: flex-end が設定された VisualElement に 2 つのボタンがある場合、2 つのボタンはコンテナの右端に寄せられます。align-items のオプションは flex-direction の値に依存するため、flex-start や flex-end という名前が付いています。
Align > Justify Content (USS ではjustify-content): 主軸の要素の整列を定義します。例えば、flex-direction: column と justify-content: flex-end が設定された VisualElement に 2 つのボタンがある場合、2 つのボタンはコンテナの下端に寄せられます。justify-content のオプションは flex-direction の値に依存するため、 flex-start や flex-end という名前が付いています。

詳しくは、Flex layout を参照してください。

選択した要素に子要素がある場合、UI Builder ではヘッダーのトグルを使って、ビューポート のフレックス関連のスタイルプロパティを切り替えることができます。下の画像は #menu 要素で利用可能なオプションです。

スタイルプロパティを使用すると、複雑で動的なレイアウトを作成できます。以下は、画面の右下端に Button を固定するレイアウトの例です。

このレイアウトの UXML は、各コンテナの VisualElement に設定されたインラインスタイルを示しており、以下のようになります。

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="screen-is-blue" style="flex-grow: 1; justify-content: flex-end; background-color: blue;">
        <ui:VisualElement name="toolbar-is-orange" style="align-items: flex-end; background-color: orange;">
            <ui:Button text="Button" display-tooltip-when-elided="true" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

このコンテナには、形状が見えやすいよう色が付けられています。ネストされた VisualElement コンテナを使用すると、各要素の位置とサイズを明示的に設定することなく、任意の動的なレイアウトを実現できます。これによりレイアウトが動的に保たれ、画面のサイズ変更など、より大きなコンテナのサイズ変更に対して自動調整できます。

絶対位置

UI Builder は Position スタイルプロパティもサポートしています。Position > Absolute モードでは、デフォルトの Flexbox ベースのレイアウトエンジンで要素が表示されなくなります。要素が一切スペースを取らなくなったように見えます。Absolute 位置では、要素は Relative 位置の兄弟要素の上に表示されます。

Absolute 位置を使用する場合、Position > Left、Top、Right、Bottom のスタイルプロパティを使用して、要素を親の各辺からオフセットしてサイズ調整します。これは、画面上の絶対座標の設定ではなく、親要素からの相対的なオフセットの設定です。ただし、Relative モードを使えば親要素の位置を決められます。Left オフセットと Right オフセットの両方を設定すると、要素の Width スタイルプロパティは無視され、幅は以下の式で求められます。

element-computed-width = parent-width - left-offset - right-offset

Left、Top、Right、Bottom はアンカーとして解釈することもできます。例えば、画面の左下に Button を固定することができます。

下の UXML はインラインスタイルを表示しています。

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:VisualElement style="flex-grow: 1;">
        <ui:VisualElement style="position: absolute; left: 0; bottom: 0;" />
    </ui:VisualElement>
</ui:UXML>

位置を決める際に Left を 0 に設定するのと、Left を未設定にするのとでは違いがあります。

Left set to 0 は、オフセットに 0 を設定することを意味します。
Left unset は、オフセットを設定せず、他のスタイルプロパティで要素の幅や高さを定義します。

これらのオフセットスタイルプロパティーは、要素の選択境界線の各エッジと角にある追加のサイズ変更ハンドルを使用して、キャンバス で直接変更することもできます。設定/未設定を区別できる必要があるため、キャンバス には要素の各辺の外側にオレンジ色の正方形で “アンカー” トグルが表示されます。キャンバス のハンドルは、どの “アンカー” が設定されているかによって、要素のサイズを視覚的に変更するときにどのスタイルプロパティを設定するかを調整します。例えば、キャンバス 内の要素を右枠のハンドルでサイズ変更するとします。

Left と Right の両方のプロパティを設定する場合、ハンドルは Right プロパティを更新します。
Left を設定し Right を設定しない場合、ハンドルは Width プロパティを更新します。

相対と絶対の両方を使う

Absolute 位置モードは、UI Toolkit のビルトインレイアウトエンジンをバイパスします。全体のレイアウトを変更するために個々の要素の手動更新が必要な、メンテナンスに手間のかかる UI になる可能性があるため、使用を避けてください。ただし、オーバーレイなどの特定の使用例には Absolute 位置が適しています。ポップアップやドロップダウンなど、複雑な UI を他の複雑な UI の上にオーバーレイするのに便利です。このような場合、オーバーレイコンテナには Absolute 位置を使用しますが、オーバーレイ内の要素には引き続き Relative モードを使用して柔軟性を維持します。

以下は、単純な中央寄せポップアップの例です。

AbsolutePositionOverlayWithPopup 参考のために UXML を以下に示します。

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="complex-ui-screen">
        <ui:Toggle label="Toggle" />
        <ui:MinMaxSlider picking-mode="Ignore" label="Min/Max Slider" min-value="10" max-value="12" low-limit="-10" high-limit="40" />
        <ui:Label text="Label" />
        <ui:Button text="Button" />
        <ui:Button text="Button" />
    </ui:VisualElement>
    <ui:VisualElement name="overlay" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.71); align-items: center; justify-content: center;">
        <ui:VisualElement name="popup" style="background-color: rgba(70, 70, 70, 255);">
            <ui:Label text="Exit?" name="message" />
            <ui:Button text="OK" name="ok-button" style="width: 108.3333px;" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

上の例では、Absolute 位置の使い方を強調しています。Position > Left、Top、Right、Bottom をすべて 0 に設定し、画面の端から 0 ピクセル離れた位置になるようにします。これにより、#overlay 要素が #complex-ui-screen コンテナ要素と重なります。#overlay 要素に半透明の背景を設定して、他の UI を暗く見せることもできます。#overlay を使用して Relative 位置を設定し、#popup コンテナ VisualElement を中央に配置します。

推奨ガイド

以下のリストは、レイアウトエンジンのパフォーマンスを向上させるためのコツです。

要素のサイズを定義するには、width と height を設定します。
要素に調整できるサイズを割り当てるには、flexGrow プロパティ (USS: flex-grow: <value>;) を使用します。flexGrow プロパティの値は要素のサイズに基本ウェイトを割り当て、兄弟要素から値を計算する際に使用します。
水平レイアウトに切り替えるには、flexDirection プロパティーを row (USS： flex-direction: row;) に設定します。
元のレイアウト位置に基づいて要素をオフセットするには、相対位置を使用します。
要素を親位置の矩形に対して相対的に配置するには、position プロパティを absolute に設定します。この場合、兄弟や親のレイアウトには影響しません。

追加リソース

USS 共通プロパティ

相対位置と絶対位置