我正在使用 HTML5 Canvas 和 JavaScript 开发游戏。初始 fps 还不错,但随着游戏的继续,fps 会下降。初始 fps 约为 45 fps,但后来降低至 5 fps。
以下是我的游戏循环
var last_draw = Date.now(); //To track when last time GameDraw was called last time
var fps;
function gameloop()
{
var elapsed = Date.now() - last_draw;
last_draw = Date.now()
fps = 1000/elapsed;
context.clearRect(0,0,canvas.height,canvas.width);// This function clears the canvas.
GameUpdate();// This function updates property of all game elements.
GameDraw(); //This function draws all visible game elements in the canvas.
window.requestAnimationFrame(gameloop); //Requests next frame
}
window.requestAnimationFrame(gameloop);
它已在以下浏览器中对此进行了测试:
- Mozilla 火狐浏览器 32.0.3
- 谷歌浏览器 38.0.2125.101 m
我的问题是:
- 为什么随着比赛的进行,rAF 调用它的频率会降低?
- 是否是由于内存泄漏?
- 是否是因为 GameDraw 和 GameUpdate 花费的时间非常长?
- 执行 Gamedraw 函数的时间与在 Canvas 中实际绘制元素所花费的时间不同。 Gamedraw调用每个游戏元素的draw函数。
最佳答案
您会发现很多有关优化 Canvas 性能的在线教程。这与使用这个或那个函数无关,而是与每两帧之间发生的处理量有关。
由于您的问题无法有一个可靠的答案,我将简要回答每个子问题:
Why rAF is calling it less frequently as the game continues?
就像你在下一个问题中猜测的那样 - 有些东西正在泄漏:它可能是任何东西,比如说,在每个周期中添加更多纹理、事件监听器、DOM 对象等......到简单地堆积太多 JS 对象因为它们仍然被引用,所以垃圾收集器无法删除它们。但最重要的是,您需要发现每两个帧之间正在变化/增加的内容。
Is it due to Memory leak?
很有可能,而且很容易测试。在 Chrome 中,Shift+Escape 打开任务管理器,您可以在其中查看每个打开的选项卡的内存、CPU 等使用情况。监控。
Is it because time taken by GameDraw and GameUpdate is very high?
绝对是这样!这也可能导致内存泄漏。学习做CPU和canvas分析,会对你有很大帮助。我相信 Chrome 中的 Canvas 分析仍然是一个实验性功能,因此您需要首先从配置标志中启用它。这两个函数是 99% 的延迟的来源,调查一下那里发生了什么。
Is time to execute Gamedraw function is different from time taken to actually draw elements in canvas. Gamedraw calls draw function of each game element.
这应该不重要,因为它们都是阻塞代码,这意味着一个只会在另一个之后发生。渲染一帧的时间大致是两者的总和。同样,适当的 Canvas 渲染优化可以在这里创造奇迹。
关于javascript - HTML5 游戏刷新率与 requestAnimationFrame,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26325608/