Jump to content

Any boilerplate for container alignment, sizing and scaling?


Recommended Posts

I'm having a little trouble approaching all of these issues.  The Pixi documentation is a tad sparse.  I intend to go with the approach in which a display object container will wrap all elements, but there are several unknowns, at least for me:


1.  Is there any good cross browser way of exactly fitting the rendering area, i.e. stage, into the viewable area of the browser?

2.  How do I size the overall container to match the stage dimensions?

3.  Are there any built-in alignment capabilities?

4.  Is stage affected by CSS?

5.  Are display object containers affected by CSS?


In the end, I am looking to have my pixi-rendered content centered horizontally and vertically and take up most of the viewing area.  I also want my code to respond reasonably to changes in aspect ratio.


I'm looking for example code, ideally, but would appreciate any informal answers in part or in whole regarding these questions.  I know I am asking for your time to save my time and your time is precious to you too.  So thanks in advance for any input you can give.

Link to comment
Share on other sites

I finally got this somewhat sorted out - there were miscellaneous gotchas here and there.  The two biggest:

1. It looks like it is best not to set the position of the "scene" DisplayObjectContainer at all - at least not when centering and when Pixi shares the page with a div above the canvas.

2. Resetting the height and width of the canvas as necessary using <canvas>.style.height and <canvas>.style.width.  You helped even more than you thought Rich - I picked up on this trick by looking in the Phaser source. :)

Link to comment
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.

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.


  • Recently Browsing   0 members

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