CODEWITHSUNDEEP
javascriptresizescalephaser-framework
Dariusz Andryskowski
Dariusz Andryskowski

Reputation: 89

Resizing a game in browser

I have problem with resize windows game. I've read various posts on the forum but I could not get the correct resize the view of the game.

If you rotate the device screen size, I would like to display the game has adapted to the width / height of the display device both horizontally and vertically. When the game started, it is properly scaled up, just turning your exchange device scaling is incorrect. Return to the previous screen orientation device retains its proportions.

In template html I add:

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

First script:

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();
}

When I use this code, game scale correct when game started. When in device:

Second script:

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

When I use this code, game scale correct when game started. When in device: 1. change position with horizontal on vertical, game is scaled but on left and right is see white background 2. change position with vertical on horizontal, game is scaled but on bottom I see white background

I use Phaser 2.3

Does anyone know the solution to my problem?

Thank you =)

BEST SOLUTION

Phaser 2.3 have a bug - not change resize site. I download 2.4.3 version.

I've added features that is loaded at the beginning, which guards the resolution change

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

In preload add this script

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

Upvotes: 1

Views: 2085

Answers (1)

Pandacoder
Pandacoder

Reputation: 708

This sounds like an issue that my friend and I were getting when we were trying to re-size our game to a larger resolution if our window changed size.

See this issue: https://github.com/photonstorm/phaser/issues/1881 It should be fixed in Phaser 2.4 (RC1 is out now).

Upvotes: 2

Related Questions