LayoutPlugin

Layout management plugin for PIXI.js applications using @pixi/layout.

Integrates the @pixi/layout library to provide CSS-like layout capabilities for PIXI display objects, including flexbox, positioning, and responsive design. Automatically configures sensible default styles for consistent layout behavior.

Key Features:

CSS Flexbox-like layout system for PIXI containers
Responsive design capabilities with intrinsic sizing
Automatic layout calculation and positioning
Gap, padding, and margin support
Transform origin and object positioning controls
Development tools integration for layout debugging

Default Style Configuration:

Container: Auto width/height with no gap
Leaf: Intrinsic sizing with flex shrink enabled
Shared: Center transform origin, row direction, stretch alignment

Example

// Plugin is automatically initialized with the application
// Layout capabilities are immediately available on all containers

// Create a flexbox-style layout
const container = new PIXI.Container();
container.layout = {
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  gap: 10,
  padding: 20
};

// Add children that will be automatically laid out
const button1 = new PIXI.Sprite(buttonTexture);
const button2 = new PIXI.Sprite(buttonTexture);
const button3 = new PIXI.Sprite(buttonTexture);

container.addChild(button1, button2, button3);
// Children are automatically positioned using flexbox rules

// Responsive design with intrinsic sizing
const responsiveContainer = new PIXI.Container();
responsiveContainer.layout = {
  width: '100%',
  maxWidth: 800,
  flexDirection: 'column',
  alignItems: 'center'
};

Remarks

Requires @pixi/layout package to be installed
Provides devtools integration for layout debugging in development
Default styles are optimized for common game UI patterns
Layout calculations happen automatically when display objects are added/modified
Supports both absolute and relative positioning

Extends

Plugin

Implements

ILayoutPlugin

Constructors

Constructor

new LayoutPlugin(id): LayoutPlugin

Defined in: plugins/Plugin.ts:48

Parameters

id

string = 'Plugin'

Returns

LayoutPlugin

Inherited from

Plugin.constructor

Properties

__dill_pixel_method_binding_root

__dill_pixel_method_binding_root: boolean

Defined in: plugins/Plugin.ts:39

Inherited from

Plugin.__dill_pixel_method_binding_root

id

readonly id: "LayoutPlugin" = 'LayoutPlugin'

Defined in: plugins/LayoutPlugin.ts:77

Plugin identifier for framework registration

Implementation of

ILayoutPlugin.id

Overrides

Plugin.id

Accessors

app

Get Signature

get app(): A

Defined in: plugins/Plugin.ts:53

Returns

A

Implementation of

ILayoutPlugin.app

Inherited from

Plugin.app

options

Get Signature

get options(): O

Defined in: plugins/Plugin.ts:44

Returns

O

Implementation of

ILayoutPlugin.options

Inherited from

Plugin.options

Methods

addSignalConnection()

addSignalConnection(…args): void

Defined in: plugins/Plugin.ts:79

Add signal connections to the container.

Parameters

args

…SignalConnection[]

The signal connections to add.

Returns

void

Implementation of

ILayoutPlugin.addSignalConnection

Inherited from

Plugin.addSignalConnection

clearSignalConnections()

clearSignalConnections(): void

Defined in: plugins/Plugin.ts:85

Returns

void

Implementation of

ILayoutPlugin.clearSignalConnections

Inherited from

Plugin.clearSignalConnections

destroy()

destroy(): void

Defined in: plugins/Plugin.ts:57

Returns

void

Implementation of

ILayoutPlugin.destroy

Inherited from

Plugin.destroy

initialize()

initialize(): Promise<void>

Defined in: plugins/LayoutPlugin.ts:105

Initializes the Layout plugin with optimized default styles. Configures the @pixi/layout system with sensible defaults for game development, including flexbox behavior, sizing, and alignment settings.

Default Configuration Details:

Container styles: Auto-sizing with no gaps for efficient nesting
Leaf styles: Intrinsic sizing with flex shrink for responsive behavior
Shared styles: Center origins, row direction, and stretch alignment
Transform origin: Set to 50% for predictable scaling and rotation
Object position: Centered for consistent alignment behavior

Returns

Promise<void>

Example

// Called automatically by the plugin system
// After initialization, all PIXI containers support layout properties

const container = new PIXI.Container();
container.layout = {
  display: 'flex',        // Use flexbox layout
  flexDirection: 'column', // Stack children vertically
  gap: 10,                // 10px gap between children
  padding: 15             // 15px padding around content
};

Implementation of

ILayoutPlugin.initialize

Overrides

Plugin.initialize

postInitialize()

postInitialize(_app): void | Promise<void>

Defined in: plugins/Plugin.ts:68

Parameters

_app

IApplication

Returns

void | Promise<void>

Implementation of

ILayoutPlugin.postInitialize

Inherited from

Plugin.postInitialize