Hudini Radial Progress Component

Circular progress bar (arc/gauge) with customizable colors, thickness, and optional percentage text display.

Radial Progress Component

A circular progress bar component that displays progress as a radial arc (gauge). Perfect for showing progress in a circular format with customizable colors, thickness, and optional percentage text in the center.

Features

  • 📊 Circular Arc: Progress displayed as a radial arc/gauge
  • 🎨 Customizable: Full control over colors, thickness, radius, and start angle
  • 📝 Optional Text: Show percentage text in the center with customizable styling
  • ⚡ Animated: Smooth transitions when updating progress values
  • đŸŽ¯ Flexible: Configurable start angle and background alpha

Props

  • radius - Radius of the progress bar in pixels (required)
  • thickness - Thickness of the arc in pixels (default: 4)
  • backgroundColor - Background circle color token (default: 'gray-200')
  • backgroundAlpha - Background alpha 0-1 (default: 0.2)
  • progressColor - Progress arc color token (default: 'blue-500')
  • progress - Initial progress value 0-100 (default: 0)
  • startAngle - Start angle in degrees (default: 270, top)
  • showText - Show percentage text in center (default: false)
  • textColor - Text color token (default: 'white')
  • fontSize - Font size token (default: 'base')
  • textAlpha - Text alpha 0-1 (default: 1)

Methods

  • setProgress(progress, animate?) - Set progress value (0-100), animate defaults to true
  • getProgress() - Get current progress value (0-100)
  • setBackgroundColor(color) - Change background color
  • setBackgroundAlpha(alpha) - Change background alpha
  • setProgressColor(color) - Change progress arc color
  • setShowText(show) - Toggle percentage text display
  • setTextColor(color) - Change text color
  • setFontSize(size) - Change font size
  • setTextAlpha(alpha) - Change text alpha
  • setRadius(radius) - Change radius
  • setThickness(thickness) - Change arc thickness

Live Example

Loading game...

Usage Example

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

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

class ProgressDemoScene extends SceneWithHudini<Theme> {
    private progressBar?: RadialProgress;

    constructor() {
        super('progress-demo');
    }

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

        // Create a radial progress bar with text
        this.progressBar = new RadialProgress({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY,
            radius: 80,
            thickness: 8,
            backgroundColor: 'gray-200',
            backgroundAlpha: 0.2,
            progressColor: 'blue-500',
            progress: 0,
            showText: true,
            textColor: 'white',
            fontSize: 'lg',
        });
        this.add.existing(this.progressBar);

        // Animate progress over time
        this.time.addEvent({
            delay: 100,
            callback: () => {
                const current = this.progressBar!.getProgress();
                if (current < 100) {
                    this.progressBar!.setProgress(current + 1);
                }
            },
            repeat: 100,
        });
    }
}