Container keep and scale on resize

[Fovi]

Hi, i trying to implement different resizing styles for different containers. Right now i have to choose between:

public height: number = window.innerWidth; public width: number = window.innerHeight;

(Keep position of sprites / resize them exacly as window is resizes)

this.renderer.view.style.height = this.height + "px"; this.renderer.view.style.width = this.width + "px";

and

(Keep sprites where they are, do not move them)

this.renderer.resize(this.width, this.height);

But how can i achieve first effect on one Container and second on other Container in the same renderer ?

 

[TickleMeElmo]

Just a blind guess but maybe you mean something like this? If not, please specify a bit

const WIDTH = x;
const HEIGHT = y;

var renderer = PIXI.autoDetectRenderer(WIDTH, HEIGHT, ...);
document.body.appendChild(renderer.view);

//main container, use this to render everything.
var stage = new PIXI.Container();

//the container we want to resize.
var container1 = stage.addChild(new PIXI.Container());

//the container we don't want to resize.
var container2 = stage.addChild(new PIXI.Container());


var resize = function() {

 var ratio = Math.min(width / renderer.width, height / renderer.height);

 // just scale that one container and leave other as it was.
 container1.scale.x = container1.scale.y = ratio;

 renderer.resize(Math.ceil(WIDTH * ratio), Math.ceil(HEIGHT * ratio));

};

window.addEventListener("resize", resize);

 

[Fovi]

That's kind of working. There is just problem with positioning.
How does scale affect position ?

[Taz]

Maybe try this ratio calculation for maintaining the aspect ratio and filling the smaller dimension of window:

var ratio = Math.min(window.innerWidth / WIDTH, window.innerHeight / HEIGHT);

 

[TickleMeElmo]

On 5/11/2017 at 5:20 PM, Fovi said:

That's kind of working. There is just problem with positioning.
How does scale affect position ?

Well, think of a container as a rubber for a second. and some dots on the rubber as DisplayObjects(Sprites/Containers) in the container, now if you stretch the rubber, not only does it go bigger but the location of dots changes(and the size as well). Same logic appears in PIXI, in all rendering engines I believe. If you only want to change scale and not position then I'm afraid you will have to do it manually by just going over all the elements you want to affect like this and then just changing their scale not position. 

 

Ik this is quite hacky approach but couldn't think of any better atm. haven't tested this code either and have no idea if it will actually work, but yeah, try and let me know if this was something you were loooking for. 

//call this function for the DisplayObject you want to affect (container1 in your case);
//this should resize and keep children at same pos as they were before, 
function resizeDisplayObject(obj) {
 obj.scale.x = obj.scale.y = ratio;

 //go over all children and call the same function for them as well.
 for(var i = 0; i < obj.children.length; i++) {
  
  var child = obj.children[i];

  //this should fix having the cords not going bad after multiple calls on same DisplayObject
  if(!child.initPos) {
   child.initPos = {
    x: child.x,
    y: child.y,
   }
  };

  //now just put their position back to where they were before
  child.x = child.initPos.x / ratio;
  child.y = child.initPos.y / ratio;

  //call the same func again for children
  resizeDisplayObject(child);

 };
};

 

[TickleMeElmo]

Now that I think of it you probably are looking for something like this instead:

 

//a bit weird name but idk, my creativity is failing me today for some reason.
//so the function just keeps the position of first children.
function resizeDisplayObjectFirstChildren(obj) {

 // I've assumed you keep ratio as a global value, probably not a good Idea though. But if you're 
 // just a beginner then who cares right?
 obj.scale.x = obj.scale.y = ratio;

 for(var i = 0; i < obj.children.length; i++) {
   var child = obj.children[i];

   if(!child.initPos)
    child.initPos = {x: child.x, y: child.y};
   
   //instead of changing children's children as before, which would make them probably look really 
   //weird, just change the first children. yet again this whole function is very weird so idk.
   child.x = child.initPos.x / ratio;
   child.y = child.initPos.y / ratio;

 }
}

 

[ivan.popelyshev]

Better change scale/position/pivot of parent than all children. That won't end well.

This thing moves to center of screen, scales, and then moves coords back. You dont have to change children scale after that. If you want to scale from (0,0), just set position and pivot to zero.

var W = 800, H = 600;

stage.position.set(renderer.width/2, renderer.height/2);
stage.scale.set(ratio, ratio);
stage.pivot.set(W/2, H/2);