Filling the browser viewport

[splashsky]

Hey guys! Another tip for your games. If you're interested in filling the entire browser window with your game, I noticed there's not a lot of good, simple, easy-to-follow examples on Google. In fact, a lot of answers you find on the internet are really really complicated.

Here's the simple solution...

/* In your CSS */
* {
    padding: 0;
    margin: 0
}

body {
    overflow: hidden;
}

#canvas {
    width: 100vw;
    height: 100vh;
}

// In your game/scene config
scale: {
    width: window.innerWidth,
    height: window.innerHeight,
    autoCenter: Phaser.Scale.CENTER_BOTH
}

This will fill the viewport with your game, and Phaser 3 is smart enough to automagically adjust your game's scale and viewport if the viewport size changes as well. 😄