kineticjs图层重绘优化

时间:2013-04-15 09:55:23

标签: html5-canvas kineticjs

背景:我正在开发一个使用kineticjs的实时多人html5画布游戏,主要将在移动电话浏览器上播放。游戏中有很多事情发生,例如每秒与服务器进行套接字通信,使用基于服务器响应的kineticjs进行重绘和动画,所有这些都在重图形界面之上。该游戏在桌面浏览器中运行良好,但在手机上是懒散的。因此,我需要找到可以优化代码的所有方法。

我的问题,

  1. 假设我需要根据我刚从服务器收到的服务器响应来重绘屏幕的特定部分,我是否应该将这些需要重新绘制的元素保存在单独的层中,以便我需要重绘较少的元素。在我的情况下,我需要重新绘制第二,这会导致性能提升吗?

  2. 如果上面的答案是肯定的,那么我应该划分布局的最佳图层数是多少。我问这个是因为我在屏幕上有很多不同的部分需要根据不同的服务器响应重新绘制(虽然不是所有的同时),如果所有这些都需要放在不同的层中,我需要知道如何我可以扩展上面的逻辑,例如,我可以有10个不同的层而不牺牲性能,这是所有这些练习的目的。

1 个答案:

答案 0 :(得分:3)

Eric Rowell(KineticJS的创建者)在这里做了一些压力测试:http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

他说:

“创建10个图层,每个图层包含1000个形状,以创建10,000个形状。这极大地提高了性能,因为在从图层中移除圆圈而不是所有10,000个形状时,只需要绘制1,000个形状。”

“请记住,拥有太多层也会降低性能。我发现使用10个层,每个层由1,000个形状组成,表现优于20个层,500个形状或5个层,2,000个形状。”

所以你的意思是那个

1. ,多个画布图层可以隔离不同的可重绘图组。

2.为了优化权衡(多个画布的开销与1个画布的简单性),您需要在他们将在其中运行的环境中使用您自己的特定代码进行测试

祝你好运:)