Jump to content

Best performance techniques with pixi


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...