kineticjs图层重绘优化 [英] kineticjs layers redraw optimization

问题描述

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

background: i am developing a real-time multiplayer html5 canvas game using kineticjs which primarily will be played on MOBILE PHONE BROWSERS. There's a lot going on in the game such as socket communication with the server every second, redrawing and animations using kineticjs based on the server response and all this on top of a heavy graphic interface. The game functions well in desktop browsers however is SLUGGISH on mobilephones. So, I need to find all the ways in which the code can be optimized.

我的问题，

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

1. lets say I need to redraw a particular part of the screen based on a server response that I just received from server, should I keep these need-to-be-redrawn elements in a separate layer, so that I need to redraw fewer elements. As in my case I need to redraw ever second, will this lead to performance improvement?

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

If the answer to the above is yes, then what is the optimal number of layers in which I should divide my layout. I ask this because I have a lot of different parts on the screen that need to be redrawn based on different server responses (although not all at the same time), if all these need to be put in separate layers, I need to know how far I can stretch the logic above, for example can I have 10 different layers without sacrificing the performance which is the aim of all this exercise anyway.

推荐答案

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

Eric Rowell (creator of KineticJS) has done some stress tests here: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

他说这个：

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

"Create 10 layers each containing 1000 shapes to create 10,000 shapes. This greatly improves performance because only 1,000 shapes will have to be drawn at a time when a circle is removed from a layer rather than all 10,000 shapes."

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

"Keep in mind that having too many layers can also slow down performance. I found that using 10 layers each made up of 1,000 shapes performs better than 20 layers with 500 shapes or 5 layers with 2,000 shapes."

所以你的外卖就是

1. 是，多个画布图层隔离不同的可重绘图组是可行的方法。

1.Yes, multiple canvas layers which isolate different groups of redrawables is the way to go.

并且，

2.为了优化权衡（多个画布的开销与1个画布的简单性），你需要测试在他们将在其中运作的环境中使用您自己的特定代码。

2.To optimize the tradeoff ( overhead of multiple canvas’s vs simplicity of 1 canvas ), you need to test with your own particular code in the environments they will be operating within.

祝您的游戏好运：）

这篇关于kineticjs图层重绘优化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！