Hudini Row Component

Horizontal layout container that arranges children horizontally with spacing, vertical alignment, and configurable horizontal origin.

Row Component

Horizontal layout container that arranges children horizontally with spacing, vertical alignment, and configurable horizontal origin.

Features

  • 📋 Horizontal Arrangement: Arranges children horizontally with customizable gap
  • ↕ī¸ Vertical Alignment: Align children top, center, or bottom
  • 📍 Horizontal Origin: Control where content starts (left, center, right)
  • 🔄 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 row center
  • y - Y coordinate of the row center
  • gap - Gap between elements in pixels (default: 8)
  • align - Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center')
  • horizontalOrigin - Horizontal origin: 'left' | 'center' | 'right' (default: 'center')
  • children - Initial array of GameObjects to add

Live Example

Loading game...

Usage Example

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

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

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

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

        // Create sprites
        const heart = this.add.sprite(0, 0, 'heart');
        const gem = this.add.sprite(0, 0, 'gem');

        // Create a row with default settings
        const row = new Row({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY,
            gap: 10,
            align: 'center',
            horizontalOrigin: 'center',
            children: [heart, gem],
        });
        this.add.existing(row);

        // Update layout options later
        row.setGap(16);
        row.setAlign('top');
    }
}