Sign in to follow this  
turnA

Horizontal Align Problem with Phaser 2.3

Recommended Posts

Hi there,

 

I have just updated my games with the latest Phaser 2.3, but it seem now my games will not horizontally aligned to Center like usual, it just stay left aligned. Vertical align has no problem though.

Do anyone have problem like this with Phaser 2.3? 

 

My css in index.html:

		body {			margin: 0;			padding: 0;			background-color: #1d4633;		}		canvas {			padding-left:0;			padding-right:0;			margin-left:auto;			margin-right:auto;			display:block;			width:100%;		}

My scaling and align code in boot.js:

this.stage.backgroundColor = '#1d4633';this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.scale.pageAlignHorizontally = true;this.scale.pageAlignVertically = true;

Any help will be greatly appreciated!

Thanks.

Share this post


Link to post
Share on other sites

Thank you for your reply icp, but I have problem with the horizontal align, not vertical.
I also want to add that my Phaser/canvas element is located directly on the window element, not under div element or something.

Share this post


Link to post
Share on other sites

Try this:

this.stage.backgroundColor = '#1d4633';this.scale.pageAlignHorizontally = true;this.scale.pageAlignVertically = true;this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

Share this post


Link to post
Share on other sites

I have tried too icp, unfortunately that doesn't work :(

Thanks for the help though, been pulling my hair for several hours now.

 

I just don't understand, how this thing (aligning) that worked flawesly before, suddenly changed now... 

Share this post


Link to post
Share on other sites

Anyone? Is it only me that encounter this problem on Phaser 2.3??

Maybe I can see any example project that can successfully have center horizontal align using Phaser 2.3?

Appreciate any feedback/reply/information...

Share this post


Link to post
Share on other sites

Looks like your CSS will take care of that with the margins set like that. What happens if you remove the "this.scale.pageAlignHorizontally = true;" line?

 

I'd take out the "width: 100%", though... and the "display:block", that's redundant.

Share this post


Link to post
Share on other sites

@drhayes: Wow, you are right! I must use ONLY the CSS or the horizontalAlign = true; to make it work.

I think that make it easier for new user of Phaser, but it certainly confuse old timer like me who has limited knowledge of CSS and only use old template that works without problem before.

 

Thanks for the help drhayes! :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.