phaser – Camera bounds with container overflow


I’m using Phaser to create a small web based game, but I would like some advice on how to handle multiple resolutions and scrolling.

Basically what I would like to achieve is the following :

  • The game view must fit in a container (maybe smaller than the browser window) of any size and still cover it all
  • The aspect ratio must be maintained
  • The camera must follow the player and stop scrolling when the world’s bounds are reached

The world has a fixed size that never changes (pretty small).

The framework seems to already have everything required to do what I described.

For the game config I use:

{
    width: 1280,
    height: 700,
    scale: {
        mode: Phaser.Scale.ENVELOP
    },
    ...
}

Then for the camera:

this.cameras.main.startFollow(this.player);
this.cameras.main.setBounds(0, 0, this.gridSizeX * this.gridCellSize, this.gridSizeY * this.gridCellSize);

Very basic stuff, but the scale mode make the game area overflow its container.
That’s exactly what I want but the camera bounds become incorrect as demonstrated here:

enter image description here

Do you know a way to setup the camera to scroll until the end of the overflowing area ?

Thanks a lot!