Hello, I’m currently trying to figure out the best way to scale my game. I want it to fill the entire window, so I already have that setup. I’ve found a great way to readjust UI using the resize event, but readjusting game elements themselves seems a bit too expensive. I currently have a metric setup. Ten tiles must fit horizontally across the screen. When the window resizes, that metric is rewritten. The problem is that I have to resize every single tile and player/enemy around. It seems pretty expensive and I was wondering if there was another way to get around it???
1 Like
My current plan is to adjust the zoom to make sure the metric fits, and create a minimum scale size to prevent the zoom from getting really small. Any other suggestions?
I scale everything based on the width of the game. How are you doing it?
It’s based on the width. I’m trying to keep a constant ten tiles horizontally visible. I draw all sprites according to this standard,
Math.floor((this.cameras.main.width / 10) / 16) * 16;
A tile is 16x16 pixels to clarify the other numbers.
When the browser resizes, the standard is recalculated as expected. The issue I have is that I end up having to rescale every single thing in the game, which is kind of weird to me. I was thinking of an alternative approach, where the standard was not dynamic, and the game would readjust the zoom instead to make sure 10 tiles are visible.
I think you are right to rescale everything. I thinking the zooming is going to be hard to calculate. Can you show your tile resizing code?
Tile resizing isn’t really working at the time of this writing, but I’ve already produced a solution to the zoom calculations 
var difference = this.cameras.main.width / (16 * 10);
this.cameras.main.setZoom(difference);
I haven’t brought this into the main game yet, but I’m hoping this will finish off the need to rescale all my pixel art assets to a larger size
Maybe a revision
var difference = Math.floor(this.cameras.main.width / 160);
this.cameras.main.setZoom(difference);