时间戳

首页 > 解决方案 > 移动设备上的 Phaser PWA 扩展问题

progressive-web-apps - 移动设备上的 Phaser PWA 扩展问题

问题描述

我按照本教程使用 Phaser 2 创建了一个 PWA （这个是使用 Phaser 3 制作的）。

我面临游戏在移动设备上的扩展方式的问题。在我的游戏中，我使用这些Phaser 2方法进行缩放：

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

当我点击手机中的 localhost 链接时，游戏看起来太大了，我必须向下滚动才能看到它。当我“下载”它以像应用程序一样运行时，它一开始会摇摇晃晃，上下缩放，直到它稳定到正确的大小。游戏尺寸为 1280x720，在我将其转换为 PWA 之前，它在网络和移动设备上都非常漂亮。

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

我从这里和这里尝试了解决方案，但这没有帮助。它一定是别的东西。

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

标签： progressive-web-appsphaser-framework

解决方案

这是我通常为 Phaser 3 做的事情，但即使您使用的是 Phaser 2，您也可以尝试调整canvasPhaser 2 功能的外部大小。

来自 Emanuele Feronato 的How to scale your HTML5 games if your framework 没有 scale manager – 或者如果您不使用任何框架：

/**
 * 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);
}

推荐阅读