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.
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.
Share Improve this question asked Apr 14, 2017 at 18:01 RewindRewind 2,8145 gold badges35 silver badges63 bronze badges3 Answers
Reset to default 3You 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)
After @wavemode's ments 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;
});
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.