Search code examples
javascriptframe-ratepixi.js

PixiJS - Setting a Fixed Frame Rate


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.


Solution

  • 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;
    });