javascript - 在浏览器中调整游戏大小

Question

我在调整 Windows 游戏大小时遇到​​问题。我已阅读论坛上的各种帖子，但无法正确调整游戏 View 的大小。

如果您旋转设备屏幕尺寸，我想显示游戏已适应显示设备的水平和垂直宽度/高度。游戏开始的时候是正常缩放的，只是转动你的交换器缩放是不正确的。返回到以前的屏幕方向设备保留其比例。

在模板 html 中我添加:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

第一个脚本:

function preload() {
	...
	Global.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;              
	Global.game.scale.pageAlignHorizontally = true;                   
	Global.game.scale.pageAlignVertically = true;
	Global.game.scale.forceOrientation(true, false);
	Global.game.scale.setMaximum();
	Global.game.scale.setScreenSize(true);
	...
}

function resize() {
	Global.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
	Global.game.scale.pageAlignHorizontally = true;
	Global.game.scale.pageAlignVertically = true;
	Global.game.scale.forceOrientation(true, true);
	Global.game.scale.setShowAll();
	Global.game.scale.refresh();
}

当我使用此代码时，游戏开始时游戏比例正确。在设备中时:

• 改变水平和垂直的位置，游戏变大并显示滚动

• 在水平上垂直改变位置，游戏是平的

第二个脚本:

function preload() {
...
Global.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
Global.game.scale.parentIsWindow = true;
...
}
 
 
function resize () {
Global.game.scale.refresh();
} 

当我使用此代码时，游戏开始时游戏比例正确。在设备中时:1. 在垂直方向上改变水平方向的位置，游戏缩放但左右是白色背景2. 在水平方向上改变垂直位置，游戏缩放但在底部我看到白色背景

我使用 Phaser 2.3

有人知道我的问题的解决方案吗？

谢谢 =)

最佳解决方案

Phaser 2.3 有一个错误 - 无法更改调整大小的站点。我下载的是2.4.3版本。

我添加了在开始时加载的功能，以保护分辨率更改<​​/p>

    var attacks.base.x = 110;
    var attacks.base.y = 190;

    $(document).ready(function () {
       handleScreenResize(); 
    });

function handleScreenResize() {
        $(window).resize(function () {
            clearTimeout(timeoutResize);
            timeoutResize = setTimeout(function () {
            var xButtonBase;
            var yButtonBase;

            /* resize game */
            game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
            game.scale.pageAlignHorizontally = true;
            game.scale.pageAlignVertically = true;
            game.scale.forceLandscape = true;
            game.scale.parentIsWindow = true;
            game.scale.refresh();

            /* get new width and height*/
            var gameWidth = game.width < game.world.width ? game.width : game.world.width;

            /** If you have static button you have change position use "cameraOffset.x" and "cameraOffset.y" set new position*/
            /* change position buttons attack */
            if(settings.control_option === 'RIGHTHAND') {
                xButtonBase = attacks.base.x;
                yButtonBase = game.height - attacks.base.y;
            } else {
                xButtonBase = gameWidth - attacks.base.x;
                yButtonBase = game.height - attacks.base.y;
            }

            /** set position buttons with attack and assist (down screen)*/
            attacks.base.button.cameraOffset.x = xButtonBase;
            attacks.base.button.cameraOffset.y = yButtonBase;

            }, 1000);
        });
    }

在预加载中添加此脚本

 function preload() {
    ...
    Global.game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
    Global.game.scale.pageAlignHorizontally = true;
    Global.game.scale.pageAlignVertically = true;
    Global.game.scale.forceLandscape = true;
    Global.game.scale.parentIsWindow = true;
    Global.game.scale.refresh();
    ...
}

Answer 1

这听起来像是我和我的 friend 在我们尝试将游戏大小调整为更大的分辨率时遇到的问题，如果我们的窗口大小发生变化的话。

查看本期:https://github.com/photonstorm/phaser/issues/1881它应该在 Phaser 2.4 中得到修复(RC1 现已推出)。