The best method for improving the performance for multiple-images application

Phaser 3
1

Hello,
Due to high GPU usage(~35%) and a lot of images(± 150) to be set per scene, I need to ask you about the best way to deal with multiple objects that aren’t the same. While testing the project I figured out that my application uses a lot of resources. GPU spikes sometimes to 95%, and I have ± 1gb of memory allocated in GPU. I believe I’m doing something wrong.

In my scenario, I have ± 600 objects that are used across the application. Each of them has a unique image and unique events, but it doesn’t have any physics or animation. I wonder what can I do to improve my performance. I’ve read a lot of topics, but I have some concerns:

  1. I’ve read a topic ( What is the difference between an Image and a Sprite in Phaser 3? - Stack Overflow ) where they explain that it is better to use add.image instead of add.sprite. While testing I didn’t notice any performance improvements. Is this true? Maybe there’s a different, better way of adding images?

  2. I’ve read that the best method for loading images is putting them in preload. I can’t do this. In my case, I’m downloading them dynamically based on the response from the API, so I don’t know what should I load at the very start. What is more, on scene switch I’m using completely different images and I don’t want to load the images that aren’t required. Because of these two rules, I can’t use the atlas.

What’s the best method for handling such a situation? I see two scenarios:
a) get the list from the API, download images manually via JS, and then trigger reload on Phaser(so it’ll get them from the cache)
b) get the list from the API, then pass the list to the Phaser and download/load them dynamically
Which of them is better? Maybe there’s another approach?

  1. I’ve noticed a lot of GPU memory usage. When I switch to canvas it decreases in half, but it decreases the quality of images while moving across the scene. Is there anything I can do about this problem?

  2. My background is png graphic which size is ± 4096x4096px. I’ve read a thread ( Any "magical" performance settings? - #5 by kittykatattack ) where they suggest using a transparent canvas. I can’t do that; my application is supporting zooming in/out and it would cause a lot of problems. Is there anything new about this problem after 2 years?

  3. What’s the best communication method between JS(React/Angular) and Phaser in terms of performance? Injecting a corresponding class, passing data through events, or RXJS subjects?

  4. Is add.text performance hit is still a thing?

  5. Is there something that I should check that may help me in terms of optimization? Tools, techniques or articles?

Best regards,
Luke

2

There is a Phaser + SpectorJS debug build. See notes in v3.60 change log.

If possible you might try:

  • creating spritesheets or atlases dynamically
  • removing textures never used again
  • culling objects in camera view
  • moving UI images out of Phaser
  • using bitmap text