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

时间:2016-06-22 21:52:30

标签: html5 phaser-framework

我使用的是Phaser 2.5.0(也尝试过2.4.8),我试图使用移相器库创建完全响应的游戏。

刷新页面时一切正常,这里是图片: enter image description here

但当我将旋转更改为纵向对话框消息不正常时,图像: enter image description here

当我使用纵向模式刷新页面时,我得到了确定对话框: enter image description here

问题在于我调整浏览器窗口的大小。

这是init 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/

谢谢

1 个答案:

答案 0 :(得分:1)

iOS中有一个旧的,但显然不是固定的错误导致(导致?)这个。网上有几种解决方法,其中就是:

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

来自说明:

  

此修复程序通过聆听设备的加速计来预测   当方向变化即将发生时。当它认为是   方向更改即将发生,脚本禁用用户缩放,   通过缩放允许方向更改正确发生   禁用。一旦设备出现,该脚本将再次恢复缩放   朝向接近直立,或在其方向改变后。这个   在页面使用过程中,永远不会禁用用户缩放。

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