如何使用Phaser库创建完全响应式的html5游戏？

Question

我正在使用Phaser 2.5.0（也尝试了2.4.8），并尝试使用Phaser库创建完全响应式游戏。

当我刷新页面时一切都很好，如图：

但是当我将旋转模式改为纵向模式时，对话框消息就不正确了，如图：

当我使用纵向模式刷新页面时，对话框变得正常：

因此，问题在于当我调整浏览器窗口大小时。

以下是初始化Phaser游戏的代码：

var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO);

尝试了以下方法：

var game = new Phaser.Game("100%", "100%", Phaser.AUTO);

这是位于main.js中的create函数：

    create: function(){
        console.log('create');

        this.game.antialias = true;
        this.game.stage.smoothed = true;
        this.input.maxPointers = 1;
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.scale.minHeight = 0;
        this.game.time.advancedTiming = true;
   },

问题是当我调整浏览器窗口大小时，但当我刷新页面时，它不能正常工作。游戏必须支持调整大小。

这里有一个简单的例子，几乎给出了相同的结果，在刷新时可以正常工作，但在调整大小时不行：https://jsfiddle.net/CroDac/tv010u0t/

谢谢

- iWizard

---

你是否在使用Interface Builder？如果是，请确保你的约束正确。有时候它们会出现问题，导致变形。 - MNM

@MNM - 不，我是手动在编辑器中创建游戏。 - iWizard

我猜你可能已经硬编码了内部窗口的大小，当你旋转它时，窗口会变得混乱。 - MNM

@MNM - 在CSS中，宽度和高度均为100%。 - iWizard

我敢打赌，当您旋转手机时会出现更新和重绘问题。我敢打赌每次你旋转手机时都必须手动调用重绘方法才能正确显示。 - MNM

Answer 1

在iOS中存在一个旧的、但显然没有被修复的bug，导致了这个问题。网上有几种解决方法，其中之一在这里：

https://github.com/scottjehl/iOS-Orientationchange-Fix

从描述中：

这个修复方法通过监听设备的加速度计来预测何时会发生方向变化。当它认为方向变化即将发生时，脚本会禁用用户缩放，以允许方向变化正确地发生，并禁用缩放。一旦设备近乎竖直或其方向已经改变，脚本会再次恢复缩放。这样，在页面使用期间，用户缩放永远不会被禁用。

也许这可以帮助你....

- Johannes

---

问题不仅出现在我改变方向时，问题还出现在我调整浏览器窗口大小和/或在桌面浏览器和移动浏览器上改变方向时。 - iWizard