PixiJS - 设置固定帧率

Question

正如标题所说，如何为PixiJS设置25帧/秒的固定帧率？

这是我的设置：

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

我不想做更多的帧。

Answer 1

25 FPS 是每帧 40 毫秒。所以，每一帧，你都应该调用

setTimeout( myRenderFunction, 40 )

如果您希望屏幕每秒更新 25 次。

Answer 2

在@wavemode 关于使用 requestAnimationFrame 的 PixiJS 的评论之后，我想我可能必须执行以下操作。（注：如果有更好的解决方案，请post吧，否则我会标记为答案。）

基本上，如果我们超过帧速率，就停止任何动画。

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

稍后我们设置动画时：

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

Answer 3

您可以像这样更改应用程序的最大 FPS：

g_App.ticker.maxFPS = 25;

（maxFPS需要高于minFPS值）

PixiJS - 设置固定帧率

PixiJS - Setting a Fixed Frame Rate

javascript

frame-rate

pixi.js