dog

Only here to post about CD-ROMs

I want!!
⬅️ this mark
🍷white
and Taste 🦆11
require

 

 

(Avatar by @texture, CD-ROM Journal button by @candiedreptile)


CD-ROM Journal
cdrom.ca/

MOOMANiBE
@MOOMANiBE

When I joined the Wanderstop team in 2019, the game was being made by a very small team. In terms of full time employees, I think I was #6. My job would be to rig, animate, and implement the animations of every character in the game. Eventually, years later, the animation team would grow to as many as four simultaneous people. But I didn't know that at the time - I simply knew that, like many previous projects, there was a lot of work to do and just one Me.

For this reason, my initial priority was on finding shortcuts. There's only one way you animate an ambitious, high-detail game like this as a single animator, and that's by finding ways to save yourself from having to do absolutely everything by hand. For this reason, I spent a lot of early Wanderstop dev setting up animation tech to automatically deal with a bunch of situations.

Let's explore some examples below the cut!


1. Holding stuff

Part of making tea and gardening is that you have to hold items. I think the pretty generally-accepted way to make a character hold an item in a game is to place the item in their palm and make them close their fingers. I, too, like to use this technique to hold objects in real life. So the first thing I did was build out a system to make this easy.

(I'm going to note before getting into anything else that some of these screenshots are going to be taken in my animation test area, which has NOT had a lighting or camera pass to be consistent with the actual game, so if things look off, that's why. An image of Alta holding nothing, then a seed, then a book.
So here's the basic implementation. You can see not much changes between images - just some small adjustments to the arm and fingers. I set up a simple system here where anyone - a designer, the game director, a prop modeler - could go in and simply specify where on the item attaches to the character's palm, and a "grip style" chosen from one of about 12 basic poses that account for most ways a normal person could hold an item at their side.

A collage of Boro's hand in 5 different grip positions. Labels: Standard, Gripunder, HandAroundLong, HandAroundGripUnder, and Shaft.

This setup has a big benefit in that anyone could set up item holding, not just me. If someone added a new prop, they could set it up themselves without even needing to ask me what to do. Just place the attach point and pick a grip style. Nice and easy; I love building little tools like this.

A gif of Alta running while holding a book at her side.
The most important part is that this works with basically anyone's running animation. That means we only really need to set this up once, ever, and then every character can run around holding every item without me ever making another animation. This kind of timesaver is absolutely the kind of thing I was looking to do more of.

Except..... there's kind of an exception, isn't there? A thing you can't hold while running like this.

2. Tea

An image of Alta holding a teacup at her side, backwards.
You know that thing that's like, central to our game? Making tea? the core conceit? the thing that's in the logo? Yeah that doesn't work when you hold it at your side. You're gonna spill it everywhere!! And guess what?

Everyone in the game holds tea

Because you have to serve tea to your customers, whatever solution I come up with has to fundamentally modify every character's run animation without exploding. They have to maybe talk while holding it. They might sit while holding it! That's a big intersection case.

But here's the thing. I really, really do not want to make a custom idle with tea, walk with tea, sit with tea animation for every character in the game. Pretty much no one shares body types, which means custom tea holds for everyone is potentially a LOT of assets. And then if any of the walk/sit/etc animations ever change, then I also need to update the tea version, and track everything that's updated and - no. no. This is a lot of busywork and we're not going to do it.
Instead, let's make:

Procgen with a bunch of safeties built in

Warning: we're about to get a little technical from here on in!
Step 1: Let's make one "Tea Pose" per character. 5+ custom animations per-character for tea? no. But let's make sure there's some core, solid authorship. One pose per char.

A collage of four images; Alta holding nothing and then holding a teacup upright, followed by Gerald doing the same.

From here, we'll use these poses as a basis for gluing onto other animations. First up: Override any ongoing animation from the tea-holding shoulder down with the tea holding pose.
A screenshot of a bunch of code in Unreal 4 Blueprint A gif of Alta running while holding the teacup in the hold pose, but tilting the cup way over due to leaning forward while running.
A good start, but if the animation has them swinging their torso around at all, it's going to make them tilt the teacup, which means spillage. This doesn't look awful on Alta, but it's not scalable to a cast of chars who might be hunching over or flailing around at any given time. And if I try to fix this by just locking the rotation of the hand to always face upright...
An image of Alta's wrist bent at an impossible angle
Oh, that doesn't look healthy.
Let's fix this with a simple IK solution! Inverse Kinematics lets you specify a target location and then figures out how the joints would get there. We'll use IK to target the character's hand to wherever the hand would be in the tea hold pose if they were standing upright. That way it's consistent no matter the animation!
A screenshot of further code within Unreal 4 Blueprint
A gif of Alta running. She's holding the tea in the right spot but her arm is articulating eerily smoothly, like a steadicam.
Okay, so this is almost there! Except Alta's arm is hovering in place like one of those terrifying articulating dog robots. We need a way to reintroduce the life back into this animation.

My solution to this is.... I'm not going to claim it's elegant. But it works!!!!
An image of a REALLY LARGE amount of math nodes in unreal 4 blueprint
I'll try and give a quick summary of what's going on here. First we take the pose as previously established. Alta is running and her arm is stuck in place. Then, I take a table that I Built Elsewhere(TM) that informs me how much the character's hips are offset from their normal idle position, and in what direction. Then I apply that exact same offset to the IK target for some nice auto-bobbing, multiplied by some mysterious Tea Movement Multipliers that I basically hand-set per character, allowing me to determine just how MUCH bob gets transferred to the hand from the hips based on the run animation in question. 2x? 1x? -1x? All of these are potentially valid! Also, I'm getting entry [1] on the table instead of entry [0], which gives the bob effect a one-frame offset (because it's using data that's one entry old), which gives a nice sort of rippling follow-through effect that you always like to see in animation.

The second part of the image is a bit more... to-taste. A few of our chars have animations that swing their shoulders violently from side to side, or who hunch forward, etc. This creates a little conundrum where the necessary position to hold the tea in depends a lot on what they're doing. When you lean forward your arms come with you! So I put in some custom offsets that push the IK target around based on whether the character is leaning forward or tilting their shoulders. This is also very per-character and I set these numbers by just testing them out in practice. It's a little more work than a single universal solution might have been, but it's very fast to set up in practice.
Gif of Alta running holding a teacup. The arm bobs naturalistically. Gif of gerald doing the same, walking holding tea. nothing looks broken.
And there we are! A working tea hold across multiple characters and situations. This is the solution we use for basically every character in the game - it works just fine for any sort of basic locomotion and saves us having to make all kinds of variations that need editing and tracking. You just make your idle and run animation, and a single tea hold pose, tweak some numbers and it all just Works.

I'm pretty happy with it, even as I constantly think about ways I could be simplifying it. And in some ways, it's already one of the simpler examples of procgen in the game!

But there's one last thing; the eagle-eyed among you may have noticed a "Tea Root Offset Disable" flag. At the start of this IK section, I mentioned "a bunch of safeties built in". Specifically there's two.

  • A flag that completely disables the tea hold animation, for situations where both hands absolutely NEED to be free.
  • A flag that disables the IK elements, which I can set - and even tween - per-animation, allowing me to simply return to the "lean forward" style during sections of animations that just don't play nice with IK.
    For example:
    An image of Gerald doing situps while holding a teacup stiffly at his side

And that about wraps this up! I hope this was informative, or at least interesting! There's a lot of little animation tricks like this seeded throughout the game, and I hope to get the chance to talk about a few more of them as we work towards finishing and shipping the game. If you have any questions or comments feel free to leave em' below! And thanks for reading.


You must log in to comment.

in reply to @MOOMANiBE's post:

As a person who would like to make a real full game one day,
I still haven't quite internalised how important it is to have smart solutions like this instead of banging my head against the wall, doing everything by hand.

ESPECIALLY in my case where I'd probably be doing most of the game making stuff by myself.

Oh heck I completely missed this post! What a delightful writeup! Thank you also for all the examples and gifs! It's always fascinating reading about all the things that can be automated and all the things that can go wrong...