1

我正在用画布元素用 HTML5 制作一个小游戏。它在大多数计算机上运行良好，但在其他计算机上却落后。但是，它不会跳过帧，它会继续渲染每一帧并且游戏会变慢。我正在尝试编写一个跳过帧的函数，但我想不出一个公式来做到这一点。

我试过四处寻找，但我什么也没找到。

我有一个渲染游戏的函数叫做渲染，它在这样的循环中：

var renderTimer = setInterval("render(ctx)", 1000/CANVAS_FPS);

render()
{
/* render code here */
}

谢谢你的帮助，布兰登·菲佛

4

2 回答 2

1

此模式将允许您在已知速度较慢的计算机上跳过帧

var isSlowComputer=true;
var FrameSkipper=5;

function render(){

    // if this is a slow computer
    // just draw every 5th frame
    if(isSlowComputer && --FrameSkipper>0){ return; }

    // reset the frame skipper
    FrameSkipper=5;

    // draw your frame now

}
于 2013-03-17T05:46:20.077 回答
0

如果您的目标市场是使用支持 HTML5 的浏览器的人，您可以只使用 window.requestAnimationFrame。这允许您将所有渲染逻辑绑定在一个简单的地方，并且只有在必须时才会减慢速度。它将努力达到每帧分配 16 毫秒，从而使您达到 60 fps。

var canvas = document.getElementById("#canvas"); (function drawFrame(){ window.requestAnimationFrame(drawFrame, canvas); // your main code would fire off here }()); 只要您让浏览器计算出您的帧速率，您就可以了。

我之前用画布写过一些不同的体验，在我使用 requestAnimationFrame 之前，事情有点不稳定。

要记住的另一件事是双缓冲区。如果您要在任何给定时刻在屏幕上写很多东西，我发现将它们全部写到第二个隐藏的画布元素中会更容易，然后只需使用它就context.drawImg(buffer,0,0);可以摆脱很多麻烦。只要您认为通过画布的代码即使在很多压力下也不应该变得不稳定。

祝你好运

于 2013-03-17T07:18:16.370 回答