Jump to content

Container keep and scale on resize


Recommended Posts

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";


(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 ?


Link to comment
Share on other sites

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, ...);

//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);


Link to comment
Share on other sites

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



Link to comment
Share on other sites

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];

    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;



Link to comment
Share on other sites

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);


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...