rexrainbow/phaser3-rex-notes/rexui-layout-sizers

RexUI Layout Sizers

Use this skill for RexUI layout composition. It covers the four primary layout factories and the shared BaseSizer behavior used by most RexUI widgets.

Use This First

Pick the layout factory before writing component config:

Default to sizer unless the user clearly needs a grid, wrapping flow, or overlay.

Required Setup

This skill assumes RexUI is already available as this.rexUI. If not, use rexui-setup-and-factory first.

For npm-installed projects, the setup import is:

import UIPlugin from 'phaser4-rex-plugins/templates/ui/ui-plugin.js';

References

Read these only when needed:

• references/sizer-config.md: config fields, add config, shared BaseSizer methods.
• references/layout-recipes.md: reduced recipes for the four primary layout factories.
• references/layout-gotchas.md: common mistakes and debugging checks.

Core Rules

• Call .layout() after adding children or changing layout-relevant config.
• Children are Phaser game objects or RexUI game objects, not plain strings.
• Use space on the container for outer/item spacing.
• Use child padding for spacing around one child.
• Use child proportion to distribute remaining space in sizer.
• Use child expand when the child should fill its assigned layout area.
• Give important children key values so code can retrieve them with getElement().
• Keep nested layouts explicit: create child sizers first, then add them to parent sizers.

Source File Map

• templates/ui/basesizer/BaseSizer.d.ts: shared layout methods and child map methods.
• templates/ui/sizer/Sizer.d.ts: linear layout.
• templates/ui/gridsizer/GridSizer.d.ts: fixed grid layout.
• templates/ui/fixwidthsizer/FixWidthSizer.d.ts: wrapping flow layout.
• templates/ui/overlapsizer/OverlapSizer.d.ts: stacked/overlay layout.
• templates/ui/<layout>/Factory.js: exact factory signatures.

Related Skills

• rexui-setup-and-factory: plugin setup and factory discovery.
• rexui-components-catalog: choose a component family.
• rexui-basic-widgets: labels, buttons, tabs, sliders.
• rexui-dialogs-and-popups: dialog layouts built from sizers.
• rexui-scroll-lists-and-tables: scrollable panels and grid tables.