Scaling game to fit entire window

Phaser 3
1

Hello I need to scale my game so it would always fit the entire window while keeping all the coordinates intact, the fact that it stretches is ok.
So far I managed to do that using customer resize function with NONE scaling mode, but them DOM element is not scaled in refresh method.
When I use FIT method, then everything is scaled, but it doesn’t stretch to the entire window, it only based on height.

2

Hi,
Looking to the docs, seems what you want is RESIZE

The Canvas is resized to fit all available parent space, regardless of aspect ratio.

https://photonstorm.github.io/phaser3-docs/Phaser.Scale.html

3

RESIZE is not working for me, I tried it, but it changes the game size and I didn’t find the way to make it so the full game is always visible

4

hI @Greedman ,
If you need stretch the scene to the available screen space and continue showing the same proportion of the game map, you can use the scale FIT mode and change the aspect ratio:

    // In your config
   const config = {
        scale: {
            mode: Phaser.Scale.FIT,
            // ...
        }

    // In create() function
    // ...
    this.scale.displaySize.setAspectRatio( width/height );
    this.scale.refresh();
    // ...

Regards.

1 Like
5

Yes, that works! Thank you! Was wondering how to correctly do that.

6

Maybe STRETCH could be added, if there’s demand.