Phaser 3：将游戏缩放到整个网站的宽度和高度

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

希望这有帮助！