Sign in to follow this  
kazoo

Performance Tips

Recommended Posts

What are some general performance tips that you would have for newcomers to Pixi? Also what should we really take care of if we want to avoid memory leaks, performance issues, etc. I currently destroy all graphics objects, sprites and textures that I use. I also take care of the stage and the renderer. Also I store references to dynamically created objects in arrays and then clear them afterwards when I need to. However I still see small memory leaks here and there. I use chrome dev tools to identify the leaks..

Also, consider this scenario. I have two pages, and on both of them I have a Pixi canvas with some stuff being drawn. When switching from page 1 to page 2, the whole page 2 throttles, until the Pixi canvas is loaded, although this is just a guess for now. However when I remove the Pixi canvas the page loads, fast, normal.. I am just asking this vaguely, since I haven't looked at what might be causing the issue yet, but I want to have some more input before I start. I do draw around 100+ different graphics elements on the second page.. Are there any ways to improve this loading, rendering time of the second canvas? Also I am running this on a 3rd party device, and that's why I need to be very conservative with memory and performance. When running on PC, I do not see performance issues, however the device is also really powerful, so I would not say this is a hardware limitation.

Share this post


Link to post
Share on other sites

First of all, I'm talking about pixi-v4 (https://github.com/pixijs/pixi.js/tree/dev)

The most optimized part of PIXI is Sprite. Also its not required to destroy sprite, because its not holding any resources on it, its very light object. Also, all graphics that have only one rectangle are treated as sprites, and that way they are rendered faster. I recomment to use "renderer.generateTexture(graphics)" if you have only a number of different graphics objects. That way you convert them to sprites and they are much faster.

There's a good strategy if you are switching between a number of scenes: create loader for every scene, so when it ends you can just iterate through its textures and destroy them all. Dont forget to destroy dynamic textures you did create. If you want to see if you forgot to remove something, look in PIXI.utils.TextureCache, it contains all static that was not destroyed.

I recommend to turn on PIXI GC: do renderer.textureGC.run() periodically or set it to auto mode. Please look at the sources to see how it works and which parameters it has.

Share this post


Link to post
Share on other sites

Ivan, any way you can help me with this, it's kinda specific, but I need to understand how to make it more performance efficient. Here is a jsfiddle, https://jsfiddle.net/h3gswp76/. It has no visible output, just the js code for the sake of easier formatting there, than here on the forum. What that function does is that it creates an initial element, makes a sprite out of it, then repeats it x amount of times and creates another sprite out of the whole bunch of those elements, essentially creating a list, which is actually a single sprite. I then use a 3rd party library to slide that long list of elements, etc. 

The issue is that on mobile, that function executes in about 2-3 seconds, which is way too slow, since when I navigate to the page which executes this function the whole page hangs until it creates this sprite. Is there anything I can do to improve this process that I have here, to make it faster? 

I also omitted the part where I also add text elements within this function, just to make it more concise, but I guess that text creation also adds to the performance issue, so I would need a solution to that too.

 

Share this post


Link to post
Share on other sites

If you mean by an animation cycle, then no, it just goes through the function once, and that's it. It takes 2 seconds for just the function to finish, which is too slow. So it goes, like this, I press a button on a page which is supposed to navigate me to another page. When I press that button, I wait 2-3 seconds and only then does the second page with the canvas display. It hangs, 2-3 seconds just waiting for this function to execute.

Share this post


Link to post
Share on other sites
1 minute ago, kazoo said:

If you mean by an animation cycle, then no, it just goes through the function once, and that's it. It takes 2 seconds for just the function to finish, which is too slow. So it goes, like this, I press a button on a page which is supposed to navigate me to another page. When I press that button, I wait 2-3 seconds and only then does the second page with the canvas display. It hangs, 2-3 seconds just waiting for this function to execute.

You dont even know exact time that functions takes. Please look how much time it spends in your cycle (for i=0;i<96) and how much time it spends after it

Share this post


Link to post
Share on other sites

I do know, I use performance.now() to measure the time it takes to execute, and I use the chrome profiler. On PC, it's pretty fast, performance.now() measures it at 51.12ms, while the profiler measures it at 14.3 ms. However when I run this on a 3rd party device, which is my final target, the measurement at performance.now() is at 2132.29ms. I can't get the profiler info on the device tho.

Share this post


Link to post
Share on other sites
4 hours ago, ivan.popelyshev said:

There's a good strategy if you are switching between a number of scenes: create loader for every scene, so when it ends you can just iterate through its textures and destroy them all. Dont forget to destroy dynamic textures you did create. If you want to see if you forgot to remove something, look in PIXI.utils.TextureCache, it contains all static that was not destroyed.

Hi Ivan,

Little offtopic here but wanted to ask for some help with optimization techniques when switching scenes. So in my project I have 4 scenes, main game and 3 bonus games. Right now it works this way that on startup game loads all the images for all the scenes, so TextureCache is constantly filled with textures for all scenes. Moreover I initialize all the scenes on startup, so later I just show/hide the Containers when I need to switch to another scene. Is it a normal way of doing things? The problem here is also that switching between scenes happens quite often, and loading time between those is not something I can afford. Any advice on improving the situation, as right now I feel like I am doing smth completely wrong?

Btw appreciate all your work on Pixi, really great job, thanks :)

Share this post


Link to post
Share on other sites

@Zenext thank you!

You have to calculate how much memory all your scenes cost. Just assume that each pixel in texture costs 4 bytes. If that number is small, well, you dont have to GC static stuff. Just destroy() dynamic textures and Text objects.

And even then you dont have to worry about it if you just do "renderer.textureGC.run()" periodically. @GoodBoyDigital said they do exactly that in new games on pixi-v4.

If all your scenes consume ~500MB memory, well, then I recommend to unload some scenes. Just remove all texture and create loader for the scene again.

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.