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

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.

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.


  • Recently Browsing   0 members

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