Herald Animation Horrors

Animating is a funny business. Here is a collection of the wonderful bloopers and horrors created during development…enjoy! [we sure did]


Haven’t tried Herald yet? We promise broken animations are not included! 😛

Herald: Book I & II available on: Steam | GOG | Humble Store | Itch.io

Check out our Herald Kickstarter livestream! We’re going to start off with making an animated portrait for The Rani!

http://www.twitch.tv/wispfiregames

Making Devan walk on board the Herald

Note:
The animations you will see here are still work in progress.

For
the animations in Herald, we use the Mecanim system in Unity. We had
several iterations of ways of walking until we arrived at the system
of walking we use now. In the demo we used a piece of script which
allowed Devan to move. Instead of placing his foot and moving, the
script would move Devan completely towards the player-selected destination
on the grid. However, this causes glaring issues like
“sliding feet” or getting stuck in his idle pose
while traversing the environment. We had to find a solution that would make Devan
move when he placed his foot on the ground. To do that, we used a different setup in the animator along with a new nav mesh system in Unity.

Note: The animation is sped up due to framerate difference.

All of Herald’s animations are created in Blender. And instead of animating the character
on one spot, we make him perform the actual movements. If he needs to walk forwards, we make him walk forwards within the work space. This method seems to work
the best for our system. Another thing that we use is keyframe-based
animation. This means everything is made by the hand of the animator
instead of motion captured. In order to capture the feel of the
character, we perform the action ourselves and film it. We use that
as reference for the animation.

In
Unity, we use the Mecanim locomotion starter kit as template for
required animations.  If you study this system you will end up with a
list of animations that I will explain in this post. We don’t
necessarily need the running animations in the game so we’ve left them
out of the list; there is always the possibility of adding them back to
the system.

As a foundation to start from you will need an Idle animation and a walking animation.
In order to make sure the animations are loopable you will have to
make sure you start in the passing position of the walk animations. 

The
next animations which are needed are the ones to make your character turn towards the
destination when he’s idling. After the turn, he will start
walking.

You
need four turn animations. The first animation, which we shall call
Turn A, is where your character turns 45 Degrees, the second, which we
name Turn B, is where your character turns 90 Degrees, the third,
which we title Turn C, is where he turns 135 Degrees and the last one,
which is named Turn D, is where the character turns 180 Degrees.

The turns have to end in the exact same pose as the first frame. This makes blending between animations easier. 

The
other animations that you need to have are a “WalkTurnShort”,
“WalkTurnMedium” and “WalkTurnWide”. These animations are required for
the character to adjust his course during walking.  You need an
animation for small, medium and a wide turns. An important thing to
note is that the poses have to be the same on the keys as in the
walking animation. So make sure the animations are the same length .
Otherwise you’ll end up with a skipping leg transition when your
character tries to turn.

After
you created the animations, you’re going to have to import them into
the game. We import them as .FBX files into Unity. Now you don’t need
to create left and right animations as you can mirror the animations
in game. There is a difference between mirroring them through the
animator or by altering their own settings and setting it to
‘mirrored’. You’re going to have to mirror the animations of the
walking turns in the animator, but the animations for the idle turns
are done by duplicating the animation and enabling the mirror setting in
its animation settings.

For
the WalkTurns you would like to have the boxes checked for Loop Time,
Loop Pose and Root Transformation Position (Y). Make sure that Root
Transform Rotation is based upon original, Root Transform Position
(Y) at feet and Root Transform Position (XZ) at Center of Mass.

As
with the TurnABCD you need to make sure that you have the boxes
checked for Loop Time and Root Transform Position (Y) Bake Into Pose.
Check if the Root Transform Rotation is based upon Body Orientation,
Root Transform Position (Y) at Original and Root Transform Position
(XZ) at Center of Mass as well.

Replace
the animations from Mecanim Locomotion Starter kit with the
animations you made and once you run the game, you will see the
character move, turn around and adjust his course when trying to
reach his destination.

Note: The animation is sped up due to framerate difference.

Now
all there is left is tweaking the animations, settings and polish its rough
edges. We hope this post gave you a better insight in our walking
system and our process behind our animations!

If you have any questions, you can mail our 3D animator, Jermaine van der Kolk at jermaine.vdkolk(at)gmail(dot)com

The making of Tabatha Veazie – Animated 2D portrait – part 5

The last two days have been spent doing the mouth, setting the Y motion for the head and finally polishing everything.

Previous parts: Part 1 | Part 2 | Part 3 | Part 4

Tabatha is pretty much completed! Aside from a few extra features like different hair and her hat that I will be adding later.

Here is how the teeth look underneath the mouth! Thank god people have lips.

image

You can really see how all the work pays off now. With the various motions you set up you can create pretty much any expression you want!

image

These are some expressions to test the various extremes she can emote in. Some may be a bit out of character, but it’s so fun to see the various facial expressions you can make her do that it’s sometimes hard to stop!

image

You can test your model with mouse tracking in Live2D’s model viewer.
I’m quite pleased with how she came out! 

Thanks again for all the interest and I hope you will look forward to seeing Tabatha in action in our future trailers and finally the game! We’ll be posting more blogs like these in the future, the next ones will be about the background and the story of Herald. Look out for these in the coming weeks!

The making of Tabatha Veazie – Animated 2D portrait – part 4

Yesterday I finished working on the eyebrows and eyebrow shadow. Today I am working on the eyes!

Other parts: Part 1 | Part 2 | Part 3 | Part 4 | Part 5

The eyebrows gave me a bit of a headache at the start because I had to find the right hierarchy to put them in. I ended up with 14 deformers divided over 4 texture parts. The blue parts are the actual texture image.

image

Welcome to deformer hell. This wiggly brow is what all that work boils down to!

image

You know that thing you do when you draw an expression and your face automatically mimics it without you realizing it? Working on this makes me do the same thing. Needless to say, my eyebrows hurt now. I might still add a bit of shadow parts to emphasize the frown later on.

Not only the eyebrows but also the eyes are very important when conveying emotion. The eyes are often underestimated. Simply raising the lower eyelids works wonders for showing giddiness or anxiousness.

image

Blinking is next! This is a bit tricky to get right. As you may have seen in the texture sheet, I drew closed eyelids to move on top of the open eye. I also added an eyeline that is an exact match with the upper eyelid line. This is done to smooth out the blending between the open upper lid and the closed upper lid. It’s very hard to keep the dark eyeline from jagging up when deforming the lid for animation, so the single eyeline lies on top to make sure it looks correct.

image
image

Making characters blink is always one of my favorite parts in the animation process. Something so little can already add so much life.

Next up, the mouth and finishing up the head movement!

The making of Tabatha Veazie – Animated 2D portrait – part 3

After all the preparation work I did the last two days, it’s now time for the fun part. Did I say fun? I meant the hardest and most tedious part, but also the most rewarding in the end!

Other parts: Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Yesterday I set up all the texture parts with their deformers, making sure they are in the right hierarchy and also in the right draw order [like stacked objects in Illustrator]. If you did not properly name your drawing layers before, using this program will force you to become very organized, otherwise it’s simply impossible to keep track of what and where everything is. You’re going to have to switch between all the different layers, a lot.

With everything set up, I can start working on the movements I want Tabatha to be able to make. With live2D you have many possibilities, but I chose to limit the movements of Herald’s portraits somewhat because of the detailed painting style my portraits are in. I did this mainly to reduce the uncanny valley feeling these kind of animations can sometimes give you if they move too much.

By far, setting up the head movement takes the longest and is the hardest to get right, so naturally I chose to start with that. Things are going to look very weird and well…deformed for a while.

image

Starting with the head turn on the X axis, I set up how many keyframes I want, and then on each keyframe placing, deforming and tweaking every facial feature until it looks right. It’s at this phase that I learned that being a meticulous perfectionist can actually be a good thing. Also, lots of patience! It really comes down to tiny details, if only a small thing is off your animation will look weird. So you have to be hyper aware of every detail and how it’s moving and deforming along the grid.

image

After the X axis head turn started to look somewhat decent, I quickly did the eye rotation, which is easy to do in comparison. I start with the X axis again, then after that is set up, adding the keyframes to the Y axis and linking it to the X. Thus you get this fun 9 point keyframe square.

image

It’s alive!

image

This phase takes the longest time, so there will be no update tomorrow. I will return coming Friday with some more fun and freaky looking gifs, as I continue to add movement to her!