Sign in to follow this  
tduval

Phaser Canvas overflow on div

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.