Hi! I’m using Scale Mode Fit in the scale manager plugin. From what I understand according to docs, it automatically scales the game if window is resized. However, I’m observing pixelated images within my scene on resizing the web page. Is there something that I’m doing/understanding wrong or do we have to explicitly resize every game object within that scene on whenever we receive resize event?
If you make the browser window larger, FIT will scale up the game canvas, and everything in it, to fit that size. It doesn’t increase the resolution of sprites, so, yes, they my appear a little more pixelated. But, could you drop us some screenshots, because if what you’re seeing is extremely pixelated, there might be something else going on.
FIT and the related modes are whole-canvas scaling. So if you’re scaling up, there is a loss of detail.
You can do per-object scaling yourself using the RESIZE mode and the resize event.
Hi! Normally this is what looks like without resizing the web page.
So after I resized the page I got the following pixelated Map section.
@samme Do I have to explicitly re-scale every game object that I created in my scene? I actually set their scale within the Create method as well.
It depends on what you want to do.
If you just don’t like the pixelated appearance, make sure you have antialias, antialiasGL, and pixelArt turned off in game config.
If you want to do a responsive layout then you need to switch to RESIZE mode and then reposition and scale all of the objects yourself. I don’t know if the scaled objects will look any better, though.
I use something like this to auto resize.
let game = new Phaser.Game(createGameConfig());
window.addEventListener('resize', () => {
game.destroy(true);
game = new Phaser.Game(createGameConfig());
});
Hope this helps.
@samme turning off antialias makes every image too crisp which doesn’t look good. If I switch to Resize Mode then do I have to redraw everything in my scene?
@TharinduDG Just curious: why do you destroy and re-create the game on resize? (Just asking because I wonder if I should be doing that myself!)
Yes! It will be quite an expensive task since resize will be called a lot.
I’ve faced weird issues like sound tracks getting played twice parallelly.
I’ve created some heavy games, but this wasn’t quite an issue.
IMO resizing is a very rare case if you think practically.
Hope this helps.
@TharinduDG Really appreciate it! I’m working on a very heavy game at the moment so this could prove useful!
@kittykatattack I experienced this issue with early version of phaser 3.
I haven’t tested thoroughly with 3.50+ versions. Please share if you witness anything useful.
Thanks.
I meant pixelArt off and antialias on, sorry.
You don’t need to destroy the game during resize.
What if I restart the scene on resize event? I’m trying to restart the scene and it does happen but i don’t see any difference at all ( images appear pixelated). The reason to restart is that I’m creating lots of images inside Create method and setting their scale according to game size.
You can, but you probably don’t need to restart the scene either. Read the new game size, loop through the images, and update their position/scale.
1 Like