phaser3-progressbar

Phaser3 progress bar component, written in Typescript.

The progress bar graphics can be customized by passing an object, and controlled from the scene with callbacks.

Installation

npm install --save-dev phaser3-progressbar

Usage (Typescript)

import {ProgressBar} from "phaser3-progressbar";

export class PreloadScene extends Phaser.Scene {
  private progressBar: ProgressBar;

  constructor() {
    super({
      key: "PreloadScene"
    });
  }

  preload(): void {
    // Create a progressbar.
    this.progressBar = new ProgressBar(this, {
      centerX: this.sys.canvas.width / 2,
      centerY: this.sys.canvas.height / 2,
      // ... other configuration ...
    });

    // Hook up the progress event.
    this.load.on('progress', (value) => {
      this.progressBar.update(value);
    });

    // Destroy on complete.
    this.load.on('complete', () => {
      this.progressBar.destroy();
    });
    
    // Add asset loading code here...
  }

  create(): void {
    this.scene.stop('PreloadScene');
    this.scene.launch('MainScene');
  }
}

Configuration options and defaults

{
  // X coordinate for the center of the progress bar.
  centerX: 260,
  // Y coordinate for the center of the progress bar.
  centerY: 30,
  // Total width of the bar, borders included.
  width: 500,
  // Total height of the bar, borders included.
  height: 50,
  // Fill color of the progress bar box.
  boxFill: 0x000000,
  // Fill alpha of the progress bar box.
  boxFillAlpha: 1,
  // Stroke size of the progress bar box.
  boxStroke: 5,
  // Stroke color of the progress bar box.
  boxStrokeColor: 0xFFFFFF,
  // Stroke alpha of the progress bar box.
  boxStrokeAlpha: 1,
  // Radius for a rounded progress bar box, if > 0. If 0, the box is not rounded.
  boxRadius: 0,
  // Fill color of the progress bar.
  barFill: 0xFFFFFF,
  // Fill alpha of the progress bar.
  barFillAlpha: 1,
  // Stroke size of the progress bar.
  barStroke: 0,
  // Stroke color of the progress bar.
  barStrokeColor: 0xFFFFFF,
  // Stroke alpha of the progress bar.
  barStrokeAlpha: 1,
  // Radius for a rounded progress bar, if > 0. If 0, the bar is not rounded.
  barRadius: 0,
  //Horizontal padding between progress bar and box.
  paddingH: 0,
  // Vertical padding between progress bar and box.
  paddingV: 0,
  // Minimum width for the bar to be drawn.
  // When using a rounded bar it is best to set this higher than 1 (at least the
  // radius size) to avoid visual artifacts.
  minBarWidth: 1
}

License

This project is licensed under the MIT License - see the LICENSE.md file for details