如何正确渲染效果最好的html5帆布游戏

我希望我的英语足够好。如何正确渲染效果最好的html5帆布游戏

问题： 我正在开发一些帆布游戏，使用context2d。我做了一次性能测试，看看画布渲染效果如何。对于绘画，drawImage方法与一些预先加载在内存中的50x50 jpg一起使用。

我的测试是实例化很多逻辑正方形50x50物体，在画布中随机移动而没有碰撞只是看fps。

主循环完成间隔。

这个问题，我注意到当屏幕上有大约3000个随机50x50时，低fps，以及我知道你渲染得越多，帧率越低。但我想问一些问题。

问题：

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

希望你们了解问题和问题。渲染替代品？一些逻辑技术来实现这一点，而不是渲染每个对象？

来源

2011-08-08 zebnat

看看这个线程的一堆 ## [帆布最佳实践，提示和优化技术，以提高性能]（http://stackoverflow.com/questions/8205828/html5-canvas-best-tips-tricks - 和 - 编码最佳做法/ 8485927＃8485927）*添加任何你可能看不到* :) – jaredwilli

我明白你在问什么，你问的也许你应该尝试和渲染碰撞，所以你不必画两次。坦率地说，我认为你最好在第一个平方上绘制第二个平方，然后我会告诉你为什么：

你的逻辑可能会采取更多的行动来确定重叠和绘图的数量更复杂的形状，然后实际绘制它。

所以在我看来，你最好在而不是测试碰撞在这一个。

人，纠正我，如果我错了。

来源

2011-08-08 18:39:15

我没有使用drawImage（只是笔画），但只要他不使用谷歌的excanvas在IE上，你似乎是对的。 IE上的某些操作非常昂贵，因此您必须对此进行较窄的测试。 – ccoakley

感谢Rikudo的回复。我在这里问过是因为一些伴侣告诉我要做逻辑的东西，我告诉他现在跟你说的一样，也许这个逻辑需要更多的时间来处理。我不够疯狂，在屏幕上渲染大量不可碰撞的物体，但嘿，谁知道！让我们看看其他答案和谢谢 – zebnat

绝对只是绘制。 bitblt（像素副本）经过优化，肯定比精灵之间的碰撞逻辑更快。但是，有一个例外可能是测试离屏精灵。这是一个快速测试，因为您只是检查屏幕边界，也就是说，如果精灵离开屏幕。如果你有超过10,000个精灵，而且大部分时间都在屏幕外 - 例如放大时 - 那么测试是值得的。如果他们总是在屏幕上，那么就画画。

来源

2012-05-24 04:52:12

如何正确渲染效果最好的html5帆布游戏

回答

相关问题