Jump to content

Resizing a game in browser


kamikaze1945
 Share

Recommended Posts

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

<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:
1. change position with horizontal on vertical, game is bigges and show scroll
2. change position with vertical on horizontal, game is flat
 
 

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 =)

Link to comment
Share on other sites

Hello,

 

I had similar issues in my games, dealed with that mainly locking device orientation on app, but in browser i think that things are different.

 

You could watch for rotate events and whenever game gets the wrong viewport you could pause the game and show a message asking for the correct phone position.

    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;    game.scale.setResizeCallback(function () {        doRescale(this);    }, game);    game.scale.pageAlignHorizontally = true;    game.scale.pageAlignVertically = true;    game.scale.setScreenSize(true);    game.scale.refresh();

Hope it helps

Link to comment
Share on other sites

Hi, there are several issues mixed in your problem:

 

 1] "... I see white background"

 you are using scaleMode "SHOW_ALL". This mode will always show your entire view, while preserving aspect ratio. So, you game will not be stretched to fill device screen, but if your canvas aspect is different from device aspect, you will get belts on sides or on top and/or bottom.

 

 Use scaleMode EXACT_FIT to fill  whole display ... but your game may look ugly if stretched a lot in some direction.

 User RESIZE mode and and you game will be resized to match available space ... this is good if you for example have some map you can scroll over and on larger screens you can see more from teh map area

 Use USER_SCALE + set how much is game scaled in horizontal or vertical direction.

 

 Mode to use depends on your needs. Most often you just want your game to look nice, which is: no borders, no stretching. I have my own solution for this which I described on my blog (already posted several times on this forum): http://sbcgamesdev.blogspot.cz/2015/04/phaser-tutorial-manage-different-screen.html Target is to avoid belts completely and avoid stretching as much as possible. Mode I use is USER_SCALE and the solution calculates correct scale parameters in combination with small additional areas of background image, that may or may not be show.

 

 

 2] rotating

 there are not many games, that work in portrait as well as in landscape. I remember Candy Crush, but it is not Phaser game. Usually, you choose either one orientation. For the incorrect one you display image to user saying: "rotate your device". To achieve this follow template at Phaser directory: "\resources\Project Templates\Full Screen Mobile\". Of course, you can adjust your code to work horizontally as well as vertically, but it would need some effort on your side to rearrange screen assets on the fly (when device is turned) and also you will have to change the size of game object itself... so, it is better to avoid it.

Link to comment
Share on other sites

Orientation lock is new feature in browsers not implemented widely yet.

 

Look into the template. Actually, if screen is in incorrect orientation it makes visible special html element, which is stretched over whole screen and which has some picture like "rotate me". Look for this: "<div id="orientation"></div>" in index.html and also into Boot.js (+ images/orientation.jpg)

Link to comment
Share on other sites

  • 1 month later...

I found 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 I add */
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();...}
Link to comment
Share on other sites

 

I found 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 I add */
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();...}

 

 

It's a bad solution, you don't need jQuery to resize the game...

 

And see the documentation...

 

Horizontal alignment is not applicable with the RESIZE scaling mode.

Vertical alignment is not applicable with the RESIZE scaling mode.

 

Regards, Nicholls  :) 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...