# Making a full screen game

**URL:** <https://phaser.discourse.group/t/making-a-full-screen-game/1136>\
**Category:** Phaser 3\
**Created:** [February 8, 2019, 3:52pm UTC](https://phaser.discourse.group/t/making-a-full-screen-game/1136 "2019-02-08T15:52:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ProperSag](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/propersag/32/684_2.png) [@ProperSag](https://phaser.discourse.group/u/ProperSag)\
**Post date:** [February 8, 2019, 3:52pm UTC](https://phaser.discourse.group/t/making-a-full-screen-game/1136/1 "2019-02-08T15:52:52Z")

</div>

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/c07dbe8ca353bb53eb08a4f2320debf7b07091de.png)

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [February 8, 2019, 4:01pm UTC](https://phaser.discourse.group/t/making-a-full-screen-game/1136/2 "2019-02-08T16:01:37Z")

</div>

I do it like this

```javascript
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

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

```

---

<div class="post-metadata">

**Author:** ![ProperSag](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/propersag/32/684_2.png) [@ProperSag](https://phaser.discourse.group/u/ProperSag)\
**Post date:** [February 9, 2019, 6:52am UTC](https://phaser.discourse.group/t/making-a-full-screen-game/1136/3 "2019-02-09T06:52:37Z")

</div>

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

> **[ScaleManager.SHOW\_ALL](http://www.html5gamedevs.com/topic/33206-scalemanagershow_all/?tab=comments#comment-213451)**
>
> ScaleManager.SHOW\_ALL deleted in phaser 3?

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

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

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [February 9, 2019, 8:17am UTC](https://phaser.discourse.group/t/making-a-full-screen-game/1136/4 "2019-02-09T08:17:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [February 9, 2019, 8:21am UTC](https://phaser.discourse.group/t/making-a-full-screen-game/1136/5 "2019-02-09T08:21:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ProperSag](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/propersag/32/684_2.png) [@ProperSag](https://phaser.discourse.group/u/ProperSag)\
**Post date:** [February 9, 2019, 9:10am UTC](https://phaser.discourse.group/t/making-a-full-screen-game/1136/6 "2019-02-09T09:10:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [February 9, 2019, 11:20am UTC](https://phaser.discourse.group/t/making-a-full-screen-game/1136/7 "2019-02-09T11:20:06Z")

</div>

Ok. Thanks 😊