Hudini SizedBox Component

A simple invisible rectangle component for spacing and layout purposes, perfect for creating custom spacing in Row and Column layouts.

SizedBox Component

A simple invisible rectangle component for spacing and layout purposes. It occupies space without any visual appearance, perfect for creating custom spacing in Row and Column layouts.

Features

📏 Invisible Spacing: Creates space without visual appearance
🎯 Layout Control: Perfect for custom spacing in Row and Column layouts
⚡ Lightweight: Extends Phaser Rectangle for native width/height support
🔧 Flexible: Can be used for horizontal, vertical, or both dimensions
📐 Precise Control: Set exact spacing when gap isn't sufficient
🔄 Dynamic Updates: Change size dynamically with setWidth, setHeight, or setSize

Props

scene - Phaser scene where the SizedBox will be added
x - X position of the SizedBox
y - Y position of the SizedBox
width - Width in pixels (for horizontal spacing) - default: 1px
height - Height in pixels (for vertical spacing) - default: 1px

Note: At least width or height must be specified. Both default to 1px if not provided.

Methods

setWidth(width) - Set the width of the SizedBox
setHeight(height) - Set the height of the SizedBox
setSize(width, height) - Set both width and height

Live Example

Loading game...

Usage Example

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

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

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

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

        // Create buttons
        const button1 = new TextButton({
            scene: this,
            x: 0,
            y: 0,
            text: 'Button 1',
            color: 'blue-500',
            textColor: 'white',
        });

        const button2 = new TextButton({
            scene: this,
            x: 0,
            y: 0,
            text: 'Button 2',
            color: 'green-500',
            textColor: 'white',
        });

        // Use SizedBox for custom spacing in Column
        const column = new Column({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY,
            gap: 8,
            children: [
                button1,
                new SizedBox({ scene: this, x: 0, y: 0, width: 0, height: 30 }),
                button2,
            ]
        });
        this.add.existing(column);
    }
}

Advanced Examples

Vertical Spacing in Column

const column = new Column({
    scene: this,
    x: 400,
    y: 300,
    gap: 8,
    children: [
        button1,
        new SizedBox({ scene: this, x: 0, y: 0, width: 0, height: 40 }),
        button2,
        new SizedBox({ scene: this, x: 0, y: 0, width: 0, height: 20 }),
        button3,
    ]
});

Horizontal Spacing in Row

const row = new Row({
    scene: this,
    x: 400,
    y: 100,
    gap: 8,
    children: [
        icon1,
        new SizedBox({ scene: this, x: 0, y: 0, width: 50, height: 0 }),
        icon2,
        new SizedBox({ scene: this, x: 0, y: 0, width: 30, height: 0 }),
        icon3,
    ]
});

Dynamic Updates

const spacer = new SizedBox({
    scene: this,
    x: 0,
    y: 0,
    width: 20,
    height: 20,
});

// Update dimensions dynamically
spacer.setWidth(50);
spacer.setHeight(30);
// Or update both at once
spacer.setSize(100, 50);