Jump to content

Center Renderer.view


buhtla
 Share

Recommended Posts

Hey guys,

 

I have renderer which is smaller than browser window size.

I want to center it in the middle of the browser window. 

How can I achieve this?

 

So far I have achieved this with Renderer.view.style.posLeft, but I would like to do it with css only if possible.

Link to comment
Share on other sites

  • 3 weeks later...

the correct way of doing it is very simple.


 


What you have to do is to set you canvas to position fixed. Center it both top and left with 50% and use negative margins.


 


NEGATIVE MARGINS ARE A STANDARD ACCEPTED BACK IN THE TIMES OF IE5 AND THEY WILL WORK ON ALL BROWSERS!!!


 


THE CODE:



<HTML>

<body>

<style>

#test {

border: 1px solid red;
position: fixed;
top: 50%;
left: 50%;
margin-top: -125px;
;
}

</style>

<canvas id="test"></canvas>

<script>

var canvas = document.getElementById('test');
var _renderer = PIXI.autoDetectRenderer(400, 250, canvas, false, true);
var stage = new PIXI.Stage(0x000000);


</script>

</body>

</HTML>

add ; for some strange reason the forums code editor keeps erasing it... ? o.O or check out this fiddle that i have prepared! :D


 


This is a jsFiddle http://jsfiddle.net/Sa4fe/


 


http://www.sevenative.com


Edited by hubert
Link to comment
Share on other sites

  • 1 year later...

This is a more flexible approach, but be aware that the browser will need to be IE8+.  The advantage here being the only fixed units in the whole lot is the width and height of the game, with the caveat that the container must have a height.  You can update those and the rest will react.

 

I added inline styles on the canvas element as well (you can assign dimensions in the CSS or HTML but both is unnecessary), to illustrate the situation where you have a site with multiple games of different dimensions on different pages - you'd just need to add the game's width and height as an inline style to the HTML and the styles can remain universal across all pages.

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Game</title><style>html, body {  height: 100%;           // Needed if you want to use height: 100% within the body tag  background: black;  font-size: 14px;}.game-container {  height: 100%;           // The 'html, body' styles above can be removed if you want to use a fixed height here (ie. 800px)  text-align: center;     // Horizontally align text elements to centre  font-size: 0;           // Remove whitespace between elements (ie. a space between a word)}.game-container:after {   // Create a pseudo-element after 'game-container' div  content: '';            // Required attribute of pseudo-element  width: 0;               // Force it to have no width  height: 100%;           // Make full height of container}.game-container .game {  width: 600px;           // Your game width  height: 400px;          // Your game height  background: white;}.game-container:after, .game-container .game {  display: inline-block;  // Force these elements to behave like text, but allow width and height  vertical-align: middle; // Vertically align text WITH OTHER TEXT SIBLINGS (hence the pseudo-element)  font-size: 1rem;        // Set font-size back to 14px (will only work if font-size is assigned to the root 'html' element)}</style></head><body><div class="game-container">    <canvas class="game" style="width: 600px; height: 400px;"></canvas></div></body></html>

To get this technique to work with older browsers, you can just replace the pseudo-element with a real element:

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Game</title><style>html, body {  height: 100%;  background: black;  font-size: 14px;}.game-container {  height: 100%;  text-align: center;  font-size: 0;}.game-container .align {  // Change to a real element  width: 0;  height: 100%;}.game-container .game {  width: 600px;           // Your game width  height: 400px;          // Your game height  background: white;}.game-container .align, .game-container .game {  *display: inline;       // Hack for IE7 and below - elements need to be inline before they can be made inline-block  display: inline-block;  vertical-align: middle;  font-size: 1rem;}</style></head><body><div class="game-container">    <span class="align"></span>    <div class="game" style="width: 600px; height: 400px;"></div></div></body></html>
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.

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

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...