Runtime Dimension Changes

[JAA]

You set up an application element:

g_Pixi = new PIXI.Application(width, height, { backgroundColor: 0x000000 });
document.getElementById(strCanvasDiv).appendChild(g_Pixi.view);

'width' and 'height' are the dimensions of the canvas with id strCanvasDiv..

Question 1: in the object, should I send the canvas in the 'view' element? Ie,

g_Pixi = new PIXI.Application(width, height, { view: document.getElementById(strCanvasDiv), backgroundColor: 0x000000 });

But then the user decides he wants to change the dimensions of the screen (which in my code will change the dimensions of the canvas). For example, he could modify the window or even change landscape to portrait.

Question 2: What do I do to change the dimensions of the renderer to the new dimensions of the canvas so it all works still?

 

[Taz]

1. The docs say to pass canvas element not div element. If you want to do it the second way I think you need to create the canvas element yourself and pass that as the view parameter.

2. Are you calling g_Pixi.renderer.resize(width, height) when the window resizes? http://pixijs.download/release/docs/PIXI.WebGLRenderer.html#resize

 

[ivan.popelyshev]

Pass it to the view, use "g_Pixi.renderer.resize(newWidth, newHeight)" every time. Also, if you are making it for mobile and want to use "resolution" property, too, you have to understand that w/h you pass are UNMULTIPLIED, and they are "g_Pixi.screen" . Multiplied (real) pixel size in "g_Pixi.view" will equal to (newWidth * resolution, newHeight*resolution). 

There's parameter in options, "autoResize", it ensures that CSS width/height is in sync with "g_Pixi.screen", but most of devs are controlling CSS themselves. 

[JAA]

Thanks guys.

[Question to Ivan at end.]

My code is now (where strCanvas is the id of the canvas, not containing div):

g_Pixi = new PIXI.Application(width, height, { view: document.getElementById(strCanvas), backgroundColor: 0x000000 });

And my adjust size code is now:

g_Pixi.renderer.autoResize = true;
g_Pixi.renderer.resize(widthDOM, heightDOM);

@Ivan, I am not sure what I should be doing about the resolution for mobiles etc.

How do I find the screen resolution, and how do I alter my code to take it into account?

[ivan.popelyshev]

{ view: ... , resolution: window.devicePixelRatio }

Theoretically, nothing else has to be changed. Width and height are still the same. Coords for sprites and containers are same.

But every time something goes wrong, so i dont know what to say, waiting for your cries about new problem )