Jump to content

Scale/Zoom problem...


Recommended Posts

I have problem with the scale, the game gets zoomed in sometimes on page load/reload, see this image to see the problem:




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.stage.backgroundColor = '#ffffff';
        this.game.stage.disableVisibilityChange = true;


Link to comment
Share on other sites

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

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

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


  • Recently Browsing   0 members

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