Best performance techniques with pixi

[codetemplar]

Hi all,

 

I am about to start developing my first game using pixi. I am fully aware how to use pixi to do everything I need. However, I want to target as many low end mobile devices as possible. Are there any techniques you recommend to get the most out of pixi performance wise. Good and bad practice maybe? Anything notoriously slow like say bitmap text rendering? I've read talk about off screen rendering or atlas sprite batching but not to sure how best they apply to html5 with pixi. I need to support devices with and without webgl support so not sure if that influences any techniques.

Any advice would be greatly appreciated.

 

Thanks for any help.

[tips4design]

The best single advice I can give is, considering you know your algorithms and their time and space complexities, just code the game without worrying to much about performance and once you start seeing performance issues use the amazing Profiler that the Google Chrome browsers offers in their Dev Tools in order to see which functions use most of the running time and try to optimize those.

[ivan.popelyshev]

Atlases. Its very easy, you just pack all your stuff into one or more textures with texturePacker(paid) or shoebox(free). https://github.com/kittykatattack/learningPixi#loading-the-texture-atlas 

[codetemplar]

Thanks both.

 

So if I just use atlases will pixi do all the batch work under the hood? Is there nothing else I should know about like dirty rects? Also I read text is slow to render on the canvas compared to straight Dom text. Is there any truth to this?

 

Thanks again both

[ivan.popelyshev]

1. batching works under the hood. In pixi-v4 if you have up to 8 atlases, whole scene can be batched into one big batch, we use multi-texturing

2. there are no dirty rects in pixi. Yes, it was useful in older engines. No, it's not a bottleneck here.

3. in WebGLRenderer Text texture must be uploaded into GPU after texts renders. In fact, EVERY texture is uploaded into GPU and on slow mobiles it takes time. Its better to pre-upload huge stuff after resource loads but before you start the game "renderer.textureManager.updateTexture(hugeAsYourAssBaseTexture)". You can also delete original texture after that: "hugeAsYourAssBaseTexture.source.src = ''". Don't try to generate many text images every frame.

WATCH FOR MEMORY! Run texture gc periodically, you can set "renderer.textureGC" to automatic mode i dont remember how please look at the docs or in the source code.