11

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?

Community
  • 1
NSologistic
  • 243
  • 1
  • 5
  • Hello and welcome to Gamedev.SE! Questions about how to get started are not suitable for this site, because those tend to lead discussion and non-factual, but opinion based answers. You should just dive in, start experiencing and when you have actual problem, feel free to ask help for it. – Katu Feb 13 '16 at 13:13
  • 6
    @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. ;) – DMGregory Feb 13 '16 at 14:00
  • 5
    Related question; in 3D, about stretchy pizza cheese – Anko Feb 13 '16 at 15:37
  • Well, he clearly states, that he does not know where to begin with this. I feel that this kind of questions belong to forums, where you can have two-way conversation about the subject. Only possible answers, without giving more details, would be huge tutorials that cover all the cases. Or maybe it could be answered with a simple "Yes/No"? Glad we all have a vote, no dictatorship here :) – Katu Feb 13 '16 at 16:27
  • 3
    Just because a question includes the words "I don't know where to begin" does not make that question off-topic here. –  Feb 15 '16 at 17:20
  • 4
    Perhaps some sort of metaball type approach might be a start? – Benzi Feb 17 '16 at 06:33
  • 1
    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. – Maxim Kamalov Mar 10 '16 at 01:33
  • OP, this effect is a case of an effect called "morphing": two objects morph into single one or visa versa. Answering your question, you may want to:
    1. search for "2d morphing";
    2. grasp how it works and try morphing 1 object;
    3. add "connection" points to both of your objects - these points would be used to actually "dock" one object to another.

    I've never done it in 2D though myself, only in 3D back in the university, so I can't point you to some specific algorithm.

     – Sergey.quixoticaxis.Ivanov Sep 16 '16 at 11:07

2 Answers2

1

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.

congusbongus
  • 14,835
  • 58
  • 89
0

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.

Vaillancourt
  • 16,325
  • 17
  • 55
  • 61
joe shmoe
  • 1
  • 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. – MAnd May 11 '16 at 08:03
  • 3
    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 [meta], where discussion is more that welcome. – Vaillancourt May 11 '16 at 11:20