レイアウトエンジン

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

動作

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

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

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

ベストプラクティス

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

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

例

The following example creates a UI element that’s anchored to the lower left corner of the screen. This is achieved by creating a parent element that fills the entire screen, and then positioning a child element in its lower left corner.

新しい VisualElement の作成
flexGrow プロパティを 1 に設定します。
新しい VisualElement を作成し、最初の VisualElement の子とします。
要素の position プロパティを absolute に設定します。
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>

ビジュアルツリー

UI Builder

マニュアル

レイアウトエンジン

関連資料

動作

ベストプラクティス

例