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.
