Dynamically change canvas size

Phaser 3
1

I’ve been going crazy trying to figure out how to do this. Something that I feel should be incredibly simple.
Basically, my canvas always stays the same size when the window size changes:

I need it to resize like in this example:

The thing is, I can’t find anything in the code of that example that has anything to do with resizing. It’s a complete mystery to me. (https://labs.phaser.io/view.html?src=src\scalemanager\fit%20hi-res.js&v=3.20.1)
I realize I could check the size in update() but that sounds incredibly expensive, and It’s bvious that in the example the resizing follows at a slower interval, so there is definity some more advanced mechanism at play.

How does it work?

2

See game config in https://labs.phaser.io/edit.html?src=src\scalemanager\fit.js .

1 Like
3

For some reason I had the idea in my mind that scale manager modes had nothing to do with canvas size but just game scale. What I needed was the canvas to fit the window without rescaling my game, so
mode: Phaser.Scale.RESIZE was the right option.

But this is where I run into the next issue. I use zoom: 4 for my game because it uses pixel art assets, and if I use RESIZE mode the zoom option gets ignored.
Is there a proper way to combine these two or is there a better strategy for displaying scaled up assets instead of zoom?

4

Manually resize game with zoom

1 Like
5

Ok thanks! So the current solution is to set the zoom mode to NONE and then resize the window in the resize event.

{
    mode: Phaser.Scale.NONE,
    width: window.innerWidth/ZOOM_LEVEL,
    height: window.innerHeight/ZOOM_LEVEL,
    zoom: ZOOM_LEVEL
}

window.addEventListener("resize", () => {
        game.scale.resize(window.innerWidth/ZOOM_LEVEL, window.innerHeight/ZOOM_LEVEL);
    },false
);

This works, but it still feels like a workaround for the fact that RESIZE mode and zoom simply don’t work together. Is it fair enough to call that a bug?
(I’ll mark the first reply as the answer since it answers the actual question in the title)