Question

我在this tutorial之后用Phaser 2创建了一个PWA（这个是用Phaser 3完成的）。

我在游戏如何在手机上扩展方面遇到了问题。在我的游戏中，我使用以下 Phaser 2 方法进行缩放：

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;

当我单击手机中的localhost链接时，游戏显得太大，我必须向下滚动才能看到它。当我“下载”它以使其像一个应用程序时，一开始它会摇摇欲坠，向上和向下缩放，直到稳定到正确的大小。游戏尺寸为1280x720，在将其转换为Web和移动设备上的PWA之前看起来都非常不错。

我在Chrome的开发工具中对PWA进行了审核，并显示了以下通知：视口大小为1280px，而窗口大小为412px。

我尝试了here和here的解决方案，但这没有帮助。一定是其他东西。

你知道是什么原因造成的吗？

Answer 1

这是我通常对Phaser 3所做的事情，但是即使您使用的是Phaser 2，也可以尝试在Phaser 2的功能之外调整canvas的大小。

摘自Emanuele Feronato的How to scale your HTML5 games if your framework does not feature a scale manager – or if you do not use any framework：

/**
 * From https://www.emanueleferonato.com/2018/02/16/how-to-scale-your-html5-games-if-your-framework-does-not-feature-a-scale-manager-or-if-you-do-not-use-any-framework/
 */
function resize() {
    const canvas = document.querySelector("canvas");
    const width = window.innerWidth;
    const height = window.innerHeight;
    const wratio = width / height;
    const ratio = Number(gameConfig.width) / Number(gameConfig.height);
    if (wratio < ratio) {
        canvas.style.width = width + "px";
        canvas.style.height = (width / ratio) + "px";
    } else {
        canvas.style.width = (height * ratio) + "px";
        canvas.style.height = height + "px";
    }
}

window.onload = function(){
    // setup your game here
    resize();
    window.addEventListener("resize", resize, false);
}

移动设备上的相位器PWA缩放问题

1 个答案: