[Phaser 3] Analog counter display

Examples
1

Hi all,
I have published a class to show numbers in an analog counter. It can be usefull if you like “realistic” style.
Repository: https://github.com/jjcapellan/phaser3-analog-counter
Demo: https://jjcapellan.github.io/phaser3-analog-counter/

counters

The first counter in the image was made only with default values:

const myCounter = new AnalogCounter(this, x, y) // config object optional

Here all the options:

interface CounterConfig = {
    /**
     * Width of counter in pixels. Default: digits * (fontSize + 4)
     */
    width?: number,

    /**
     * Height of counter in pixels. Default: fontSize * 2
     */
    height?: number,

    /**
     * Number of digits of counter. Default: 6
     */
    digits?: number,

    /**
     * Vertical space between digits in pixels. Default: fontSize/2
     */
    padding?: number,

    /**
     * CSS property "fontSize" of the font used to make the digits. Default: 24
     */
    fontSize?: number,

    /**
     * Color of font in html format (example: '#ff00ff'). Default: '#000000'
     */
    fontColor?: string,

    /**
     * Color of background in hex format (example: 0xff00ff). Default: 0xffffff
     */
    backgroundColor?: number,

    /**
     * Alpha value of shade effect. 0 disables this effect. Default 0.9
     */
    shade?: number

    /**
     * Time interval in milliseconds until reach a number. Default: 1000
     */
    duration?: number;
}

For more info, please, visit the repository.

I hope you like it.

Cheers.

1 Like