scaling with pixi js

[hubert]

HI,

 

I have a problem with scaling my game to different sizes and zooms.

 

My canvas scales while zooming or orientation change and maintains the same ratio 1024/600.

 

The structure of my stage is like this.

 

renderer.stage -> viewport (DisplayObjectContainer)

 

Viewpor :

-> camera 0 (DisplayObjectContainer)

-> camera 1 (DisplayObjectContainer)

-> camera 2 (DisplayObjectContainer)

-> camera 3 (DisplayObjectContainer)

-> camera 4 (DisplayObjectContainer)

-> camera 5 (DisplayObjectContainer)

-> camera 6 (DisplayObjectContainer)

-> camera 7 (DisplayObjectContainer)

-> camera 8 (DisplayObjectContainer)

 

all cameras have 9 sprites that are dynamically added or removed when the player moves in order to save cpu.

cameras and their elements are added to stage when the are in visible area.

 

each camera is used for different directions (north/south; east/west)

camera is the middle camera that displays the current scene;

 

the problem is that when I start to scale the viewport all the cameras begin to fall apart;

window.addEventListener('resize', resize, false);window.addEventListener('orientationchange', resize, false);

Additionally tile images inside the cameras fall apart too.

 

I have tried three ways to make it work.

 

01. resize the renderer

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

which just scales the renderer and does not scale the content to maintain the same size of tiles and main hero.

 

02. Iterate through the whole stage

for(var obj in stage.children){       stage.children[obj].scale.x *= 1/( (oldHeight/newHeight) );       stage.children[obj].scale.y *= 1/( (oldHeight/newHeight) );}

02. Iterate through the whole stage and nested elements.

var scale = function(objects){   for(var obj in objects){       objects[obj].scale.x *= 1/( (oldHeight/newHeight) );       objects[obj].scale.y *= 1/( (oldHeight/newHeight) );       if(objects[obj].children.length > 0){          scale(objects[obj].children);       }   }}

And this are the results produced by these different methods!

 

This is the initial view produced in default 100% zoom standard for my browser.

 

 

01. Resize only

 

50%

 

 

 

150%

 

 

02. Scaling without nested scaling

 

70%

 

 

 

125%

 

 

03. Nested scaling for all containers and children

 

70%

 

 

 

125%

 

 

 

 

The problem is that I should somehow change the position of the elements. But that means that I would have to compute them by some kind of function.

 

IS THERE ANY OTHER WAY TO SCALE THAT KIND OF STRUCTURE IN A SIMPLE WAY?

 

If you have any advice please help me out! Or for future devs that might have the same problem!

 

BTW. Pixi is AMAZING!

 

http://www.sevenative.com

[MajorMilizii]

try this:

 

var scale = function(objects){   for(var obj in objects){       objects[obj].scale.x *= 1/( (oldHeight/newHeight) );       objects[obj].scale.y *= 1/( (oldHeight/newHeight) );       objects[obj].position.x *= objects[obj].scale.x;       objects[obj].position.y *= objects[obj].scale.y;       if(objects[obj].children.length > 0){          scale(objects[obj].children);       }   }}

[hubert]

hey! thanks !

 

But I already figured it out!

 

All you have to do is to wrap all your containers inside a wrapper and just scale the wrapper. Pixi does the rest!

 

http://www.sevenative.com