Animating Hellfall

Hi everyone! Hope we've all recovered from our favourite crunch-fest.

We've had plenty of glowing feedback on our game, Hellfall. Pretty much everything from game feel to level design, art to difficulty. To say I'm proud of what we achieved is an understatement! And while I can't write a full post-mortem without it being akin to a Pixel Prophecy-styled documentary, I did want to do a post about the animation in Hellfall, as it's something that gets constantly brought up in our comments, and is something I surprised myself with.

Div.png

So, in case you haven't played Hellfall yet, here's some gifs to show off what it is. It's a fast-paced downwards platformer, where you play as a demon trying to get back to his coffin in hell.

LD48 - Blog, Anim Example.gif LD48 - Submission 4.gif

Div.png

If you haven't played Hellfall yet, and think it looks fun, give it a play here: https://ldjam.com/events/ludum-dare/48/hellfall-1

Div.png

Throughout development, we put a huge focus on fluidity. This game was going to be wicked fast, and quite tough, so we needed every second that the player was in control to feel good. This is something that I've tried to get better at with every game, but a problem I've had for most of my games is that, I can have a really fluid feeling prototype with a white square, but the second I put animations in, it feels terrible. So, for Hellfall, I wanted to make the character controller use animations from the get go.

But, if you do all your animations first, and find they don't quite match, that's such a waste of time to go and redo things!! Precisely, so what I chose to do instead was work with super simple silhouettes first, with as few frames of animation as possible, and then tune the controller around that. This let me get an idea for what the animations would look like in practice, but also made it easy to go back into Piskel (my pixel art canvas of choice), and tweak things.

This first character prototype looked like this.

LD48 - Prototype.gif

As you can see, that already looks super fluid, and I worked on that for maybe 30 minutes?

This was such a good foundation, in fact, that during a discussion about how I was struggling to come up with a character design I liked, we almost considered just using that. Luckily, we settled on a design...

Div.png

Okay, but what about the animations themselves? Well, they're nothing special, actually. There's only about 11 frames of animation for that character. Yes, 11.

Here's the entire sprite sheet for that character:

LD48 - Player Controller - Silhouette.png

The reason we have so few frames of animation, is the way I approached animations from a conceptual level. Given Hellfall plays at such a fast pace, the player will near constantly be going between states, and won't stay in any one animation for long. As such, animations are less about depicting an action, and more about transitioning between poses. For example, the slide animation:

LD48 - Slide.gif

Here, it looks pretty boring. It's 3 frames (with the idle added for demonstration), and the most extreme frame being held for the majority of the action. But in game... Well you saw the gifs, it feels awesome!

The jump is another good example, because the jump is pretty much just two poses (a rising and a falling pose), with the rest just being transitional. That transition to the falling frame only happens when the upwards velocity starts to taper off.

LD48 - Jump.gif

Again, nothing special here, but when applied in game, it feels awesome.

A last point on the individual frames, and this is less of an animation tip and more of a practical one, but: each frame is 16x16 pixels. While for some, this may be an artistic choice, for me, having this super small canvas size made animating that much easier. There's only so much you can do with 256 pixels, so it made not only blocking out, but also polishing my frames, that much easier.

Div.png

The last technique I used to make the animations feel fluid was to not focus purely on the animation frames. They're essential to animation, of course, but they're not the only thing we can use in games. There's a few, but the one I'm going to talk about is the ember trail.

The ember trail is pretty simple - it's just a particle system in Unity that simulates in world space, leaving a trail of particles behind as we run. It's a simple effect, but it really helps add to the fluidity, really making you feel fast and agile. It's similar to the smear frames you'll see a lot in animation, but the effect lasts much longer and doesn't look strange when you pause it. This effect is super common, too; from Celeste to Symphony of the Night, games have been using this for years now.

LD48 - Submission 2.gif

Div.png

There we are, that's the thought process behind all the animation work in our entry, Hellfall! If you have any extra animation tips, I'd love to hear them!

Once again, if you haven't played Hellfall, check it out here: https://ldjam.com/events/ludum-dare/48/hellfall-1

Div.png