TilingSprite and general performance problems

[LaczkoUr]

First of all I'd like to thank the pixi.js team for doing such a great job to the renderer in the past few months.

I'm getting close to releasing my app but while testing it on an Iphone 4 I noticed that it ran horribly on ~5 fps.

I was using an old, january version of pixi.js so I thought I'd give it a shot and download the latest one and the game instantly jumped to ~26 fps!

 

Now that's an incredible amount of jump and getting the canvas to render 5 times faster is awesome, but the game is still a bit slow to me!

 

The game has been dumbed down a few times graphically and it's pretty well optimized so I don't see any other way of improving it unless there's some trick with the TilingSprite-s. The reason I'm suspecting that the TilingSprite-s are behind this problem will be explained by these screenshots below that I made on an Iphone 4 using CocoonJs launcher:
(Please note that these images are a level of intellectual property.)

 

The 1st image is the actual game running using all the layers/TilingSprite-s/graphics. ~26 fps

The 2nd image has 2 TilingSprite layers - forest (1024x256) and hills (512x128) - removed. ~43 fps (+17)

The 3rd image has (all) 3 TilingSprite layers - forest, hills and grass (64x16) - removed. ~61 fps (+18)

 

Removing two, huge layers yielded basically the same result in improvement as removing the last, tiny horizontal TilingSprite layer, the grass. So the game runs absolutely smooth when there are no TilingSprite-s present at all, but even when a single, small one is introduced, the fps will drop considerably.

 

Is there a way to optimize these TilingSprite-s or any alternatives to them?
I'm definitely not aiming to get 60 fps on such an old device as an Iphone 4, but I'd be content getting 40 using all the assets.

 

Thanks in advance!

[agamemnus]

* Make sure, if you're using a canvas renderer, that you aren't clearing the image every time but instead just drawing over -- when making a new canvas renderer, set the renderer's "clearBeforeRender" option to false.

 

* Try to composite multiple images that don't change into one.

 

* One thing you can try is to reduce the texture/image size. If your texture/image size is too big (doesn't fit in the gpu texture memory), your draw calls are liable to keep going back and forth between the CPU and the GPU.