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

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

    0.1.3 • Public • Published


    pixi-timer-events is a plugin for Pixi.js v4 or higher to create time events easily.

    Original code: https://github.com/Nazariglez/pixi-timer. The original author wnet MIA, so the intention of this repo is to provide some bug fixes to the original code. The license and readme is more or less unchanged.


    npm install pixi-timer-events


    Prebuilt files

    var renderer = new PIXI.autoDetectRenderer(800,600);
    var stage = new PIXI.Container();
    function animate(){

    How it works

    This plugin add a new namespace named timerto the PIXI namespace, and the timer namespace has 2 new classes, TimerManager and Timer, and create an instance for TimerManager in PIXI.timerManager, but all you need is add PIXI.timerManager.update() in your requestAnimationFrame. You can pass as params for PIXI.timerManager.update(delta) your own delta time, if you don't pass anything it will be calculated internally, for max accuracy calculating the delta time you can use the AnimationLoop plugin.

    When a timer is ended, the instance will kept in the memory and in the timerManager, but you can prevent this if you set .expire = true in the timer.

    Using AnimationLoop

    var renderer = new PIXI.autoDetectRenderer(800,600);
    var animationLoop = new PIXI.AnimationLoop(renderer);
    //Add a postrender or prerender event to add the timer.update in the raf.
    animationLoop.on('postrender', function(){
      PIXI.timerManager.update(this.delta); //Pass as param the delta time to PIXI.timerManager.update


    TimerManager extends from PIXI.utils.EventEmitter, and emit some events: start, end, repeat, update and stop. More info: Node.js Events

    • start - callback(elapsedTime): Fired when the timer starts counting. If the timer has an delay, this event fires when the delay time is ended.
    • end - callback(elapsedTime): Fired when the timer is over. If the .loop option it's true, this event never will be fired, and if the timer has an .repeat number, this event will be fired just when all the repeats are done.
    • repeat - callback(elapsedTime, repeat): Fired at every repeat cycle, if your time has .repeat=5 this events will be fired 5 times.
    • update - callback(elapsedTime, delta): Fired at each frame.
    • stop - callback(elapsedTime): Fired only when it's used the .stop() method. It's useful to know when a timer is cancelled.

    Some examples

    Create a timer to count to 1 second, and repeat the count 15 times.

    var timer = PIXI.timerManager.createTimer(1000);
    timer.repeat = 15;
    timer.on('start', function(elapsed){console.log('start')});
    timer.on('end', function(elapsed){console.log('end', elapsed)});
    timer.on('repeat', function(elapsed, repeat){console.log('repeat', repeat)});

    Create a timer to count to 100 ms and repeat forever.

    var timer = PIXI.timerManager.createTimer(100);
    timer.loop = true;
    timer.on('start', function(elapsed){console.log('start')});
    timer.on('repeat', function(elapsed, repeat){console.log('repeat', repeat)});

    Create a timer to count one minute and just end.

    var timer = PIXI.timerManager.createTimer(1000*60);
    timer.on('start', function(elapsed){console.log('start')});
    timer.on('end', function(elapsed){console.log('end', elapsed)});

    Create a timer to count to 5 seconds, and when the count it's ended, reset it and count to 10 seconds.

    var timer = PIXI.timerManager.createTimer(5000);
    timer.on('start', function(elapsed){console.log('start')});
    timer.on('end', function(elapsed){
      if(elapsed === 5000){
        console.log('Reset and count to 10 seconds');
        this.reset(); //Reset the timer
        this.time = 10000; //set to 10 seconds
        this.start(); //And start again

    Create a timer to count to 5 seconds, but with 2 seconds as delay.

    var timer = PIXI.timerManager.createTimer(5000);
    timer.delay = 2000;
    timer.on('start', function(elapsed){console.log('start')});
    timer.on('end', function(elapsed){console.log('end', elapsed)});




    The constructor


    An array with all the timers created

    .update( delta )

    The update method, make sure it is in the raf. You can pass a fixed delta time (like 0.016), your own calculated delta, or nothing. (Delta time in seconds not milliseconds).

    .removeTimer( timer )

    Remove a timer from the .timers array in the next frame.

    .addTimer( timer )

    Normally you want to use .createTimer(time) to create a timer, but, you can also create a timer with new PIXI.Timer(time) and add it in the manager with this method.

    .createTimer( time )

    Return a new instance of PIXI.Timer managed by this timerManager.



    The constructor


    The timer will count to this value


    The TimerManager instance who manage this timer (maybe you want to use different managers for each scene)


    Read only, it's the state of the timer. It's different to the .isStarted. For example: if the timer has a delay, and you use .start(), .isStarted will be false, but .active will be true.


    Return as boolean if the count is started.


    Return as boolean if the count is ended.


    Set to true if you want to delete the instance of this timer when the timer will end. (false by default)


    Set a delay in milliseconds before the timer's count.


    Set to repeat N times the count


    Set true to repeat the count forever

    .addTo( manager )

    Add this timer instance to a timerManager


    Remove this instance in the next frame


    Active this timer, and start the count or the delay.


    Disable the timer, stopping the count. If you use .start() after .stop() the count will be resumed.


    Reset the timer to the initial state. Values like .time, .loop, .repeat, etcetera will be kept.

    .update( delta, deltaMS )

    The update method, you don't need to use this method, the manager will do this internally.


    npm i pixi-timer-events

    DownloadsWeekly Downloads






    Unpacked Size

    31.1 kB

    Total Files


    Last publish


    • avatar