Sign in to follow this  
johhnyblagger

How to center stage on browser?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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 );}

Share this post


Link to post
Share on other sites

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:

sTwMCFn.png

 

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

 

Thanks again!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:

az5WrBF.png

 

which is not what I'm looking for :(

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this