11
\$\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?

\$\endgroup\$
  • 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 '16 at 14:00
  • 5
    \$\begingroup\$ Related question; in 3D, about stretchy pizza cheese \$\endgroup\$ – Anko Feb 13 '16 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 '16 at 17:20
  • 4
    \$\begingroup\$ Perhaps some sort of metaball type approach might be a start? \$\endgroup\$ – Benzi Feb 17 '16 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 '16 at 1:33
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.

\$\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.

\$\endgroup\$
  • \$\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 '16 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 '16 at 11:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.