如何正确呈现具有最佳性能结果的html5画布游戏

时间:2011-08-08 18:33:01

标签: html5 canvas

我希望我的英语足够好。

问题: 我正在使用context2d开发一些画布游戏。我做了性能测试,看看画布渲染效果如何。 对于绘画,方法drawImage用于在开始时预装在内存中的一些50x50 jpg。

我的测试是在画布中实例化大量随机移动的逻辑方块50x50对象 没有碰撞只是为了看到fps。

主循环是以间隔完成的。

问题是,当屏幕上有大约3000个随机50x50时,我注意到低fps,我知道渲染的越多,帧率就越低。但我想问一些事情。

问题:

一个好主意是单独渲染画布屏幕中的每个逻辑对象吗? 例如,在没有碰撞的情况下,如果我在相同位置或几乎相同的位置重叠两个50x50,则可见输出小于(50·50)2像素,但我使用(50·50)2像素绘图主循环中每个元素的drawimage。

希望你们了解问题和问题。 渲染替代品?一些逻辑技术可以实现这一目标,而不是单独渲染每个对象?

2 个答案:

答案 0 :(得分:1)

我理解你在问什么,你问的是,你应该尝试渲染碰撞,这样你就不必画两次了。坦率地说,我认为你最好只在第一个方格上画第二个方格,我会告诉你原因:

您的逻辑可能需要采取更多措施来确定重叠量并绘制更复杂的形状,然后实际绘制它。

所以在我看来,你最好还是测试这个中的碰撞。

人们,如果我错了,请纠正我。

答案 1 :(得分:1)

绝对只是画画。 bitblt(像素副本)经过优化,肯定会比sprite之间的碰撞逻辑更快。但是,一个例外是可能测试屏幕外的精灵。这是一个快速测试,因为您只是检查屏幕边界,也就是说,如果精灵不在屏幕上。如果你有10,000多个精灵,而且很多都是在屏幕外 - 例如放大时 - 那么测试是值得的..如果它们总是在屏幕上,那么就画画。