Create stretchable sprites with fixed parts

[super_tomtom]

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 !

[spencerTL]

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/

[Odk]

Hello,

I would use BitmapData for such things: http://docs.phaser.io/Phaser.BitmapData.html You will need to create function that draws your button and call it every time you need to change width.