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:

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

Thanks a lot!

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:

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

Thanks a lot!

EDIT:

I tried to change the size of the camera to make it equal to the size of the canvas' parent container, like this:

this.cameras.main.setSize(
    this.game.canvas.parentElement.offsetWidth, 
    this.game.canvas.parentElement.offsetHeight
);

The result is:

In this example the size of the window is 1280x700 and the size of the container is 1024x560.

So setting the size of the camera to 1024x560 give the result above.

I'm getting confused.

Any idea?