Multi-scale resolution support

Phaser 3
1

I’m trying to make phaser v3.55 game screen responsive based on browser size also supportable to multiple android and ios devices.

Scaling should be similar to this demo:
https://youtu.be/63GCHwrLk5Y

Thank you.

2

Maybe this helps:

3

Thanks for replying.
In the example you provide it doesn’t always seem to fill the screen.

Screenshot 2022-02-07 190919
Screenshot 2022-02-07 190919411×616 7.59 KB

In the image you can see that the top and bottom of the screen seems to have black border.

4

I don’t see a border.

5

What I meant is that the requirement I requested for was that safe area will always be visible and rest of the area should have the background.

This is the example created using different game engine : Cocos Creator | hello_world.
Red box is the safe area here.

Example:
The image is of size 2688 x 1536 and safe area is center of the screen with size 1920 x 1080.
So the center should always be visible.
If the window size is of 1920 x 1200 then the sides will FIT and the height will FILL

6

@Un_Gamer you have to calculate the scale at runtime and then reposition your scene’s element according to the game scale, I don’t think phaser provide a way to do so.
Try creating a base-scene that does the calculation and all your game scene will extend this base scene.

7

Thanks for replying @nish_mishra.
Do you mean that I need to change the config size as well as canvas size based on the window size?
Can you please provide a code or any methods that would help.

8

@Un_Gamer apologies for the delay in response, here is the basic idea how i am doing it.

this.screenWidth = 1920;

this.screenHeight = 1080;

this.scaleX = (this.game.scale.width / this.screenWidth).toFixed(2);

this.scaleY = (this.game.scale.height / this.screenHeight).toFixed(2);

this.globalScale = this.scaleX;

if (this.scaleY < this.scaleX)

    this.globalScale = this.scaleY;

this.events.once('preupdate', () => {

    this.children.list.forEach((obj) => {

        if (obj.type === "Container") {

            obj.list.forEach((child) => {

                this.setUpObjects(child);

            })

        }

        this.setUpObjects(obj);

    })

    this.resize();

})

setUpObjects(){
    //check the object type here and set the scale
    obj.scaleOriginal = obj.scale;
    obj.xOriginal = obj.x;
    obj.yOriginal = obj.y;
}

resize() {
    //resize calculation goes here
}

this.game.scale.on('resize', this.resize, this);