Question

157

Dynamically resize the pixi stage and it's contents on window resize and window load

rated 0 times [ 163] [ 6] / answers: 1 / hits: 53935 / 9 Years ago, sun, may 31, 2015, 12:00:00

I'm trying to dynamically resize the pixi stage (canvas and contents) on window resize. And also have it initially load at the size of the browser window without changing ratio.

I'm using the following to set the initial size basically to window.innerWidth & window.innerHeight.

But it's doing something strange, it's loading at a smaller size (but not the size of the canvas specified in the html) then it's expanding to fit the window.

var w;

var h;

    

window.onload = function() {

    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"



//  init();

};

Here's my onresize function - it's resizing the canvas, but not the content.

I thought being that it's updating the renderer.view, it would resize the content, but it's not doing so.

How do I resize the content of the stage/renderer.view content?

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

}



    // create an new instance of a pixi stage

    var stage = new PIXI.Stage(0xff00ff);

    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);



    // add the renderer view element to the DOM

   var mypixiStage = document.body.appendChild(renderer.view);

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

valentinam

Add To Favorites

Follow

Total Points: 166

Total Questions: 117

Total Answers: 81

Location: Puerto Rico

Member since Sun, Jun 27, 2021

3 Years ago

answered 9 Years ago braeden · Accepted Answer

You will want to setup a size and ratio for the resize event function to reference. Then, you'll need a resize function that checks the window size in order to keep the ratio when resized. I'm also running the resize function manually to start for initial page load.

Also, note that I'm not running renderer.resize. I'm just resizing the drawing area.

Here's a fiddle for you to look at: http://jsfiddle.net/2wjw043f/

Here's the fiddle code:

var size = [1920, 1080];

var ratio = size[0] / size[1];

var stage = new PIXI.Stage(0x333333, true);

var renderer = PIXI.autoDetectRenderer(size[0], size[1], null);

document.body.appendChild(renderer.view);

var texture = new PIXI.RenderTexture();

r1 = new PIXI.Graphics();

r1.beginFill(0x00ffff);

r1.drawRect(0, 0, 100, 100);

r1.endFill();

texture.render(r1);

var block = new PIXI.Sprite(texture);

block.position.x = 100;

block.position.y = 100;

block.anchor.x = .5;

block.anchor.y = .5;

stage.addChild(block);

requestAnimFrame(animate);

resize();

function animate() {

    requestAnimFrame(animate);

    block.rotation += .01;

    renderer.render(stage);

}

function resize() {

    if (window.innerWidth / window.innerHeight >= ratio) {

        var w = window.innerHeight * ratio;

        var h = window.innerHeight;

    } else {

        var w = window.innerWidth;

        var h = window.innerWidth / ratio;

    }

    renderer.view.style.width = w + 'px';

    renderer.view.style.height = h + 'px';

}

window.onresize = resize;