Jump to content

scaling with pixi js


hubert
 Share

Recommended Posts

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.

 

npXUXiq.png

 

01. Resize only

 

50%

RgtzSe5.png

 

 

 

150%

4ceWWVN.png

 

 

02. Scaling without nested scaling

 

70%

 

J78x9K9.png

 

 

125%

 

zidIRpV.png

 

03. Nested scaling for all containers and children

 

70%

 

yqvmirL.png

 

 

125%

 

mgSOgww.png

 

 

 

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! :D

 

http://www.sevenative.com

Link to comment
Share on other sites

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

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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