renderer.autoResize doesn't seem to work

[royibernthal]

I'd like the canvas to always be the same width and height as the viewport.

renderer.resize() works, but renderer.autoResize doesn't seem to do anything.

 

The code is taken from here:

https://github.com/kittykatattack/learningPixi#renderer

 

As you can see I'm using PIXI.Application instead of manually initializing the stage and renderer, in case that matters.

var app = new PIXI.Application(800, 600, { antialias: true });

app.renderer.view.style.position = 'absolute';
app.renderer.view.style.display = 'block';
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);

[ivan.popelyshev]

auroResize only changes "style.width" and "style.height" accordingly to renderer size. https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/SystemRenderer.js#L231 

[royibernthal]

So it only changes when calling resize()...

Listening to window resize and calling renderer.resize() solves it. Out of curiosity, is there a built in way to do it?

 

On a slightly different subject, do the width and height I pass to PIXI.Application constructor matter if I resize the renderer afterwards or are they entirely overridden?

 

EDIT: What I wrote actually doesn't solve what I'm trying to do, I'd like the stage to be resized along with the canvas, not the canvas to display a part of the stage at canvas size.

It seems that I get the result when the canvas width and height remains the same and I change only the width and height in its style attribute, but I'm not sure it's the correct way to approach it.

 

Original

 

Canvas element width and height different than style width and height (desired result)

 

Canvas element width and height same as style width and height

[Jammy]

59 minutes ago, royibernthal said:

So it only changes when calling resize()...

Listening to window resize and calling renderer.resize() solves it. Out of curiosity, is there a built in way to do it?

 

On a slightly different subject, do the width and height I pass to PIXI.Application constructor matter if I resize the renderer afterwards or are they entirely overridden?

 

EDIT: What I wrote actually doesn't solve what I'm trying to do, I'd like the stage to be resized along with the canvas, not the canvas to display a part of the stage at canvas size.

It seems that I get the result when the canvas width and height remains the same and I change only the width and height in its style attribute, but I'm not sure it's the correct way to approach it.

 

Original

 

Canvas element width and height different than style width and height (desired result)

 

 

Canvas element width and height same as style width and height

 

If your objects are in a container you could resize the container after resizing the renderer?

[ivan.popelyshev]

Just please dont use "stage.width" and "stage.height", there will be consequences

[royibernthal]

@Jammy Could I resize PIXI.Application? I need to resize everything I have. I could add another container in the middle I guess, but would it be the most optimal solution?

 

@ivan.popelyshev I'll remember that  What should I use then?

[ivan.popelyshev]

Your own variables or constants. Width and height of stage is calculated based on children size, so better not to depend on it.

[royibernthal]

1 hour ago, ivan.popelyshev said:

Your own variables or constants.

Can you please elaborate? Is your note regarding @Jammy's answer or is it an answer in its own?

[ivan.popelyshev]

If you want to have stage dimensions 1280,720

var myScreen = new PIXI.Rectangle(0, 0, 1280, 720); 

// scale your stage accordingly: 

stage.scale.set(renderer.screen.width/myScreen.width, renderer.screen.height/myScreen.height);

UPD. edited.

 

[royibernthal]

I think you meant renderer.screen/myScreen but I got your point thanks