How to center stage on browser?

johhnyblagger · November 5, 2015

Hello all!

The only thread on this topic seems to be this one, and I cannot get any of the suggestions to work for me. Can anyone give me a way to center my game?

Thank you!

ivan.popelyshev · November 5, 2015

Negative margin is still the best answer.

Prozi · November 5, 2015

something along:

(window.width - stage.width) / 2

(window.height - stage.height) / 2

?

is this what you're talking about we need more information

ivan.popelyshev · November 5, 2015

Yeah, something like that will work too:

function resize() {renderer.view.style.position = 'absolute';renderer.view.style.left = ((window.innerWidth - renderer.width) >> 1) + 'px';renderer.view.style.top = ((window.innerHeight - renderer.height) >> 1) + 'px';} resize();window.addEventListener('resize', resize);

Dont forget to set body overflow:hidden

mattstyles · November 5, 2015

This isnt necessarily the best way, but its a way (if I understand your question correctly)

You'll have to add some sizing to the stage element, but you probably have that anyway

.stage {  position: absolute; // or even position: fixed  left: 50%;  top: 50%;  transform: translate3d( -50%, -50%, 0 );}

Fricken Hamster · November 6, 2015

Look into flexboxes

johhnyblagger · November 6, 2015

Hey all, great community you have here! 5 responses within a day is better than stackoverflow.

mattstyle's answer worked best for me. I basically did the following:

var renderer = PIXI.autoDetectRenderer(WIDTH, HEIGHT);document.body.appendChild(renderer.view);renderer.view.style.position = 'absolute';renderer.view.style.left = '50%';renderer.view.style.top = '50%';renderer.view.style.transform = 'translate3d( -50%, -50%, 0 )';

So the code above works great at centering my stage and continuously center the stage even if the browser size is changed.

Now here is another question I have been unable to solve, how can I append this stage to a specific div in my html so it does not overlay ontop of other html elements?

Here is what I mean:

<html><head></head><body>  <script src="pixi.js"></script>  <script src="Creator.js"></script>  <div>     <h1>Hello, I want to be above the game stage!</h1>  </div>  <div id="canvas">  </div>  <div>     <h1>Hey, I want to be below the game stage!</h1>  </div></body></html>

Creator.js:

//creator.jsvar canvas = document.getElementById('canvas');var renderer = PIXI.autoDetectRenderer(400, 300,canvas);document.body.appendChild(renderer.view);//I still want to the stage to be in the centerrenderer.view.style.position = 'absolute';renderer.view.style.left = '50%';renderer.view.style.top = '50%';renderer.view.style.transform = 'translate3d( -50%, -50%, 0 )';

With the code above I get:

As the <h1> tags show, the stage is not inbetween them.

Thanks again!

ivan.popelyshev · November 6, 2015

Two options:

1) ERASE

renderer.view.style.position = 'absolute';renderer.view.style.left = '50%';renderer.view.style.top = '50%';

change style to margin: auto; That will align it horizontally.

(OR you can apply it to containing div, in that case set width and height to that div).

2) Make two divs with position:absolute, specify their left,top,width,height or whatever, so that they are positioned above and below the canvas.

johhnyblagger · November 6, 2015

Here is me trying ivan.popelyshev's option 1:

html:

<html><head></head><body>  <script src="pixi.js"></script>  <script src="Creator.js"></script>  <div>     <h1>Hello, I want to be above the game stage!</h1>  </div>  <div id="canvas">  </div>  <div>     <h1>Hey, I want to be below the game stage!</h1>  </div></body></html>

Creator.js

//creator.jsvar canvas = document.getElementById('canvas');var renderer = PIXI.autoDetectRenderer(400, 300,canvas);document.body.appendChild(renderer.view);//renderer.view.style.position = 'absolute';//renderer.view.style.left = '50%';//renderer.view.style.top = '50%';renderer.view.style.transform = 'translate3d( -50%, -50%, 0 )';

renderer.view.style.margin = 'auto';

which gives me the following:

which is not what I'm looking for

I'm assuming I'm not correctly setting margin: auto;

mattstyles · November 6, 2015

The `margin:auto` only works on block element or on `width:100%` elements, but its frail (depending on structure) and it doesnt give you vertical alignment.

Absolute simplest way is to carry on how you're doing, I'm not exactly sure where you want each element but if you absolutely position all of the top level elements you can just use height, width, top & left to position everything. Then apply `z-index` to allow z depth.

`position:absolute` removes elements from the normal web flow, so its not strictly necessary here but there are 5 or 6 different ways to solve your problem. Absolutely positioning everything is pretty easy and for game makers (particularly from non-web backgrounds) its intuitive. The thing you lose that way is responsivity but that isnt always much of an issue for games anyway.

Prozi · November 8, 2015

If you'll do it with styles

stick to CSS, position top 50 50 and translate -50 -50

but add all the vendors prefixes

-moz-transform:

-mz-transform:

-o-transform

-webkit-transform

or it wont work properly on old android or other older browsers

Prozi · November 8, 2015

and about margin auto it will only work horizontally AND when the width is specified in css too

then

add translateX -50

How to center stage on browser?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members