javascript - Phaser 3: Scaling the Game to full Websites width and height - Stack Overflow

admin管理员组

文章数量:1300022

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 plete 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.

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 plete 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.

• javascript
• html
• phaser-framework

Share Improve this question Follow edited Dec 21, 2018 at 16:59 James Skemp 8,58199 gold badges7070 silver badges112112 bronze badges asked Dec 20, 2018 at 17:34 user10214015user10214015

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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!

本文标签： javascriptPhaser 3 Scaling the Game to full Websites width and heightStack Overflow