Question

我正在使用HTML5画布开发游戏，因此我使用requestAnimationFrame调用游戏循环。当我使用Chrome或IE时，它工作正常，稳定60 fps并且应该平滑。我在Firefox上运行时会出现问题。 FPS计数器超过60 fps（大约65-70）并且游戏体验根本不平滑。如果它实际上超过60 fps，我想我可能会丢失一些帧。这是我用于游戏循环的代码：

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60); 
    };
})();

    gameloop=function(){
       //Here I do my calculations and drawings

       //I do this to calculate FPS
       thisLoop=new Date;
       var fps=1000/(thisLoop-lastLoop);
       lastLoop=thisLoop;

       requestAnimFrame(gameloop());
    }

你对此有解释吗？这可能是正常的，但我玩其他游戏，他们似乎在firefox上似乎没有这样的行为。

我尝试了这个解决方案：

http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

但最终结果是一样的。

Answer 1

requestAnimationFrame(gameloop());

是吗？这意味着你在将其返回值（null）传递给requestAnimationFrame之前，从自身调用游戏循环并等待它完成（这将永远不会发生）。您的游戏将尽可能快地运行，永远不会屈服于UI。

Answer 2

requestAnimFrame(gameloop());

这是您的错误，这不是回调，您只是直接调用该方法。

requestAnimFrame(gameloop);

这会向rAF发送实际的游戏循环函数来调用。

Firefox 19：使用requestAnimationFrame和HTML5 canvas进行帧率不稳定。 FPS超过60

2 个答案: