freke1981SWE Posted June 24, 2014 Share Posted June 24, 2014 I have problem with the scale, the game gets zoomed in sometimes on page load/reload, see this image to see the problem: http://rekylx.se/dump/temp.jpg The game should fill the screen and scale on resize with a fixed aspect ratio, it works most of times but not all the time. This is the "scale" code run in the boot state: Boot.prototype = { preload: function () { // Maintain aspect ratio & center this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignVertically = true; this.game.scale.setShowAll(); this.game.scale.setScreenSize(true); this.game.scale.refresh(); this.game.stage.backgroundColor = '#ffffff'; this.game.stage.disableVisibilityChange = true; Link to comment Share on other sites More sharing options...
j0hnskot Posted June 24, 2014 Share Posted June 24, 2014 I copy-pasted the snippet you gave us and it works fine for me. Did some dozens of refreshes and nothing weird happened. Maybe irrelevant but what version of phaser you use? Link to comment Share on other sites More sharing options...
palypster Posted June 24, 2014 Share Posted June 24, 2014 I'm having probably the same issue. I'm creating, destroying and recreating the whole new game object dynamically (for every new gameplay). It should always have the same dimensions, but when I'm testing it in the same one computer, same browser, without reload, just dynamically recreating game, sometimes (20% of times) whole game is zoomed in. The scale of the zoom differs every time. I'm using v2.0.4. I'm not using game.scale at all (should I?) - as long as I don't want to use any scale at all. Link to comment Share on other sites More sharing options...
freke1981SWE Posted June 25, 2014 Author Share Posted June 25, 2014 I use the the latest Phaser 2.0.5, and also recreates the game on each game play, the game is part of a single page angular app. It seems that the game canvas is correct, I´ve checked the code for both a working and a non working one. So it must be something with how Phaser scales the content to fill the canvas. This is my first Phaser game, so I´m a little bit lost regarding the scaling and stuff, I want a game that fill the screen and scales with a fixed aspect ratio (2048x1536 iPad retina)... Link to comment Share on other sites More sharing options...
Riddik Posted June 25, 2014 Share Posted June 25, 2014 Try this css for your game div: margin: 0 auto; padding: 0; outline: none;width: 100%;height: 100%; Link to comment Share on other sites More sharing options...
freke1981SWE Posted June 25, 2014 Author Share Posted June 25, 2014 I´ve tried to add the css above on the game div, but the problem still exists... Link to comment Share on other sites More sharing options...
Riddik Posted June 25, 2014 Share Posted June 25, 2014 Maybe some other CSS still affects the game div? I had exactly the same problem, I changed the CSS and it works fine now. My html:<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="format-detection" content="telephone=no"> <meta name="HandheldFriendly" content="true"> <meta name="robots" content="index,nofollow"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <title>My Game!</title> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="styles.css" type="text/css" /> <script type="text/javascript" src="js/phaser-arcade-physics.min.js"></script> <script type="text/javascript" src="js/game.js"></script> </head> <body> <div id="my-game"></div> </body></html>My css:*{ margin: 0 auto; padding: 0; outline: none; }#my-game{ width: 100%; height: 100%; } Link to comment Share on other sites More sharing options...
freke1981SWE Posted June 25, 2014 Author Share Posted June 25, 2014 I will try that out. Link to comment Share on other sites More sharing options...
morosenerd Posted June 25, 2014 Share Posted June 25, 2014 I seem to be having a related problem: http://www.html5gamedevs.com/topic/7385-1-scale-show-all-bugged-or-2-im-just-dumb/One thing I noticed (well, someone else suggested it, I'm not that brilliant) is it helps to WAIT for ~100-200 ms before rescaling after orientation change. But shouldn't Phaser, like, do it itself? :-P Link to comment Share on other sites More sharing options...
freke1981SWE Posted June 25, 2014 Author Share Posted June 25, 2014 Still seems to be a problem on how Phaser renders the game in on the canvas, the canvas and game wrapper seems to have the correct size and css. Link to comment Share on other sites More sharing options...
Recommended Posts