Jump to content

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


jinzo7
 Share

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 !


 

Link to comment
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.

Link to comment
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.

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