Question

我在Phaser刚很新。我希望我的游戏与网站一样大。以下代码将Phaser Gamefield缩放为网站的高度和宽度：

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

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

现在，画布已缩放到“屏幕”，但对象没有缩放。有趣的是：当我将网站的大小调整为80％时，一切都非常合适。但是当其100％亮起时，背景图像并不完整，并且测试不在我放置的位置。

现在，我在寻找完美调整Phaser Gamefield大小的方法，但一无所获。目前，我对Phaser的理解太小，无法独自完成。我希望有人能解释如何在Phaser中扩展游戏。

Answer 1

我通常以设定的大小来构建游戏，然后使用scale: {}属性来更改其缩放到窗口大小的方式。

在下面的示例中，原始游戏为1280x720，但缩放模式使其适合窗口。这也应该使您成为游戏对象。

    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: []
    };

还有许多其他类型的缩放模式，您可以在Phaser的API文档中查看： https://photonstorm.github.io/phaser3-docs/Phaser.Scale.html

希望这对您有所帮助！

阶段3：将游戏扩展到完整的网站宽度和高度

1 个答案: