Making a full screen game

hi guys im trying, to make my game full screen
i am using:

scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
},

i want to draw on the edges of the screen too!
what should i do?

i also tried using
mode: Phaser.Scale.ENVELOP + scene zoom
But that caused a huge loss in image quality

image

I do it like this

const ratio = Math.max(window.innerWidth / window.innerHeight, window.innerHeight / window.innerWidth)
const DEFAULT_HEIGHT = 720 // any height you want
const DEFAULT_WIDTH = ratio * DEFAULT_HEIGHT

  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: DEFAULT_WIDTH,
    height: DEFAULT_HEIGHT
  }

and in the HTML the following styles

<style>
  html,
  body {
    height: 100%;
    margin: 0;
    background-color: #000000;
  }
</style>

Hi, here is an update
@yannick fix did not work for me
But on Discord, @Antriel manged to help me sending me here:

Here is what i came up with:
*note - i was told this gonna hit performance, and im not certain if objects outside the field of view are drawn

GameConfig

scale: {
    mode: Phaser.Scale.NONE,
    parent: "game",
    width: 960,
    height: 660,
},

CSS

<style>
    body {
      overflow: hidden;
      padding: 0px;
      margin: 0px;
    }
</style>
<body>
  <div id="game">
</body>

Phaser.Game

private resize() {
    const canvas = this.canvas;
    if (canvas) {
        const w = window.innerWidth;
        const h = window.innerHeight;
        const scale = Math.min(w / this.BaseWidth, h / this.BaseHeight);

        canvas.setAttribute("style",
            " -ms-transform: scale(" + scale + "); -webkit-transform: scale3d(" + scale + ", 1);" +
            " -moz-transform: scale(" + scale + "); -o-transform: scale(" + scale + "); transform: scale(" + scale + ");" +
            " transform-origin: top left;",
        );

        const width = w / scale;
        const height = h / scale;
        this.scale.resize(width, height);
    }
}
public get BaseWidth() {
    return Number(this.config.width);
}
public get BaseHeight() {
    return Number(this.config.height);
}
public get BaseRatio() {
    return this.BaseWidth / this.BaseHeight;
}
constructor(i_GameConfig: GameConfig) {
    super(i_GameConfig);

    this.resize();
    window.addEventListener("resize", () => this.resize());
}

Phaser.Scene

        const z = (this.m_Scene as any).scale as Phaser.Scale.ScaleManager;

        const resize = () => {
            const scale = Math.min(window.innerWidth / this.BaseWidth, window.innerHeight / this.BaseHeight);
            const width = window.innerWidth / scale;
            const height = window.innerHeight / scale;
            const ratio = this.BaseRatio;

            let w: number;
            let h: number;
            let x = 0;
            let y = 0;

            if (width / height >= ratio) {
                // extra width
                w = height * ratio;
                h = height;
                x = (width - w) / 2;
            } else {
                // extara height
                w = width;
                h = width / ratio;
                y = (height - h) / 2;
            }
            for (const iterator of this.m_Scene.cameras.cameras) {
                iterator.setViewport(0, 0, 0, 0);
                iterator.x = x;
                iterator.y = y;
            }
        };
        resize();
        z.on("resize", resize, this);

I know this method. I have scaled my game in a similar way before the release of Phaser 3.16.

The problem is that the input events do not work properly anymore in 3.16 if you scale manually like this.

Maybe try to add a tiny button with a “pointerdown” event on the screen and scale the screen to 50%, 150% or 200%. You will see that it is hard to trigger the “pointerdown” event.

@yannick
i manged to make it work with touch events still working as intended

Phaser.Scene

        const z = (this.m_Scene as any).scale as Phaser.Scale.ScaleManager;

        const resize = () => {
            const widthWindow = window.innerWidth;
            const heightWindow = window.innerHeight;
            const scale = Math.min(widthWindow / this.BaseWidth, heightWindow / this.BaseHeight);
            const width = widthWindow / scale;
            const height = heightWindow / scale;
            const ratio = this.BaseRatio;
            let w: number;
            let h: number;
            let x = 0;
            let y = 0;

            if (widthWindow / heightWindow >= ratio) {
                // extra width
                w = heightWindow * ratio;
                h = heightWindow;
                x = -1 * (widthWindow - w) * 0.5 / scale;
            } else {
                // extara height
                w = widthWindow;
                h = widthWindow / ratio;
                y = -1 * (heightWindow - h) * 0.5 / scale;
            }

            for (const iterator of this.m_Scene.cameras.cameras) {
                iterator.setViewport(0, 0, width, height);
                iterator.setBounds(x, y, width, height);
            }
        };
        resize();
        z.on("resize", resize, this);

Ok. Thanks :blush: