Hudini Column Component

Vertical layout container that stacks children with spacing, horizontal alignment, and configurable vertical origin.

Column Component

Vertical layout container that stacks children vertically with spacing, horizontal alignment, and configurable vertical origin.

Features

📦 Vertical Stacking: Arranges children vertically with customizable gap
↔️ Horizontal Alignment: Align children left, center, or right
📍 Vertical Origin: Control where content starts (top, center, bottom)
🔄 Dynamic Layout: Automatically updates when children are added or removed
⚡ Performance: Efficient layout calculations

Props

scene - The Phaser scene instance
x - X coordinate of the column center
y - Y coordinate of the column center
gap - Gap between elements in pixels (default: 8)
align - Horizontal alignment: 'left' | 'center' | 'right' (default: 'center')
verticalOrigin - Vertical origin: 'top' | 'center' | 'bottom' (default: 'top')
children - Initial array of GameObjects to add

Live Example

Loading game...

Usage Example

import Phaser from 'phaser';
import {
    createTheme,
    HUDINI_KEY,
    HudiniPlugin,
    SceneWithHudini,
    Column
} from 'hudini';

const theme = createTheme({});
type Theme = typeof theme;

class ColumnDemoScene extends SceneWithHudini<Theme> {
    constructor() {
        super('column-demo');
    }

    create(): void {
        const { pw } = this.hudini;
        this.cameras.main.setBackgroundColor(pw.color.slate(900));

        // Create sprites
        const spriteA = this.add.sprite(0, 0, 'player');
        const spriteB = this.add.sprite(0, 0, 'enemy');

        // Create a column with default settings
        const column = new Column({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY,
            gap: 12,
            align: 'center',
            verticalOrigin: 'top',
            children: [spriteA, spriteB],
        });
        this.add.existing(column);

        // Update layout options later
        column.setGap(20);
        column.setAlign('left');
    }
}