Nostalgic Perogi Monogramming
    Have ideas to improve npm?Join in the discussion! »

    phaser3-analog-counter
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    GitHub tag (latest by date) GitHub license

    Phaser3-analog-counter

    Class to use with Phaser 3 to show numbers in a "realistic" analog counter display.
    Try demo here: https://jjcapellan.github.io/phaser3-analog-counter/

    counters

    Table of contents

    Installation

    Browser

    There are two alternatives:

    • Point a script tag to the CDN link:
    <script src="https://cdn.jsdelivr.net/gh/jjcapellan/phaser3-analog-counter/dist/analog-counter.umd.js">
    <script src="localPath/analog-counter.umd.js">

    Then you can access the class by the global ShapeRec:

    // In your create function ...
    const myCounter = new AnalogCounter(this, x, y); 

    From NPM

    npm install phaser3-analog-counter
    

    Then you can acces the class as:

    • CommonJS module
    const AnalogCounter = require('phaser3-analog-counter');
     
    // In your create function ...
    const myCounter = new AnalogCounter(this, x, y); 
    • ES6 module
    import AnalogCounter from 'phaser3-analog-counter';
     
    // In your create function ...
    const myCounter = new AnalogCounter(this, x, y);

    Usage

    This is the most simple use (all options by default):

    // In your scene create function ...
     
    // Constructor only needs 3 params: (scene, x , y)
    const myCounter = new AnalogCounter(this, 100, 100);
     
    myCounter.setNumber(89091);

    The result using all default options is:

    counter1

    We can change some options:

    const config = {
        digits: 3,
        backgroundColor: 0xcc0000,
        fontColor: '#ffffff'
    }
    const myCounter = new AnalogCounter(this, 100, 100, config);
    myCounter.setNumber(243);

    This is the result:

    counter2

    To change position and object origin:

    const myCounter = new AnalogCounter(this, 100, 100);
     
    // Same like in Phaser
    myCounter.setOrigin(0.5);
     
    // Changes position to {x:150, y:200}
    myCounter.setPosition(150,200);

    Options

    This is the config object with all options:

    interface CounterConfig {
        /**
         * Width of counter in pixels. Default: digits * (fontSize + 4)
         */
        width?: number,
     
        /**
         * Height of counter in pixels. Default: fontSize * 2 (max value)
         */
        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;
    }

    License

    This code is released under MIT LICENSE.

    Install

    npm i phaser3-analog-counter

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    37.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar