Responsive Game Area and Canvas

[MirroW]

Hello, I'm looking at creating a fully responsive Phaser 3 game that would work for mobile (landscape/portrait) and desktop. I've been working with game development for a couple of years and I have a total of 7 years of programming experience. I recently started creating a game in Phaser 3 (5 months ago) and found it difficult to scale the game assets if you want the canvas to fit the entire parent div (which happens to be 100% window height and width, without using fullscreen). I've attached an image that somewhat describes what I'm trying to achieve.

If the blue rectangle was the canvas I could be using the Phaser.Scale.FIT property and then positioned the canvas using a parent div. But, this is not what I need. My problem is with mobile portrait, I need the red area to also be canvas, whilst the blue area is the game (as it would look on landscape / desktop). This way particle effects or score could be drawn in the red area instead. The dream would be that I could make the game camera act the same way inside the canvas, as the canvas can inside a parent div. But I've only found the setZoom function on cameras that doesn't seem to do the job.

Is there anyone of you that can recommend any resources (books, forums) that I can read to get a better understanding of how to scale a game in Phaser 3? Or perhaps have some tips on how assets/game can be scaled this way inside a canvas? I found some examples from phaser 2 and 3 that I've looked at for inspiration before deciding to create this post:
https://www.html5gamedevs.com/topic/5949-solution-scaling-for-multiple-devicesresolution-and-screens/
https://www.html5gamedevs.com/topic/21639-phaser-scale-manager-show-all-not-working/
https://www.html5gamedevs.com/topic/33206-scalemanagershow_all

Important notes:
The game assets are designed based on canvas size 1280x720. The canvas has a transparent background, so it's really only important to make assets fit the blue area and without being stretched.

Edited January 9, 2020 by MirroW

[lupo]

Maybe this link will be helpful: https://photonstorm.github.io/phaser3-docs/Phaser.Scale.ScaleManager.html

[max0805]

Hello I have same problem before.

until I found the game.scene.setGameSize();

Maybe you can try this function and remember it only work on Phaser.Game not Phaser.scene. (For the iphone..... just using it on Phaser.Game level)