I’ve finally started working on some character animations, and want to talk a bit about the
process I’m developing, and the considerations taken to give the 3D animation a pixel-art feel.
In this video, I’d like to share my journey in making this little sword attack combo animation.
For me, the first step in working on anything new is to find some references for inspiration.
Hyper Light Drifter’s sword attack has a pretty close feel to what I’m envisioning,
so I took a closer look at the animations frame-by-frame.
While the attack animations read very well in game, with a large smear that indicates
the hitbox very clearly to the player, I noticed that the motion in the animation is actually
completely different when viewed from different angles.
When swinging facing left or right, the drifter makes mostly vertical swings, while the swings
are more horizontal when facing up or down.
This makes perfect sense in a 2D game for making the animation read well with a consistent
hitbox size in every direction, but for a 3D game, this would mean changing the animation
entirely depending on the direction the character is facing relative to the camera, and I would
like to avoid that extra work if possible.
By contrast, in Breath of the Wild, Link’s sword animation is much more flat,
which makes sense for a 3D environment.
The flat, wide arc helps it read well no matter which way the player is facing.
What I don’t like so much is the way Link digs in his heels, which doesn’t feel dynamic
for me, so I will keep this in mind when making my animation.
I’ve been experimenting with animating inside Cascadeur, which is a freely available character
animation software with a convenient auto-posing and auto-physics workflow for very quickly
shaping the basic look of an animation before further refining the pose.
I start by blocking out a two-hit sword swing animation, making sure that the swing is wide
and flat, to ensure that it reads well from different viewing angles.
My main goal at this stage is to capture the key poses in the animation, such as the anticipation
before the swing, and the recovery after the swing.
Cascadeur’s auto-posing helps a lot when blocking in the motion, by allowing me to
focus on the movement of just the hands, feet, and body.
I use the built-in interpolation functions to fill in the in-between poses.
I then convert some of the interpolated frames into keyframes, and delete the rest.
For smaller motions, this emulates the effect of animating on twos, and prevents the animation
from looking too smooth.
An important part of the pixel art animation style is to represent the bulk of the motion
in a single frame smear, without any in-betweens.
I will be adding the smear programmatically in engine, so I make sure to just not add
any interpolation frames mid-swing here.
To import the animation into the game, I export from Cascadeur into fbx, and load it into
the editor using a custom script which disables interpolation, cleans up duplicate frames,
and applies root motion.
Then I just have to add the animation to the animation state machine to preview it in game.
The sword object in my game has a script that runs on every frame and measures the change
in motion from the previous frame.
If the motion is large, and along the blade’s attack direction, it generates a smear mesh
that tracks the blade for a few frames, with a texture that becomes streakier
as the smear animates out.
The smear is generated by cubic Bezier interpolation on both the position and orientation of the sword.
My sword model is oriented such that the blue axis points outward, and the red axis points
toward the cutting edge.
In a purely rotational swing, I expect all translational motion of the sword to occur
tangential to the red axis, and all the rotational motion of the sword to occur around the green axis.
To enforce these boundary conditions, I generate the Bezier handles such that the position
handles line up with the red axes, and the rotation handles line up with the green axes.
The handle lengths are set in order to best approximate a circular arc.
After looking at the animation in-game, I decided the motion looked too stiff, so I
went back in Cascadeur to give the swing some stronger poses.
I also add a few frames depicting follow-through momentum from the body after the swing, which
I think will help sell the weight of the attack.
For the second swing, I felt there was still not enough forward motion, so I changed it
into more of a lunge.
Here again I am enabling interpolation in order to
preview the motion and ensure I have the momentum right.
When I have it how I like it, I will pick the important frames to keep,
and convert them into keyframes as before.
Now that I like the general motion of the animation, I refine it a bit by adding some
secondary motion on the cape.
I also take the time to clean up a few extreme poses and auto-posing errors.
Having already blocked out the main motion, the adjustments I’m making now are on the
raw joints, and not the green auto-posing handles.
Underneath the cape, I realized the left arm wasn’t behaving correctly on the interpolated
frames, so I fixed up their poses.
Off camera, I edited the lunge to reach forward a bit more, and added a return-to-idle animation
for the first hit of the combo.
Not counting the time I spent integrating it into the game, the animation itself took
around 90 minutes total to turn around, which I think is pretty good time
for a relative beginner like me.
Thanks for watching.