AnimationLoop is a plugin for Pixi.js v3.0.8 or higher to manage the animation frame, doing the basic time operations, like calculate delta, total time, start/stop loop, and more.
npm install pixi-animationloop
If you use Browserify or Webpack you can use pixi-animationloop like this:
var PIXI = require('pixi.js');
var AnimationLoop = require('pixi-animationloop'); //AnimationLoop is added automatically to the PIXI namespace
//create PIXI renderer
var renderer = new PIXI.autoDetectRenderer(800,600);
document.body.appendChild(renderer.view);
var animationLoop = new PIXI.AnimationLoop(renderer);
animationLoop.start();
var renderer = new PIXI.autoDetectRenderer(800,600);
document.body.appendChild(renderer.view);
var animationLoop = new PIXI.AnimationLoop(renderer);
animationLoop.start();
AnimationLoop extends from PIXI.utils.EventEmitter, and emit four events: start, stop, prerender, postrender and visibilitychange. More info: Node.js Events
animationLoop.on('start', function(){
console.log('onStart');
});
animationLoop.on('stop', function(){
console.log('onStop');
});
//Before the renderer.render(stage) function
animationLoop.on('prerender', function(){
console.log('preRender', this.delta);
});
//After the renderer.render(stage) function
animationLoop.on('postrender', function(){
console.log('postRender', this.delta);
});
//when the visibility change, for example, when the user move on to other browser tab.
animationLoop.on('visibilitychange', function(isHide){
//the param isHide is the state of the tab
console.log('visibilityChange', isHide);
});
The constructor
Pixi.js renderer
Pixi.js container used as stage
Total game time in seconds (stop the animation loop stops the time)
Real time in seconds, since the first start
Delta time in seconds
Delta time in milliseconds
Set the time speed (like 0.5, 1.5, 2, ...)
Delta time can't be higher than maxFrame (in seconds)
Request animation frame ID
Used internally to know the state of the loop
Stop the animation loop when the user move on to the other tab, when the user comes back the game will be resumed. (false by defult)
Start or resume the animation loop, emit the 'start' event
Stops the animation loop, emit the 'stop' event