How to fill the rest of the viewport with a Phaser game's content?

Question

In Phaser, is it possible to fill the remaining part of the Browser window with the game's (clipped) content, and still keep the aspect ratio of the game intact?

For example, I have a game which is 490x844px, and all of the elements in the game are positioned according to those coordinates and size. I also use the following scaling properties on the game

scale: {
  mode: Phaser.Scale.FIT,
  autoCenter: Phaser.Scale.CENTER_BOTH,
},

However, I still have some game elements exceeding the game area, and are clipped off. I want to display this content if we have some space left in the Browser window. Is this possible?

I tried to use game.scale.setGameSize(1600, 1200); and then change the camera's viewport to center the game again (e.g. cameras.main.setViewport(offsetX, offsetY, this.scale.width, this.scale.height).) It does work, but only makes the "clipped" content on right side of the game appear. The left side of the game is still clipped and not visible. I want to make the left side AND the right side of the game's content to appear on screen, not just the right part.

Maybe the example image will make it more clear what my problem is, and what I want to achieve. Any help or pointers are appreciated.

Answer 1

I think I found a solution that kind of works. I don't think it's the best, and I'm still curious if you have alternatives.

I set the scale config of the game to:

scale: {
  mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH,
  autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},

I then adjust the game-size with the following code after initializing the game.

this.game.scale.setGameSize(window.innerWidth, GAME_HEIGHT);

Then, in a scene, I change the viewport bounds:

scene.cameras.main.setBounds(
  - scene.cameras.main.width / 2 + GAME_WIDTH / 2,
  0,
  GAME_WIDTH,
  GAME_HEIGHT
);

I also need to re-scale the game when the viewport changes size (width or height.) With this, I'm not clipping the game on the left side anymore.