Centering the scene/container

[ranmasa]

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 

[ivan.popelyshev]

Math.floor(width*aspectRatio)

 

Show me where do you want (0,0) to be.

[ranmasa]

(0,0) should still be in the top left corner.

[ivan.popelyshev]

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.

[grovesNL]

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.