在浏览器中调整游戏大小

时间:2015-07-09 13:00:34

标签: javascript resize scale phaser-framework

我有调整大小Windows游戏的问题。我已经阅读了论坛上的各种帖子,但我无法正确调整游戏视图的大小。

如果您旋转设备屏幕尺寸,我想显示游戏已经适应水平和垂直显示设备的宽度/高度。 当游戏开始时,它会被正确放大,只是让您的交换设备缩放不正确。返回上一个屏幕方向设备保留其比例。

在模板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();
    ...
}

1 个答案:

答案 0 :(得分:2)

这听起来像我的朋友和我在我们尝试将游戏重新调整到更大的分辨率时会遇到的问题,如果我们的窗口改变了尺寸。

请参阅此问题:https://github.com/photonstorm/phaser/issues/1881 它应该在Phaser 2.4中修复(RC1现在已经用完了。)