bomicbon Posted May 23, 2016 Share Posted May 23, 2016 I have the following: var game = new Phaser.Game(600, 480, Phaser.CANVAS, 'game'); but when I open it in a browser, the game scales to fit screen. How would I prevent that from happening? I tried setting it to a div id like <div id="game"> width:600; height:480; </div> but they just don't work. Edit: Okay, I tried something along the lines of. <!doctype html> <html> <head> <script src="phaser.min.js"></script> <style> div.game{ width:600; max-width:600; height:480; max-height:480; } </style> <script> (function() { var game = new Phaser.Game(600, 480, Phaser.CANVAS, 'game'); })(); </script> </head> <body> <div class="game"></div> </body> </html> Link to comment Share on other sites More sharing options...
Taggrin Posted May 23, 2016 Share Posted May 23, 2016 No clue why yours does not work, but I use the following which works for me (placed in the <body> of HTML): <div id="game"> <script type="text/javascript"> window.onload = function() { var game = new Phaser.Game(640, 480, Phaser.CANVAS, "game"); }; </script> </div> Link to comment Share on other sites More sharing options...
bomicbon Posted May 23, 2016 Author Share Posted May 23, 2016 Could you guys take another look? I didn't think it was window.onload. <!doctype html> <html> <head> </head> <body> <style> #game{ position:absolute; border:5px; max-width:600px; width:600px; max-height:480px; height:480px; } </style> <div id="game"> <script src="phaser.min.js"></script> <script src="src/boot.js"></script> <script type = "text/javascript"> (function() { var game = new Phaser.Game(600, 480, Phaser.CANVAS, "game"); game.state.add("Boot",boot); game.state.start("Boot"); })(); </script> </div> </body> </html> Link to comment Share on other sites More sharing options...
bomicbon Posted May 24, 2016 Author Share Posted May 24, 2016 going to answer my own question here. I realized in my boot.js my code should have been var boot = function(game){ }; boot.prototype = { preload: function(){ }, create: function(){ this.scale.scaleMode = Phaser.ScaleManager.NO_SCALE; this.scale.pageAlignHorizontally = true; this.scale.setScreenSize(true); this.game.state.start("Preload"); } } and then just set the parent parameter to '' in the Phaser Constructor. Link to comment Share on other sites More sharing options...
Recommended Posts