Jump to content

Trouble filling parent element in DOM


Recommended Posts

<div id="game" style="height: 600px; width: 800px; margin: 20px; position:relative;">
<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

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.

Link to comment
Share on other sites

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

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


Image 10.png

Link to comment
Share on other sites


  • Recently Browsing   0 members

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