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...
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:
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:
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 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 (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:
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.
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, 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:
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:
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?
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:
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:
Animation of Halvard running
Nice resources on this topic I invite you to read:
- "Animating Top Down 2D Games in Unity" - https://blog.redbluegames.com/animating-top-down-2d-games-in-unity-5e966b81790e
- "Game Design Deep Dive: Creating the striking pixel art of Crawl" - https://www.gamasutra.com/view/news/300004/Game_Design_Deep_Dive_Creating_the_striking_pixel_art_of_Crawl.php