Jump to content

Centering the scene/container


Recommended Posts

Hello,

 

first I would like to thank everyone supporting the Pixi.js framework because it is awesome! Thank you a lot!

 

Now, to my question. It is probably very simple, but I can not seem to get my head around it.

 

I have a container which contains everything the game comprises of. What I would like to do is center it in the middle of the screen. By default, container is at the left border of the screen. 

 

What is the simplest way and how would I do it to center my scene/container in the middle of the screen?

 

Snippet of a code:

var width = 1280;var height = 720;var baseWidth = Math.floor(window.innerWidth);var baseHeight = Math.floor(window.innerHeight);var aspectRatio = baseWidth/baseHeight;var renderer = PIXI.autoDetectRenderer(width*aspectRatio, height, {backgroundColor: 0xFFFFFF}); document.body.appendChild(renderer.view);// create an new instance of a pixi stage with a grey backgroundvar stage = new PIXI.Container(); // I WANT TO CENTER THIS CONTAINER 
Link to post
Share on other sites

So space to the left and right wont be used at all? Then its better to position the DOM element with CSS. 

renderer = PIXI.autoDetectRenderer(width, height);renderer.view.style.position = 'absolute';renderer.view.style.left = Math.floor((baseWidth-width)/2)+'px';renderer.view.style.top = '0px';document.appendChild(renderer.view);

Also you have to add some code just in case the screen is vertical.

Link to post
Share on other sites

renderer.view is just a regular canvas DOM element. So you may use CSS as you would for any other DOM element:

var width = 1280;var height = 720;var baseWidth = Math.floor(window.innerWidth);var baseHeight = Math.floor(window.innerHeight);var aspectRatio = baseWidth/baseHeight;var renderer = PIXI.autoDetectRenderer(width*aspectRatio, height, {backgroundColor: 0xFFFFFF});// apply CSS to the DOM elementrenderer.view.style.margin = "0 auto";renderer.view.style.display = "block";document.body.appendChild(renderer.view);var stage = new PIXI.Container();

Because the margin is being used to center the element, the container will automatically move on window resize events.

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...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...