pixi-timer

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

Installation

npm install pixi-timer

Usage

Browserify - Webpack

If you use Browserify or Webpack you can use pixi-timer like this:

var PIXI = require('pixi.js');
var timer = require('pixi-timer'); //pixi-timer is added automatically to the PIXI namespace
 
//create PIXI renderer
var renderer = new PIXI.autoDetectRenderer(800,600);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
 
function animate(){
  window.requestAnimationFrame(animate);
  renderer.render(stage);
  PIXI.timerManager.update();
}
animate();

Prebuilt files

var renderer = new PIXI.autoDetectRenderer(800,600);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
 
function animate(){
  window.requestAnimationFrame(animate);
  renderer.render(stage);
  PIXI.timerManager.update();
}
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);
document.body.appendChild(renderer.view);
 
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
});
 
animationLoop.start();

Events

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)});
 
timer.start();

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)});
 
timer.start();

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)});
 
timer.start();

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
  }else{
    console.log('end');
  }
});
 
timer.start();

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)});
 
timer.start();

API

TimerManager

constructor()

The constructor

.timers

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.

Timer

constructor()

The constructor

.time

The timer will count to this value

.manager

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

.active

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.

.isStarted

Return as boolean if the count is started.

.isEnded

Return as boolean if the count is ended.

.expire

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

.delay

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

.repeat

Set to repeat N times the count

.loop

Set true to repeat the count forever

.addTo( manager )

Add this timer instance to a timerManager

.remove()

Remove this instance in the next frame

.start()

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

.stop()

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

.reset()

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.