Resizing browser window without changing the size of DisplayObjects inside the stage

[caymanbruce]

Problem definition: 

My game will be able to let players resize the window or turn the window into fullscreen when playing the game. There are some sprites and containers on the stage. But when it is resizing, I hope it will not change the size and the location of the sprites and containers, at least not change it when the screen is not too small, which means when the screen is fullscreen or not too small the scale of the sprites and containers will not change. It will only change when the screen is resized to a very small window. 

But if I don't update the scale of the containers and sprites I can't keep the relative positions of them on the stage. For example I have a textbox and a button in the center of the stage when I resize the window they should stay in the center. I don't know how to do that without updating the scale to current ratio. If I update the scale of the DisplayObjects the graphics stretches and look distorted, but I just want to keep the same size and same relative position as they do in a normal window.

 

my current code:

 

function resize(event) {

        const w = window.innerWidth;
        const h = window.innerHeight;
        let wRatio = w / ENV.GAME_WIDTH; 
        let hRatio = h / ENV.GAME_HEIGHT;

        this.renderer.resize(Math.ceil(ENV.GAME_WIDTH * wRatio), Math.ceil(ENV.GAME_HEIGHT * hRatio));
        this.stage.scale.x = wRatio;
        this.stage.scale.y = hRatio;

}

window.addEventListener('resize', resize);

 

This is not very helpful for my purpose. I notice there are getBounds() and getLocalBounds() in the DisplayObject class. Will it be helpful to use these two methods?

[karamurat]

Hi, i have just signed up to this forum to answer your question. I am using pixijs for two and a half months so i hope i will be able to help you.

You don't have to scale stage. Just add your menu items in another container (let's say menuContainer). Then in resize event you should update position of container.

var p = new PIXI.Point((renderer.width - menuContainer.width) / 2, (renderer.height - menuContainer.height) / 2);
menuContainer.position = p;

This will center your menuContainer. You can access working code below.

http://codepen.io/alperenc/pen/ObrmZb

Also setting anchor (0.5,0,5) for text and sprites is useful for positioning.

Good luck.

[caymanbruce]

12 hours ago, karamurat said:

Hi, i have just signed up to this forum to answer your question. I am using pixijs for two and a half months so i hope i will be able to help you.

You don't have to scale stage. Just add your menu items in another container (let's say menuContainer). Then in resize event you should update position of container.

var p = new PIXI.Point((renderer.width - menuContainer.width) / 2, (renderer.height - menuContainer.height) / 2);
menuContainer.position = p;

This will center your menuContainer. You can access working code below.

http://codepen.io/alperenc/pen/ObrmZb

Also setting anchor (0.5,0,5) for text and sprites is useful for positioning.

Good luck.

Thanks karamurat. I have used the same solution except that I assign values to my container's x and y coordinates. I found that this works but the bad thing is I have to use getChildAt method to figure out which one is the container I need to keep its size on the stage.

Another issue is if I have many (hundreds of) sprites on the stage I will need to loop through those sprites using custom codes and find out which ones will be added onto the screen when I resize to full screen and which ones to be hidden from the screen when I resize the window to be smaller.