6

As the title says, how do you set a fixed frame rate of 25 fps for PixiJS?

Here is my setup:

g_App = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
document.getElementById("canvas-div").appendChild(g_App.view);

I do not want to do any more frames than that.

Rewind
  • 2,554
  • 3
  • 30
  • 56

3 Answers3

1

After @wavemode's comments about PixiJS using requestAnimationFrame I think I may have to do the following. (Note: if there is a better solution, please post it, otherwise I will mark this as the answer.)

Basically, stop any animation if we are exceeding the frame rate.

var g_TICK = 40; // 1000/40 = 25 frames per second
var g_Time = 0;

Then later on when we set up the animation:

// Listen for animate update
g_App.ticker.add(function (delta) {
    // Limit to the frame rate
    var timeNow = (new Date()).getTime();
    var timeDiff = timeNow - g_Time;
    if (timeDiff < g_TICK)
        return;

    // We are now meeting the frame rate, so reset the last time the animation is done
    g_Time = timeNow;

    // Now do the animation

    // rotate the container!
    // use delta to create frame-independent tranform
    container.rotation -= 0.01 * delta;
    g_Bunny0.x += 1;
});
Rewind
  • 2,554
  • 3
  • 30
  • 56
  • 2
    Doesn't this only set the frame rate of the animation? What about rendering of the canvas? Doesn't it still have 60FPS? – demiculus Nov 07 '18 at 05:21
1

You can change the maximum FPS of the application like this:

g_App.ticker.maxFPS = 25;

(The maxFPS needs to be higher than the minFPS value)

Xelun
  • 11
  • 3
-3

25 FPS is 40 milliseconds per frame. So, every frame, you should be calling

setTimeout( myRenderFunction, 40 )

if you want the screen to update 25 times per second.

wavemode
  • 2,076
  • 1
  • 19
  • 24
  • This does not use the normal `g_App.ticker.add(function (delta) {/* My animation here */});` way of things. So what do I put in myRenderFunction to actually paint the canvas in the PixiJS environment? – Rewind Apr 14 '17 at 18:15
  • @Rewind `myRenderFunction` should contain everything in your game's loop. The Pixi.JS Ticker uses `requestAnimationFrame` which will always run at the refresh rate of your monitor (probably 60 fps). If you want 25 then you have to manually draw at 25 fps with `setTimeout` or `setInterval`. – wavemode Apr 14 '17 at 18:22
  • What do I call in myRenderFunction to actually draw the PixiJS scene? How do I stop PixiJS automatically doing its own thing and drawing the scene outside of setTimeout? – Rewind Apr 14 '17 at 18:35
  • @Rewind From the API I see that the PixiJS Renderer still uses requestAnimationFrame. So actually I don't think you would be able to draw at 25 fps after all. – wavemode Apr 14 '17 at 18:50