kamikaze1945 Posted July 9, 2015 Share Posted July 9, 2015 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 scroll2. 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 background2. 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 More sharing options...
sombriks Posted July 9, 2015 Share Posted July 9, 2015 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 More sharing options...
Tom Atom Posted July 9, 2015 Share Posted July 9, 2015 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. Echoes 1 Link to comment Share on other sites More sharing options...
kamikaze1945 Posted July 9, 2015 Author Share Posted July 9, 2015 Thanks for answer.I try your solutions. Phaser have method blocked rotation window or is only setResizeCallback where we show message ? Link to comment Share on other sites More sharing options...
Tom Atom Posted July 9, 2015 Share Posted July 9, 2015 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 More sharing options...
kamikaze1945 Posted August 29, 2015 Author Share Posted August 29, 2015 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 More sharing options...
VitaZheltyakov Posted August 29, 2015 Share Posted August 29, 2015 You make your own problem. Any of your solution will not work in a cocoon. Just when resize reload the page. Link to comment Share on other sites More sharing options...
jdnichollsc Posted September 1, 2015 Share Posted September 1, 2015 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 More sharing options...
Recommended Posts