Stage and DisplayObjects resize to fit the screen

[caymanbruce]

How can I resize DisplayObjects on my screen when I resize the window? This is a very common requirement but I can't find tutorial bout this. For example, when I press F11 to make the window fullscreen, the stage and all displayObjects in the stage should adjust its size to fit the screen. When I drag the browser edge to resize the window the objects should also resize to fit the screen. How to achieve this?

I have this code now, but it doesn't work very well because the ratio doesn't seem quite right.

window.addEventListener('resize', resize);

function resize(event) {
    const w = window.innerWidth;
    const h = window.innerHeight;
    let ratio = Math.min( w / GAME_WIDTH, h / GAME_HEIGHT);
    stage.scale.x = stage.scale.y = ratio;
    renderer.resize(Math.ceil(GAME_WIDTH * ratio), Math.ceil(GAME_HEIGHT * ratio));
};

[themoonrat]

 

[caymanbruce]

6 minutes ago, themoonrat said:

 

I guess I am the unlucky one. This code doesn't work as I expected when I write

window.addEventListener('resize', resize);

function resize(event) {
    scaleScene(renderer, stage);
};

When I switch to full screen mode my stage doesn't expand to full screen, it only adds edges to top and bottom.

[themoonrat]

How are you going 'full screen'? You may need to add a listener to force a resize on the window after it has gone full screen? I have also in the past added a small delay so that the resize of pixi happens, say, 50ms after the window has resized to give browsers time to return accurate measurements.