Jump to content

Phaser Canvas overflow on div


tduval
 Share

Recommended Posts

HI all,

I created a simple HTML/CSS layout and put my PHASER.Game Canvas inside a specific div.

var config = {
    type: Phaser.AUTO,
    width: 500,
    height: 200,
    parent: document.getElementById("divPhaser"),
    physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 },
                debug: true
            }
    }
};

console.log("Init Game Config... ", config);
var game = new Phaser.Game(config);

Then I setup a few paraemter to the Phaser canvas to align it inside the div and also to scale it aoccrding to the ratio :

boot.prototype = {
	preload: function(){
        ...
	},
  	create: function(){
                 this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
		 this.scale.pageAlignHorizontally = true;
		 this.game.state.start("...");
	}
}

But then the Canvas is always slightly right-offset of the div, even when I resize the windows or change the resolution.

I attached the screenshot of the "issue"

screenshot.19.png

Link to comment
Share on other sites

Thanks for your quick reply.

I change the game config to (physicsConfig) :

var config = {
    type: Phaser.AUTO,
    width: 500,
    height: 200,
    parent: document.getElementById("divPhaser"),
    physicsConfig: { arcade: true },
};

Am I right ?

Also, yes I had a padding to the parent div of the canvas, when I remove the padding the canvas fits perfectly inside the div.

screenshot_21.thumb.png.0710a5d9d6f54faadfb41c8ff8a26508.png

But when I create another div (without any padding/margin) inside my parent div and assign Phaser to this div instead of the parent's one, then the Phaser canvas is totally offset in the left...

screenshot_20.thumb.png.75e77af5804851521d8bbead391781bc.png

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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