Phaser 3 Performance Issues

Phaser 3
1

Hi All,

We’ve created a game using Phaser 3 and have released in the android market using ionic / cordova.

However, a big mistake we’ve made was that we’ve set the resolution of the game to be too high,
naively thinking that there must be an easy way to scale down the game from a high resolution.
Unfortunately, we didn’t find any yet and even though the game is doing fairly well for users with high end phones.
the game is having performance issues in low end mobile phones.

We would like to ask for some wisdom into ways we can improve performance.

Currently, the game is using 540 * 960 resolution and textures.
I’ve tried using the scale: { zoom: 2} setting to try to reduce the rendered resolution, but it didn’t seem to have much impact on performance.

Our last resort would be to try to reduce the resolution to something like 540 * 960
but for now we can’t find an easy way to do that without having to fix the position and size of all the assets in the game.

in the worst scenario, I’ll be manually changing all the layout again,
reducing all the images/sprites/spine files to half manually…

however, the ideal solution would be to be able to provide high resolution for high end or tablets and PCs,
but then a lower resolution for low end mobile phones.

We are in the process of merge a lot of little icon images and sprites with texture packer,
but am confused what would be to the best way.

a. Would it be better to have everything in one sprite sheet? (but that would make that texture extremely big)
b. or better to set maximum to for example 4096*4096 and then have it make it into multiple png files
c. or make textures altases based on scenes.
overall we would like to improve loading speed, but also reduce memory use.

Although some assets are used through out the game,
there are lots of spine assets and sprites/images that are only used in a specific scene…
if any body has a good strategy to what we should do to reduce memory use per scene we would be most grateful!

Thank you all for caring!

2

You should check where the performance issues happen, use Browser F12 > Performance to detect bottlenecks. And view Memory usage.

Or better add some simple performance time measure in your code and detect exactly the problem:

const p1 = performance.now()
// code to check
const p2 = performance.now()
console.log('perf', p2 - p1)

Some things, like text (not bitmapText), need more render power, try to pre-render them on game start/load and add them to a renderTexture.

When you create and destroy many objects/images, you can destroy them async later. (only if memory is not a problem).

Common tips:

P.S. see now that this is 2 years old :wink:

1 Like