Sign in to follow this  
jinzo7

Resize Sprite/Container with children - the proper way?!

Recommended Posts

Hello, nerds ! Happy v.5 release also !
 

So I`m making pinch to resize(zoom like), stretch and shrink(which is basicly resizing to constant values) over class that extends Sprite or Container. I`m not defently sure what I should extend. 

My class has methods resize(newWidth, newHeight), stretch() and shrink() . For ease I will call the class Player which extends Sprite or Container with the 3 additional methods. 

Everything was okay when the parent was Sprite with texture. Then I had to add as child different sprites. So the composition went complex and the algorithm went to the trash.

The composition is:

  • Player - extends Sprite or Container, methods resize(newW, newH), reposition(newX, newY), stretch(), shrink(); 
    • Background1 -  extends Sprite, has texture; visible only when stretch() is called; size - 50x50
    • Background2 - extends Sprite, has texture; visible only when shrink() is called; size - 100x100
    • Video - extends Sprite, has texture; always visible; initial size - 500x500
    • Label - extends Sprite, has texture; visible some times only; size - 70x70
      •  Text 

1. At the begining the Player instance has to be shrinked. So the size has to be 50x50. If user tab it, it has to stretch with size 100x100.

2. If user use pinch when it is stretched it has to resize.

The question is: 

In my methods resize(newWidth, newHeight), stretch() and shrink() which children I have to scale, change width and height and so on. 

Where the factors are -  the Background sprites are with different sizes and changing its visibility and the Video sprite is with bigger size than the need.

 

Additional(useless):

I tried a lot of things but there is no success. And maybe I`m wrong with something small. If the problem is not clearly defined I`ll make changes! Thank you very much !


 

Share this post


Link to post
Share on other sites

Yeah, we know of that problem. We even want to make example like that soon, because v5 is ready and its time to cover it with tutorials.

Its difficult to make if you dont understand how exactly PixiJS Transform works (almost the same as Flash transform). `width` and `height` are secondary calculated properties, be vary cautious if you use them! If you dont know how exactly PixiJS reflects "I want this element to have 100px width" - dont use it.

There's no layout engine inside PixiJS.

There are hundreds of ways to make a mistake in your case. My telepathy doesnt give any answers except "he uses "width" somewhere wrongly", maybe you should post the full demo. Again, the time of response depends on how clear you make it. Big demo = wait for a month before someone gets it. Small obfuscated demo = week. Small demo = day or two.

Share this post


Link to post
Share on other sites
21 minutes ago, ivan.popelyshev said:

Yeah, we know of that problem. We even want to make example like that soon, because v5 is ready and its time to cover it with tutorials.

Its difficult to make if you dont understand how exactly PixiJS Transform works (almost the same as Flash transform). `width` and `height` are secondary calculated properties, be vary cautious if you use them! If you dont know how exactly PixiJS reflects "I want this element to have 100px width" - dont use it.

There's no layout engine inside PixiJS.

There are hundreds of ways to make a mistake in your case. My telepathy doesnt give any answers except "he uses "width" somewhere wrongly", maybe you should post the full demo. Again, the time of response depends on how clear you make it. Big demo = wait for a month before someone gets it. Small obfuscated demo = week. Small demo = day or two.

Thanks for the answer !

I will continue to try tomorrow and will post some demo next days regardless of the success/fail.

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.