Drawing "Fluid" on Mobile Browser Has Critically Low Performance

[Mrandom]

Hi guys, I am working on a game that at some point, I want to pour "water" onto the player. I have problem dealing with large amount of sprites as the performance is really low on mobile browsers.

 

The amount of water to be poured is approximately 8000 pixels in total. Rendering this many pixels all at once will not have a great performance even on a computer browser. I have tried different ways to improve the performance:

 

1. Make the "water" image rather large. For now it is 25x25. The larger the image is, the fewer images are needed to represent 8000 pixels, but the uglier the game becomes. (The player will see large water-color blocks falling instead of water streams)

 

2. Use Emitter to generate "water". But I also need to detect how many water instances passed through a specific point. I do not think emitter has a great accuracy on overlapping event or collision, so emitter was abandoned.

 

3. Treat each "water" instance as a Sprite, creating as many sprites as needed when the game start to pour the water. This is not even acceptable on computers because the performance is abysmal.

 

4. To improve the method above, I create sprites in chunks. With a timer, I can create, say 10, sprites per 1 ms until all sprites are drawn. This significantly increased the performance on computers.

 

5. Shorten the life span of each sprite.

 

6. Use rather light-weighted Arcade physics.

 

Here's a summary of my code:

                        interval = setInterval(function(){				if(game.waterVolume > 0){					for(var j = 0; j < 10; j++){						var type = 'water';						var water = group.create(pos.x, pos.y, type);						water.body.gravity.y = 400;						water.body.velocity.y = 200;						water.lifespan = 500;						water.body.velocity.x = -20;					}					game.waterVolume -= j;									}				else{                                        //a method to clear the interval					self.clearPaint();				}			}, 1);

The performance is still low for mobile browsers. I wonder if there is any other way to improve the performance or any suggestions on dealing with large number of Sprites.

 

P.S.:

I just tried to .destroy() each "water" sprite once its lifespan ends to free up memory. This seems to gave the performance a very slight boost, but still not good enough.