Hudini Flat Icon Button Component

A flat-style icon button with customizable colors, opacity, and border radius, built on top of phaser-wind and font-awesome-for-phaser.

Flat Icon Button Component

A flat-style icon button with customizable colors, opacity, and border radius, built on top of phaser-wind and font-awesome-for-phaser.

Features

  • 🎨 Flat Design: Clean, minimalist design without shadows
  • 🖱ī¸ Interactive: Click animations with smooth press/release effects
  • đŸŽ¯ Customizable Colors: Separate control over background and icon colors
  • 👁ī¸ Opacity Control: Independent opacity for background and icon
  • 🎨 Icon Styles: Support for solid, regular, and brands icon styles
  • ⚡ Performance: Optimized animations for smooth 60fps gameplay
  • 🔗 Event API: Direct access to interactive methods for advanced event handling

Props

  • icon - IconKey from font-awesome-for-phaser (e.g., 'heart', 'user', 'play')
  • iconStyle - Icon style ('solid', 'regular', 'brands') - default: 'solid'
  • size - Font size token ('xs', 'sm', 'base', 'lg', 'xl'...) or pixel value - default: 'md'
  • backgroundColor - Background color token or CSS color - default: 'gray-600'
  • iconColor - Icon color token or CSS color - default: 'white'
  • borderRadius - Border radius token ('none', 'sm', 'md', 'lg', 'xl', 'full') or pixel value - default: 'md'
  • backgroundOpacity - Background opacity (0-1) - default: 1
  • iconOpacity - Icon opacity (0-1) - default: 1
  • onClick - Optional click handler function

Methods

  • setButtonSize(size) - Change button size
  • setBorderRadius(radius) - Change border radius
  • setBackgroundColor(color) - Change background color
  • setIconColor(color) - Change icon color
  • setBackgroundOpacity(opacity) - Change background opacity
  • setIconOpacity(opacity) - Change icon opacity
  • setIcon(icon, opts?) - Change icon and optionally icon style
  • interactive - Access to Phaser interactive methods (on, off, once, setInteractive)
  • getBounds() - Get button bounds for layout calculations

Live Example

Loading game...

Usage Example

import Phaser from 'phaser';
import {
    createTheme,
    HUDINI_KEY,
    HudiniPlugin,
    SceneWithHudini,
    FlatIconButton
} from 'hudini';
import { loadFont } from 'font-awesome-for-phaser';

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

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

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

        // Create a flat icon button
        const playButton = new FlatIconButton({
            scene: this,
            x: this.cameras.main.centerX,
            y: 200,
            icon: 'play',
            size: 'lg',
            backgroundColor: 'blue-600',
            iconColor: 'white',
            borderRadius: 'md',
            onClick: () => {
                console.log('Play clicked!');
            },
        });
        this.add.existing(playButton);

        // Create a button with custom opacity
        const heartButton = new FlatIconButton({
            scene: this,
            x: this.cameras.main.centerX - 100,
            y: 300,
            icon: 'heart',
            backgroundColor: 'red-600',
            iconColor: 'white',
            backgroundOpacity: 0.8,
            borderRadius: 'lg',
        });
        this.add.existing(heartButton);
    }
}

// Don't forget to load fonts before creating the game
loadFont().then(() => {
    // Initialize your Phaser game here
});

Advanced Examples

Using Interactive API

const button = new FlatIconButton({ 
    scene: this, 
    x: 100, 
    y: 100, 
    icon: 'play',
    onClick: () => console.log('Basic click')
});

// Access interactive methods directly
button.interactive.on('pointerover', () => console.log('Hover'));
button.interactive.on('pointerdown', () => console.log('Press'));
button.interactive.once('pointerup', () => console.log('Release once'));

Different Border Radius

// Rounded button (default)
const roundedBtn = new FlatIconButton({
    scene: this,
    x: 200,
    y: 200,
    icon: 'star',
    borderRadius: 'md',
});

// Circular button
const circularBtn = new FlatIconButton({
    scene: this,
    x: 300,
    y: 200,
    icon: 'heart',
    borderRadius: 'full',
});

// Square button
const squareBtn = new FlatIconButton({
    scene: this,
    x: 400,
    y: 200,
    icon: 'gear',
    borderRadius: 'none',
});

Opacity Control

// Semi-transparent background
const transparentBtn = new FlatIconButton({
    scene: this,
    x: 200,
    y: 200,
    icon: 'heart',
    backgroundColor: 'red-600',
    iconColor: 'white',
    backgroundOpacity: 0.5,
    iconOpacity: 1,
});

// Update opacity dynamically
transparentBtn.setBackgroundOpacity(0.8);
transparentBtn.setIconOpacity(0.9);

Dynamic Updates

const button = new FlatIconButton({
    scene: this,
    x: 400,
    y: 300,
    icon: 'gear',
    size: 'base',
});

// Update size dynamically
button.setButtonSize('xl');

// Update colors
button.setBackgroundColor('purple-600');
button.setIconColor('yellow');

// Update icon
button.setIcon('heart', { iconStyle: 'solid' });

// Update border radius
button.setBorderRadius('full');