javascript - 移相器 3 : Scaling the Game to full Websites width and height

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

现在 Canvas 缩放到屏幕，但对象没有。有趣的是:当我将网站的大小调整为 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

希望这有帮助!