vez Posted April 28, 2016 Share Posted April 28, 2016 <body> <div id="game" style="height: 600px; width: 800px; margin: 20px; position:relative;"> </div> <script type="text/javascript"> var game = new Phaser.Game('100', '100', Phaser.CANVAS, 'game', { preload: preload, create: create, update: update}, false, false); Here is the relevant code. According to the documentation the phaser canvas should fill the parent container when the first two arguments are '100'. However instead it takes on the height and width of the window. The canvas element IS a child of the div with the id "game" however it is much bigger than that div (its the size of the window). I think I must be making a silly mistake, but I have been fiddling around with it for 30 mins or so and can't get it to work. Thanks for taking a look. Link to comment Share on other sites More sharing options...
mattstyles Posted April 28, 2016 Share Posted April 28, 2016 Sounds like a bug, possibly related to this. Someone with more knowledge of Phaser than me should be able to confirm. I followed through the code and it takes a pretty long path, error seems to be relating to `this.boundingParent`, its never set so it uses the visualBounds, which looks like its the window. A short term fix would be to grab the height and width from your #game element directly and use that in the constructor or use JS to set height/width for both the containing element and the Phaser constructor. vez 1 Link to comment Share on other sites More sharing options...
shpowley Posted May 3, 2016 Share Posted May 3, 2016 Issue https://github.com/photonstorm/phaser/issues/2458 seems specific to phaser 2.4.7 and uses game.scale.scaleMode with a fixed # of pixels for width/height - scaling the actual pixels to be visually larger. If you specify a parent container in the Phaser.Game constructor, the .SHOW_ALL method doesn't scale at all. This issue could be related, but I think this is separate issue as this it affects the actual # of pixels for width/height, not actual scaling. Could be wrong, but I think this issue has been around since at least 2.4.6. Link to comment Share on other sites More sharing options...
grinmonk Posted May 6, 2016 Share Posted May 6, 2016 I have exactly the same issue here with this setup: this.$stage = document.getElementById("stage"); this.game = new Phaser.Game("100", "100", Phaser.AUTO, this.$stage, { preload: this.preload, create: this.create, update: this.update, render: this.render }); Link to comment Share on other sites More sharing options...
Recommended Posts