10
\$\begingroup\$

I want to create an effect similar to this animation where two shapes separate over time but are connected (for a time) by something gooey that stretches and eventually breaks. Like pizza cheese, but specifically in 2D.

Still from the desired animation effect.

I'm using Swift and SpriteKit. I'm thinking this probably involves keyframes bezier path animations, but I'm not sure. How can I achieve this effect?

Improve this question
\$\endgroup\$
8
  • 6
    \$\begingroup\$ @Katu This looks more specific to me than the typical "how to get started" question — there's a clear example of the ultimate target effect. It seems reasonable that a relevant expert could suggest techniques for this effect without needing to explain everything from scratch. What would help, NSologistic, is if you can describe more of what you've already done so far, so people answering have an idea of where to start. I think your original title gave the impression that we'd have to explain animation from first principles. ;) \$\endgroup\$
    – DMGregory ♦
    Feb 13, 2016 at 14:00
  • 5
    \$\begingroup\$ Related question; in 3D, about stretchy pizza cheese \$\endgroup\$
    – Anko
    Feb 13, 2016 at 15:37
  • 3
    \$\begingroup\$ Just because a question includes the words "I don't know where to begin" does not make that question off-topic here. \$\endgroup\$
    – user1430
    Feb 15, 2016 at 17:20
  • 4
    \$\begingroup\$ Perhaps some sort of metaball type approach might be a start? \$\endgroup\$
    – Benzi
    Feb 17, 2016 at 6:33
  • 1
    \$\begingroup\$ World of Goo involves similar stretching effects. As far as I remember, they just stretched and tilted a single sprite, simple yet good enough looking solution. Unfortunately, I cannot find this article, despite spending 10 minutes googling. \$\endgroup\$
    – Maxim Kamalov
    Mar 10, 2016 at 1:33

2 Answers 2

Reset to default
1
\$\begingroup\$

One way to do it using simple 2D transforms is to have multiple sprites to create each strand, which seems like how your example does it. Using separate colours, it might look like this:

enter image description here

And as the pizza stretches, make the strand (yelow) and the connectors (blue) thinner:

enter image description here

The advantage of this is that you can individually animate strands getting thinner and snapping.

There are other approaches that could work too, like faking it with a single, textured sprite that stretches, or traditional, frame-by-frame animation. It depends on how much work you want to do, and how realistic and adaptive you want it to be.

Improve this answer
\$\endgroup\$
0
\$\begingroup\$

You could try to create few attachment points on your sprites and define a line between the two you want to stick and create a couple attachment points along that line, then connect the dots with a sticky barbell-like sprite.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Although I agree with you that sometimes people vote to close a bit too much, you yourself could have spent more time developing your answer to the question than complaining about the site - considering that this specific space is intended to answer the question and you seem to have an idea. However, your idea is barely comprehensible as it currently is. Try editing your answer, detailing further the idea you seem to have. \$\endgroup\$
    – MAnd
    May 11, 2016 at 8:03
  • 3
    \$\begingroup\$ I modified your answer so it fits within the site's guidelines. If you want to discuss about the site's policies, you're more than welcome to earn a few reputation points and discuss about it on Game Development Meta, where discussion is more that welcome. \$\endgroup\$
    – Vaillancourt ♦
    May 11, 2016 at 11:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .