Making the game to fill all the available window space

Examples
1

Hello,

In my current project, the world bounds are bigger than the camera bounds. In other words, the map is not fully displayed on screen and we have to use camera scroll to see it all. Since there are plenty of things offscreen that could be perfectly seen, I didn’t want the game to be displayed in a small container. I wanted it to fit all the available window space, without black bars to fill the extra space when the aspect ratio of the screen and content do not match. I actually had difficulties to find proper examples online so here it is.

You can see the working demo here.

Javascript

// Creating a game that fits all available space
const game = new Phaser.Game({
  width: window.innerWidth * window.devicePixelRatio,
  height: window.innerHeight * window.devicePixelRatio,
  parent: "game-container",
});

// In case the user resizes the window afterwards
window.addEventListener("resize", () => {
  let width = window.innerWidth * window.devicePixelRatio;
  let height = window.innerHeight * window.devicePixelRatio;
  game.scale.resize(width, height);
  game.scene.scenes.forEach(function (scene) {
    scene.cameras.main.setViewport(0, 0, width, height);
  });
},false);

CSS

html, body, #game-container {
  margin: 0;
  padding: 0;
}

#game-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Not sure that last part is actually usefull */
  object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}

I also found another solution in yannick platformer example, that uses scaling while mine don’t.

Not sure it is the best solution, I couldn’t test it yet on many devices, but I hope this will help some people!

2 Likes