レイアウトエンジン

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

関連資料

Yoga と Flexbox の手引きとして、以下の外部リソースを参照してください。

• Yoga 公式ドキュメント: UI Toolkit のプロパティは Yoga のレイアウトの動作と一致します。
• CSS-Trickks guide to Flexbox: UI Toolkit は Flexbox のほとんどのプロパティをサポートしています。

動作

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

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

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

ベストプラクティス

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

• 要素のサイズを定義するには、width と height を設定します。

• 要素に調整できるサイズを割り当てるには、flexGrow プロパティ (USS: flex-grow: <value>;) を使用します。flexGrow プロパティの値は、その兄弟によって決定されるときに、基本ウェイトを要素のサイズに割り当てます。

• 水平レイアウトに切り替えるには、flexDirection プロパティを row (USS: flex-direction: row;) に設定します。

• 元のレイアウト位置に基づいて要素をオフセットするには、相対位置を使用します。

• 要素を親位置の矩形に対して相対的に配置するには、position プロパティを absolute に設定します。この場合、兄弟や親のレイアウトには影響しません。

例

次の例では、画面の左下の角に固定される UI 要素を作成します。これは、画面全体を覆う親要素を作成し、その左下の角に子要素を配置することによって行われます。

1. 新しい VisualElement の作成
2. flexGrow プロパティを 1 に設定します。
3. 新しい VisualElement を作成し、最初の VisualElement の子とします。
4. 要素の position プロパティを absolute に設定します。
5. left と bottom の位置オフセットを 0 にします。

これがその XML コードです。

<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>