We want the game to be an ’empty’ canvas. The shape or size is not predefined.
So when resizing the window (when possible), the window should show more of the world, leaving all the elements where they where.
Phaser has a scale manager build in that handles different preferences
This one is suitable for our case: https://phaser.io/examples/v3/view/scalemanager/resize
There is also this examples, but it leaves scroll bars in the window:
https://phaser.io/examples/v3/view/scalemanager/manually-resize
When resizing some elements have to updated:
* the camera bounds
* the background bounds
* elements that are scaled or positioned relative to the window width and height
We try to give everything an absolute position.
If the player wants a more scaled up view, we provide zoom in and out buttons for that.
Here is camera zoom control example: https://labs.phaser.io/edit.html?src=src/game%20objects/container/container%20and%20camera%20zoom.js&v=3.55.2
In the main menu, zooming the camera out, does not update the background. So I would have to use the ScaleManager here.
https://photonstorm.github.io/phaser3-docs/Phaser.Scale.ScaleManager.html
In the main game the background is set to very large, maybe there this technique does work…
Zooming with the ScaleManager does nothing…
Article about rescaling scenes: https://phaser.discourse.group/t/making-the-game-to-fill-all-the-available-window-space/6420