Performance question

[maitrungduc1410]

Hi everyone, I have a question, I think there maybe a question like mine posted somewhere, I tried to find but can't have a good answer.

In my scene, I have a lot of picture, I use Sprite.fromImage to load those picture instead of PIXI.loader because my pictures don't load at the first time.

Because of many pictures, so my scene has very low FPS, I think it probably because I load directly raw picture from path. Does anyone know can advise me anyway to fix this.

 

Thank you!

[Exca]

One way to optimize drawing of lots of different images is to store them in a spritesheet. That way you will use only one basetexture instead of multiple ones. That allows the images to be drawn in a singe batch instead of swapping textures every time image is drawn.

[maitrungduc1410]

I heard about it but I don't know how to apply it, can u give me a small instance? Thank you

[Exca]

Here's a good source of info on spritesheets in pixi. A tutorial using texturepacker https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs

Basically what you do is use a tool that packs all your images into a single file + a file telling where each image is on that sheet. Then you load that configuration file (json in most cases) and use the textures/sprites from that sheet instead of an image.

There are a lot of free tools also available, but I've been really happy with texturepacker so I dont really know about what's the best free one.

[maitrungduc1410]

Oh, I see, after reading your link, I see how they want to do , but in my case, I'm not building a game, I'm building a tool for create chatbot, Images will be added by user and then rendered on scene, those images are dynamic, means it will change (not every frame, just when user click to change to other image). So I wonder does the SpriteSheet can help this case?

[ivan.popelyshev]

Whether you use Sprite.fromImage or many individual Loaders, you have to be aware of texture cache, you have to read source code, for example "fromLoader" method in Texture.

As for performance, look athttps://github.com/eXponenta/gstatsjs  , if it shows under 100-150 drawcalls then you're fine. However there are also framebuffer switches for filters, fragment fillrate on slow videocards, there are many things that cant be explained in a few sentences.

There's no book on performance in pixi, so its not possible to teach someone how to make his app fast if he doesn't provide his case.