What is the best way to implement pixi.js game/app loop?

[Gorgi Kakasevski]

Hi everyone. Although I found many articles about game loop, requestAnimationFrame, delta time etc. I want to ask you here what is the best way to implement it. As a "game loop" I understand the code which should execute several times per second non-stop, even if a user switch between the tabs in the browser. I found this library https://github.com/kittykatattack/smoothie, in which you can specify your frame rate which is independent from requestAnimationFrame, but update() function stops when user switch between tabs.

Any help, recommendation, or a plugin for best solution?

p.s. Simple example will be great.

[ivan.popelyshev]

That's true for anything that is based on requestAnimationFrame. I forgot where I saw setTimeout implementations ;(

[Exca]

Easies way is to use the ticker.

https://github.com/pixijs/pixi.js/blob/dev/src/core/ticker/Ticker.js
http://pixijs.github.io/docs/PIXI.ticker.html

[ivan.popelyshev]

@Exca which also uses RAF

[Fatalist]

1 hour ago, Gorgi Kakasevski said:

but update() function stops when user switch between tabs.

If that's your problem, this thread may help - 

 

[Gorgi Kakasevski]

On 8/11/2016 at 2:28 PM, Exca said:

Easies way is to use the ticker.

https://github.com/pixijs/pixi.js/blob/dev/src/core/ticker/Ticker.js
http://pixijs.github.io/docs/PIXI.ticker.html

 

On 8/11/2016 at 2:34 PM, ivan.popelyshev said:

@Exca which also uses RAF

As I saw its implementation is based on RAF. I try it with simple example and the animation is stopped when I change the tab:

ticker.add(function (time) {
        console.log(z++);        
        drawBackground();
        renderer.render(stage);
});