August 20, 2018 · Game Development

Upstream (Game Dev Log #2) - Choose Directional Animations

It's been 3 months since the last Game Dev Log, checkpoint time!

Well, to be honest I've been struggling with illustrations/animations, and therefore motivation. As you may know, I've decided to use Pixel Art for Upstream, because I don't know how to draw nor create 3D models. So Pixel Art was I think, a good pick (spoiler: it is).

The problem is that I'm a total beginner to draw Pixel Art. No, really. This is the part of my game I'm the WORST at. Programming, composing music, sounds, game design.. OK, but man, drawing pixel art AND animate them...

Funny uncomfortable dog
Me, when I have to draw Pixel Art.

8 Directional Animations

For the kind of game I want to make (called a "Top Down" game), there are several ways of drawing my sprites. One of them is the 8-directional way:

Attack skeleton animation
8-directional "Attacking skeleton" - credits to James Biddulph

For the sake of example in this article, let's say the animation I want to draw is made of 9 frames

So now, let's do the math. You obviously have to draw the animation for 8 directions, so 8 times. 8 animations of 9 frames = 72 frames. 72 Pixel Art illustration, for ONE animation of ONE character.

Even if, YES, 8-directional animations looks smooth as fuck:

Gif capture of the game Sparklite
8-directional animation in the game Sparklite - credits to Sparklite game

As I'm a total beginner regarding Pixel Art, I won't do 8-directional animations for Upstream, this is way too much work.

Flip the sprites

Off course, if you are smart (or lazy, or both) and want to gain some frames, you can draw only some sprites, then "mirror" or "flip" them for the opposite animation.

You simply draw the "Attacking skeleton" when he attacks on the right, then mirror this animation to obtain the attack animation for the left part.

This comes with a little drawback: if your character has his weapon in the right hand, he'll have it in the left hand on the other side. A small detail, but sometimes, you just don't care.

Mirrored Link in Zelda, A link to the past
Mirrored swing animation in Zelda: Link to the Past - credits to Edward Rowe

Note that on the animation of the "Attacking skeleton" above, the artist didn't flip it. If you look carefully, you can notice that the sword is either behind or in front of the skeleton, same thing for a scar on his skull. Small details, huh?

So, if I want to accomplish the 8-directional technique with the flip trick, it's still 5 animations to do = 45 illustrations for ONE animation of ONE character. But this is still too much for me, remember, I suck at drawing Pixel Art, I can't afford drawing this much illustrations for only a single animation.

4 Directional Animations

Let's say I don't care of the diagonal animations. Then I can drop 4 animations:

4-directional Tiny Heroes animation
4-directional Tiny Heroes (no diagonal) - credits to Tiny Heroes pack

So, how many animations? Three (Face, Right & Back). The left one is obtained by flipping the right one. 3 animations * 9 frames = 27 frames. This becomes interesting, 27 illustrations for an animation. And if you're wondering, yes, the animation can still looks yummy only with a 4-directional character:

Attack skeleton animation
4-directional heroes & monsters - credits to the Elysis game

To be honest, this is the assumption I made when I started to draw the animations for Upstream, and Elysis has been a huge inspiration to help me taking this decision.

So I started to draw some basic animations, first, with Nuru the Warrior Shaman, one of the 2 characters you'll control in Upstream.

Nuru idle animation down Nuru idle animation left Nuru idle animation right Nuru idle animation up
This was the first version of the idle animation of Nuru, with the 4-directional way (changed since)

Too Much for my Poor Skills

The idle animation of Nuru just above is made of 7 frames. I flipped the right animation to obtain the left one. It means 7 frames * 3 directions = 21 illustrations. Off course I don't have to redraw every frames, I start from the previous one to do the next, I have layers, nice tools etc. But I have to draw each frame individually, spending hours here:

Screenshot of Piskel
Screenshot of Piskel, the software I use to draw my Pixel Art

When you know you'll have 20 more illustrations to do to finish a full animation for 4 directions, it's disappointing and generates a lot of stress. Then I started to draw the running animation of Nuru:

Nuru run animation left Nuru run animation right
First version of Nuru running

At this step, I had to do the face & back animation. I told myself:

Ok, so the running animation is 8 frames long. I now have to redraw every frames from the face and from the back. 16 illustration to create again from scratch. I still have the running animation of Halvard to do, then their attack animations...

That was it. I mentally blocked myself in front of the amount of work I had to do. This is were I stopped to work on Upstream for almost 2 months, trying to draw here and there, but I was discouraged.

2 Directional Animations

What if I could split the amount of work, again? Is there a game that only uses 2-directional animations? I started to dig. Yes there are. Take a look at Crawl:

GIF capture of the game Crawl
Crawl is using 2-directional animations - credits to Crawl

The developers of Crawl made a really cool post on Gamasutra explaining how they managed to create "the striking pixel art of Crawl".

Nice, but how to apply this to Upstream? The problem is that Upstream is a vertical split screen game (see this article)... Characters spend there time going up or down. So doing only left & right animation was not so right...

OK. So what if Upstream was horizontal split screen instead? Yes. This way, no more problem of having only left & right animations. This means I can use 2-directional sprites! By doing this, I'll only have to draw each animation ONE time, then flip it to have the other direction.

Ok but won't it be ugly to display a "left" animation if the character attacks in the top-left direction?

Seriously, this is a good question. Would the animation sounds weird if you attack vertically, by displaying an animation of you character attacking horizontally?

"2-directional-but-sometimes-8" Animations

This is where Crawl is a good teacher. Look carefully at the gif of Crawl I put just before. The character & the monster only have 2 directional animations. Except for the hero when he attacks, his spear is oriented diagonally. So I asked Powerhoof, the creators of Crawl, to be sure, and here is there answer:

Powerhoof tweet 1 Powerhoof tweet 2

That's clever. Some attack effects are directional. The spear, for example. But for other weapons such as sword, the animation is only 2-directional, then they just rotate the "swoosh" effect. This is the trick. Your eyes believe the character is turned in the right direction, may it be above, belove, in an angle, BECAUSE the attack effect is well oriented.

Motivation is back

When you know you can focus heavily on one animation, then flip it, it's a game changer (for me). Now I can do more advanced animations, as I don't have the fear of re-doing fully the animation for the face & back. For example, the running animation of Halvard (the second character you'll play in Upstream) is 14 frames long:

Halvard running
Animation of Halvard running

Nice resources on this topic I invite you to read:

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket