Making a full screen game


#1

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


#2

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>

#3

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);

#4

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.


#5

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.


#6

@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);

#7

Ok. Thanks :blush: