How to create a sticker peel effect

Help and Feedback Scripting Support
#1

I’m trying to create a ui sticker peel animation, but im not sure where to start.

Theres 3 elements, the sticker cover (ImageLabel), the sticker back side (Frame), and whatever is below it (ImageLabel)

I don’t really want to use a sprite sheet, because i want to easily customize this

I created a mock-up for how I’d like it to look (though the second to last frame isn’t the greatest)

If anyone has any ideas please let me know!

#2

The easiest option would probably be to create a flat plane with bones and then animate it however you want (could do verlet integration for example). Could also just use an EditableMesh as well.

Certain “bones” would be locked in place until there is enough “strength” to pull them off. One “bone”/point would always be your dragging point and then you calculate the pull strength on the rest of the points relative to that.

The flat plane/EditableMesh would be in a ViewportFrame.

Realistically that is going to be the best way for you to get a dynamic variant of this.

2 Likes
#3

Thanks! I’ll look into how to make this and start right now

#4

I’m a little stuck and everything I’m trying doesn’t seem to work haha. A few questions:

  • How would the pull strength be calculated? I tried distance calculations, but that doesn’t work too well with the drag point being pulled back on itself. I tried saving the original offset of each bone to a table, but that seemed to be a dead end and I didnt know where to go with that
  • How should the positions of the individual non-drag-point bones on the grid be calculated? I honestly have no idea where to place them that wouldn’t warp/distort the overall size of the sticker. I’m wondering if theres something in place to prevent distortion that the “strength” wouldn’t even need to be calculated but I dont know
#5

The drag point isn’t supposed to be an actively simulated point/bone, it’s supposed be your anchor from which the rest of the points are simulated relative to. The actual calculation of the “pull strength” and its “breaking threshold” is just an artistic thing, so you’ll have to experiment.

As for the placement of the points, they should be placed all on the edge. The amount you place in total is up to you. As for the distortion, you would typically store the base distance between the nearest points and if it exceeds those distances then you would correct the point as to satisfy all of its distance requirements. This is actually a great way to determine if a point should be “broken” off or not.

1 Like