Another week, another post... I thought I'd break the cycle where it's always about "what's new" and instead focus on the "how" it works for this week, I hope you'll find it interesting!
Before I get to it, this post will be quite nerdy, but I'll try to explain how it all works!
Better Stomach Animations... But How?
You might remember this image from an earlier post (here, if you want to read it!), some blobs over a white background... What's so special about it? Well, it's not that special... until you take a look on how it integrates with the fancy math magic that's called Shaders...
For that, I called Suzue over to help me explain it! (I promised that I'd treat her a dinner... I hope she won't bankrupt me...)
In the image above, you'll see Suzue, with a meal churning inside. All is good, the stomach is displayed, Suzue seems to be happy and all is fine for now, but how come does it move around?
Well, let me introduce... Shaders! They are small "programs" that tell your computer how to draw an image to your screen. Essentially "brushes" of your computer, so to say. To animate stomachs of characters in Venus Derby, one such shader is also used! It accepts an image (stomach layer in this case), a deformation image/map (like the one I showed earlier in the post) and an origin of deformation. That may have sounded a little loaded, so let me break it down step by step!
Here's Suzue again but... SHE HAS A RED DOT ON HER STOMACH?!
That's the origin of deformation. Automatically calculated using some fancy maths like... Centroids! If you look closer, you'll see a green outline on her stomach, that's the stomach collider! The one used for the "rub" and special interactions.
If you look even closelier... You'll see that the "impact" effects are... perpendicular to the green outline... Well, that's because the stomach collider is singlehandedly carrying 90% of stomach animations if I'm being honest.
Anyways, without going too much on a tangent, we have our origin of deformation, and our base image now. What's next?
The deformation map!
P.S. I actually overengineered it a bit, the deformation maps are randomly generated every time a stomach animation is requested, so each animation is slightly different, but that's a topic of another nerdy time.
Now, this is where the "magic" happens. I'll try to explain it as simply as possible though!
Imagine the red dot on this image... Actually no, here's an image!
Our red dot is still in the center of the stomach, as we had already established that earlier, now, take the deformation map, move it around, rotate it, sure, that's also simple enough, but if you look closer, you'll notice a pattern, the black parts of the "circles" are "facing" towards the red dot, whilst white parts of the "circles" are facing "away" from it, now, if we draw a line from the red dot, make sure it's centered on the circle as well and extend it outwards... that's the vector/direction of deformation! Or a bump that's stretching the stomach.
That's great too, we now have our base image, our origin of deformation and vector of the deformation itself. What next?
Well, its actually quite simple after that, after calculating all that mess, the animation shader gets every pixel from the base image, overlays the deformation map over it, calculates the vector of deformation, and then using all that, it literally just moves the pixels in the direction of the vector, depending on the "strength" of the meal etc. It's that simple! Imagine smearing a watercolor art, but instead of it becoming a mess, it becomes a moving stomach!
I think its quite mind boggling that even an old phone that fits in your palm can do all of those calculations, 60 times per second and present it as a smooth animation!
I hope I was able to explain it well, it was a long time cooking and it feels great to see it working in the game!