Jump to content

Dynamically resizing pixi stage on window resize.


Recommended Posts

Trying to think through how to dynamically resizing pixi stage on window resize.  I'm using the following the set the size of my stage to the window, it works fine (though it distorts the images, does not keep ratio).

stageWidth = $(window).innerWidth(); stageHeight = $(window).innerHeight();console.log(stageWidth, stageHeight);    // create an new instance of a pixi stage    var stage = new PIXI.Stage(0xff00ff);    var renderer = PIXI.autoDetectRenderer(stageWidth, stageHeight);

But how do I extend this to update the stage size when the browser window is resized?

I tried the following (with a call to onResize inside my animate function) - it may be resizing the stage (i'm not sure), but it's not resizing the content - and I'm getting a warning in the console (WARNING: Too many active WebGL contexts. Oldest context will be lost): 


  function onResize(){   $( window ).resize(function(){    stageWidth = $(window).innerWidth();     stageHeight = $(window).innerHeight();    renderer = PIXI.autoDetectRenderer(stageWidth, stageHeight);   })   } 

Maybe I need to be updating the ' document.body.appendChild(renderer.view); ' instead? How would I do that, if in fact that's what I need to do? 

Link to comment
Share on other sites

I did it like this:

window.onresize = function (event){    var w = window.innerWidth;    var h = window.innerHeight;    //this part resizes the canvas but keeps ratio the same    renderer.view.style.width = w + "px";    renderer.view.style.height = h + "px";    //this part adjusts the ratio:    renderer.resize(w,h);}
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...