CODEWITHSUNDEEP
javascripthtmlphaser-framework
user10214015
user10214015

Reputation:

Phaser 3: Scaling the Game to full Websites width and height

I am very new at Phaser. I want my Game to be as big as the Website is. Following code scaled the Phaser Gamefield to the websites height and width:

width = window.innerWidth * window.devicePixelRatio;
height = window.innerHeight * window.devicePixelRatio;

var config = {
    type: Phaser.AUTO,
    width: width,
    height: height,
    scene: [mainMenu]
};

Now the canvas is scaled to the Screen, but the objects are not. Funny thing: When I resize the Website to 80%, then everything fits perfectly in. But when its on 100%, then the Background-Image is not complete and test is not where I placed it.

Now I searched for ways to perfectly resize the Phaser Gamefield, but found nothing. At this time my understanding of Phaser is too small to Do this on my own. I hope somebody can explain how I can scale my Game in Phaser.

Upvotes: 13

Views: 6757

Answers (1)

zri5004
zri5004

Reputation: 83

I usually build my games at a set size, then use the scale: {} property to change how it scales to the window size.

In my example below, the original game is 1280x720, but the scale mode makes it fit the window. This should scale you're game objects as well. 

    let config = {
        width: 1280,
        height: 720,
        // Sets game scaling
        scale: {
            // Fit to window
            mode: Phaser.Scale.FIT,
            // Center vertically and horizontally
            autoCenter: Phaser.Scale.CENTER_BOTH
        },
        scene: []
    };

There are many other types of scale modes, which you can see on Phaser's API documentation here: https://photonstorm.github.io/phaser3-docs/Phaser.Scale.html

Hope this has helped!

Upvotes: 8

Related Questions