How I Made a Floppy Tongue for My Game

[00:00:00]I'm making a platformer where you pull yourself around with your tongue and bounce off surfaces. Part of what makes the movement feel so good is how satisfying the tongue looks as it flops and whips around you.

[00:00:09]So, I'd like to break down how I created this effect.

[00:00:16]Linkages are the building blocks of the tongue's physics simulation. Here's a one linkage.

[00:00:20]It has a target point following my mouse and an end point that doesn't do much yet. We'll start by applying a spring force to it. Hooke's law says that the force of a spring is equal to the distance it's been stretched or squashed, X, times the strength of the spring, K.

[00:00:35]After choosing a rest length and spring strength, the end point bounces around the target. But, you'll notice that it seems to be bouncing around more and more chaotically. That's because right now energy is perfectly conserved.

[00:00:45]Whenever I move the mouse, it adds energy to the system.

[00:00:48]In real life, springs don't bounce forever. They slow down as energy is lost due to friction, heat dissipation, or air resistance. So, we can simulate this by adding a dampening term, which acts opposite of and proportional to the current velocity.

[00:01:03]Now, we're just missing the key ingredient in any platformer, gravity.

[00:01:06]So, we can add that as a constant downwards force.

[00:01:09]You may be wondering why it looks like we're combining forces and accelerations willy-nilly.

[00:01:14]But really, we're assuming each linkage point has a mass of one, which makes force and acceleration interchangeable.

[00:01:20]Now that we have one functioning linkage, we can chain multiple together for a springy rope look with the end point of one linkage becoming the target of the next. Then, to move the chain, we'll update each linkage starting at the base and moving outwards.

[00:01:34]At this point, we have a satisfying simulation, but you probably noticed that in my game, this effect has been scaled down to a pixel art style.

[00:01:42]Luckily, in Godot, this is as simple as lowering the viewport resolution and setting the stretch mode to viewport in the project's display settings. This tells Godot to draw directly onto a low-resolution canvas and then to scale the final result up, giving the pixelated look we want. The downside of lowering the entire project's resolution is that everything drawn needs to be pixelated, including UI elements. This can be solved with sub viewports, which allow you to display part of a scene independently of the main camera's view.

[00:02:09]We don't need high-resolution UI, but I would like to use a shader to dynamically color the tongue.

[00:02:15]Using a sub viewport, we can render the tongue independently of the rest of the scene, color it with a shader, and then layer it over our main scene view.

[00:02:23]Currently, linkages are based on realistic spring movement. But I wanted the tongue to have a more stylized, snappier feel. So I introduced three types of linkages, all with slightly different physics: light, medium, and heavy linkages. Then, I built the tongue from a mix of these, so it feels stiffer at the base and stretchier as we move outwards.

[00:02:43]However, I noticed on extreme movements, the tongue would stretch further than I liked. It felt distracting, but I didn't want to reduce the overall stretchiness of the linkages. Instead, I clamped the maximum length of each linkage type, forcing them to stay under a certain threshold. And this is exactly how the final tongue in the game moves.

[00:03:00]One detail that I've glossed over until now is how the tongue is attached to the player. We can't just attach it to a single point because the position of the mouth changes depending on the current frame of the animation. So we need some way to store an anchor point per frame that we can move the tongue to. This could have been done manually by writing out the coordinates for each frame, but that would have taken forever. So instead, I spent even longer coding an editor tool that lets you click on the player's sprite to save a point for each frame.

[00:03:29]Then to find the attachment point, we get the player's position, which is at the bottom left corner of their collision box, and add the offset saved for the current frame.

[00:03:40]We have a tongue that flops around as the player moves, but we also want it to extend to whatever surface we grapple to. So, when we grapple, we'll arrange the linkage physics points in a straight line between the tongue's anchor point and the grapple collision point. And we'll do this every frame instead of calling the spring-based physics update.

[00:03:57]Then once the grapple is finished, we can switch back to spring physics and the tongue naturally bounces back to its rest position.

[00:04:04]Currently, transitioning in and out of the line looks jarring since it instantly attaches to the grapple point and instantly retracts when the grapple ends.

[00:04:12]We'll address the startup issue later, but the instant retraction is caused by the clamping we introduced earlier since it immediately forces all linkages to their maximum length.

[00:04:20]To fix this, we can disable clamping for a few frames after the tongue exits line mode. This allows the spring motion to pull the tongue back before clamping again.

[00:04:29]If you watched my last video, this is where the tongue effect was at.

[00:04:33]However, since then, I've significantly improved how the tongue looks when you begin a grapple.

[00:04:38]Now it starts loose and becomes taut as the grapple pulls you, which really sells that it's a real object flopping around in the world. And this was the most interesting effect to make, so let's discuss how I did it.

[00:04:50]Béziers provide a simple way for computers to draw curves. The simplest Bézier curve is a quadratic Bézier, which is a curve defined by three ordered points. Let's imagine connecting these points with two lines and sliding two points along these lines at the same rate.

[00:05:06]These two points give us a third line, which we can slide a point along at the same rate.

[00:05:12]And this final point traces a quadratic Bézier curve.

[00:05:16]We can extend this idea to a cubic Bézier curve where we start with four ordered points, which give us three lines, and like with a quadratic Bézier, we can keep sliding points along these lines and making new lines until we're left with a single point.

[00:05:31]And this point traces out a cubic Bézier curve.

[00:05:36]If you've ever used an image editing program, you might have run into cubic Bézier curves. Usually, you'll place two points to form a line and two handles extend from these points that you can drag around.

[00:05:47]This gives us the four ordered points needed to draw a cubic Bezier.

[00:05:51]Godot's curve 2D works this way, which is what I used to draw the tongue.

[00:05:55]My goal is for the tongue to resemble a sine wave, decreasing in amplitude when loose, which reflects how energy travels through a rope in real life.

[00:06:02]Let's look at how we can set up the curve 2D for one linkage.

[00:06:06]We'll place the curve 2D's points at the linkage's target and end point. Then we'll place the handles at the center of the linkage, offset by some perpendicular amount, which gives a nice symmetrical curve.

[00:06:17]For multiple linkages, we can alternate the direction of the offset back and forth, decreasing the amplitude as we go. And this gives that sine wave look that I wanted.

[00:06:26]Although it's worth noting that this is not a sine wave, even though they look similar. Sine waves are trigonometric functions, while Bezier curves are polynomials. But if you're familiar with calculus, then you know it's reasonable to approximate trigonometric functions with polynomials.

[00:06:40]Here's the code I wrote to place the handles.

[00:06:43]If I adjust the max amplitude, I can increase the height of the waves, or I can decrease it until the tongue is a flat line.

[00:06:49]I can even make it negative to flip the direction of the waves.

[00:06:53]So, animating the tongue pulling taut is as simple as animating max amplitude.

[00:06:58]I used an elastic animation curve with ease out, which overshoots the end point, bouncing back and forth before settling. And I chose this animation curve because it resembles a vibrating string losing energy.

[00:07:09]I love how this Bezier curve effect turned out. I think it makes the tongue feel much more stringy.

[00:07:14]So now all that's left is Earlier, I mentioned that the tongue instantly attaching to the grapple point looks jarring. Ideally, it smoothly extends out. Luckily, curve 2D has a couple functions to get the points we need for rendering. When the tongue is flopping around, we can get evenly spaced points along the curve by using its get baked points function. But when we begin a grapple, we have these waves that can look jagged when rendering with evenly spaced points. So here we'll use the curve 2D's tessellate function. It's a little slower than get baked points, but returns more points in curvier areas and less in flatter areas, which is perfect for rendering the details of the curve properly.

[00:07:52]To smoothly extend the tongue, we can slice the array of points given by the tessellate function. If it gives us 100 points and we want to draw the tongue halfway out, we'll only render the first 50.

[00:08:02]The fraction of points drawn are given by this draw percent variable. So, like we did with the max amplitude, we can animate draw percent from 0 to 1 as we begin a grapple.

[00:08:12]I wanted the tongue to feel like it's accelerating out of the mouth from rest.

[00:08:15]For a constant acceleration, we get linear velocity and quadratic position with respect to time.

[00:08:23]Draw percent changes the perceived position of the tongue over time, so I chose to animate it using a quadratic animation curve with ease in.

[00:08:33]I thought with this polish I was done until I noticed the grapple looked strange at close distances. If you grapple near a wall, you'd reach it before the tongue finished extending.

[00:08:42]The waves also looked pretty large compared to the tongue's length.

[00:08:45]So, I found a distance where the animations felt most natural, then I scaled their times and starting values by the fraction to that natural distance.

[00:08:53]And this is the finished tongue effect.

[00:08:54]If you like this video and want to see more, please consider subscribing. Part of why this video took so long to make is because me and my friends entered Juniper Dev's very serious game jam and out of the over 3,500 entries, we got fifth place.

[00:09:08]So, I'll have a video over that soon.

[00:09:10]And if you saw my previous video, do you prefer this more technical video or the previous one which was more design-oriented? I enjoy sharing both aspects of game development, but I'm not sure what people like more, so let me know.

[00:09:21]And of course, thanks for watching.