I am currently migrating a game from flash to Phaser 3. The game was originally 800:600, but I wanted to be able to resize it which compromised the assets quality (when upscaling).
After trying many complicated things I came up with the idea of creating an initial game scale config of 1600:1200, so as a user I would generally want to upscale it just a little, or downscale it which wouldn’t affect the quality.
This worked flawlessly.
The problem is than I’m facing some performance issues now and I am wondering if this could be one of the causes.
The assets are the same they were before, for example if I had to scale an image by a factor of 0.3, now I have to use a factor of 0.6.
It’s hard to say what specifically is causing your issue without looking at your code. But in general, you are now rendering 1.9M pixels, up from your original size of less than 0.5M.
I understand that I’m rendering many more pixels, but is there a way to process less pixels if you don’t need all of them? For example, if the user is not on full screen mode, this may be performing unnecessary calculations. But any other solution I tried didn’t work very well when upscaling.
You’re processing the pixels you’ve defined in the width and height of your game config. Even the ScaleManager just scales the canvas by CSS; the canvas element doesn’t change dimensions.
You could get the screen/window/client width and height prior to initing your game, and base your game config and the assets you load based on that. You’d also need to use percentages (or anything besides hard coded pixel values) for game object positioning, sizing, tweeting, etc.
It is an interesting solution, but that can cause new issues if the user resizes the window after the game is created.
Anyway, I found this solution (to initialize the game bigger) to work very well until the game got really loaded with sprites and animations. So I am not sure if this is the real cause of my loss of performance.