Pixi.js "merging", "layers", mobile performance?

[Schoening]

I used canvas for a performance test on a few older devices and got abysmal performance.

So instead of wasting a lot of time on canvas optimization I thought I give Pixi.js a try. 

 

In my game you kill a lot of enemies. And I am going to re-use the dead sprites to avoid the Garbage Collector. 

However the enemies are supposed to leave corpses. It is a very essential part of the gameplay! 

I was thinking of using multiple canvases and simply rendering the dead sprites once onto the background canvas. 

 

Now I need good ideas how to do this with Pixi.js

I would also like a parallax background.

Basically 3 layers: 

• Parallax background layer.
• Middle layer that stores the "corpses". These corpses are immovable. And it would be great if you can tell me they can be rendered into one file to drastically reduce draw calls.
• Front Layer. Player and Enemies jumping around

Could I get some guidance, sensei?

 

Edit: Of course I would like to have my game as widely available as possible. How far does Pixi.js go back? Any statistics?

[hubert]

Yes you can,

 

redner to texture is what you are looking for, with this you can render many elments (sprites graphics etc) into one texture and use it agian as "one",

 

my sugesstion for you is to use a separate displayObject Container and render everything into it. Then you can move the display object container with one sprite insteda of having a display object container with many dead bodies.

 

Please refer to this in order to see working code examples:

 

Rendering

http://www.html5gamedevs.com/topic/6507-display-object-container-to-an-imagesprite/#entry38726

 

 

Trimming the element in newer pixi versions

http://www.html5gamedevs.com/topic/8613-upgrading-to-pixi-160/#entry51302

 

I hope this helps you!

 

 

http://www.sevenative.com

 

https://play.google.com/store/apps/details?id=pl.com.wojciak.kontakt.new_words

[Schoening]

Thank you I try that out!