Jump to content

Create stretchable sprites with fixed parts


Recommended Posts

Hello everyone !


I'm new to Phaser and can't figure out how to create a sprite that contains a stretchable area as well as fixed parts.

My goal is to have something similar to the following image :




I want this sprite to be resizable at any time (myStretchableSprite.width = w).


I tried the following way :

* Create a main Sprite

* Add a left child Sprite with a fixed width

* Add a center child TileSprite with variable width

* Add a right child Sprite with fixed width


It works fine when initializing the parent sprite with a given width, but if I try to update the parent sprite's width later, some kind of scale is applied to all its child elements and the result is far from what I expected.


Any ideas on how to achieve this ?


Thanks a lot !

Link to comment
Share on other sites

i think if you are adding sprites to a parent and changing the parent's properties it is expected to change the children to.

One solution is to Set the left end at x = 0 then the stretchable section at x=8. You'll then need to calculate the x for the right hand section based on the width. If you resize the middle at any point you'll also need to recalculate the right piece. you could do something similar with Groups but they don't receive events which I guess you'll want for a button.

Just remembered: This thread has a really useful fiddle which could help you http://www.html5gamedevs.com/topic/10805-how-to-use-an-image-to-fill-an-area/

Link to comment
Share on other sites


  • Recently Browsing   0 members

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