Jump to content

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

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

Link to comment
Share on other sites

Two options:




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.

Link to comment
Share on other sites

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



<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.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;

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

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...