Why I chose Hand Drawn Animations over Puppet Animations for Party Animals

Spriter vs Photoshop

I said I would experiment with the animation tool Spriter in a previous post to see if it would be a good fit for our game.  I did, and I decided that as great as Spriter is, it just doesn't make sense for us to use it in our game.  In my first few hours with Spriter it became clear to me that to create good animations with it would require a lot of skill and time.  Otherwise they'd look exactly like their namesakes : puppets.  Given the fact that I only really have a few animations I need to create for the game the efficiency gained from doing puppet animations vastly decreases.

The way that 2D toolkit creates animations in Unity also helped to make my decision.  2Dtoolkit takes complete frames of animation then creates a texture atlas out of them that you can draw from when creating specific animations.  This means that I wouldn't be able to manipulate the animations directly in Unity.  Given that the required output for me was going to be the same anyway (ie full frames of animation), it just made more sense to stick with a software and process that I knew instead of taking the time to learn a new one.  I would also have to use less software to get to the final product.  If I were to use Spriter I'd first have to create the assets in PS, arrange and animate them in Spriter, and finally export them to Unity.  Whereas now I'd do the first to steps in PS and export to Unity immediately after, bypassing Spriter entirely.

I also experimented a little bit with Photoshop's timeline animation courtesy of this video by Alex Grigg.  While I learned a lot and am amazed at what you can do with PS in terms of animation, I once again came to the conclusion that trying to do it that way was just using a far too complicated too for a simple task.  And so ironically after trying out all these different ways to animate our characters, I ended up going back to animating the only way I know how, which is frame by frame.

Here is the walk animation of our main character Mousey (yes, we still haven't given her a real name).  This was relatively easy to do since I used a walk cycle guide.  In the next few images I'll take you through the steps of how I made a hand drawn victory animation without a guide.

Victory

Step 1 is to rough out the basic animation.  I do this very small, since it's easier to capture  the essence of the movement with smaller strokes.  I've laid out the frames horizontally to show you how they look but typically I would draw each frame one on top of the other.

Step 2 is to enlarge the original rough animation then trace over it so that I have a larger version that I can use as a guide for the final animation.  Drawing bigger will reveal flaws that were masked by the initial smaller animation, which I can fix here.  As with concept art, the general rule is to try to fix things while they're being sketched instead of closer to the final product.  You save yourself a lot of heartache that way.

Step 3 is to take a pre made mouse model and arrange it according to the rough animation.  I've separated each body part into layers so they're easier to work with, and I've drawn them in vector to make it more efficient to move around and reposition without any artifacting.  I'm showing you my layers here as a guide.

Step 4 is to animate! Here's my animation timeline.  As you can see it's relatively simple, just 5 frames.  I hold frame 2 for just a fraction longer than the rest of the frames (except frame 1, which is the at rest frame) to show that the mouse is gathering her energy to jump.  Frame 4 barely comes into frame and is only really there to smooth out the transition between frames 3 and 5.  Frame 6 is a reused frame 2 as a landing frame.  One of my issues with PS frame by frame animation is that the times you can hold the animations are so specific (0,0.1,0.2,0.5) so there's little leeway with timing the animations.  I think that 2D toolkit gives you better control with that, but I've still to experiment further.

And here is the final animation!

Final Thoughts

I didn't write this post to say that Spriter sucks and that frame by frame animation is better (I was very happy to support them by buying a Pro license, though they have demo that's free of charge).  I'm really not an animation expert, and the truth is that each project requires specific animation tools.  Ultimately if you already know how to do puppet animation then it's definitely much more efficient since no time would have to be taken to learn how to do it properly.  But for me, it's frame by frame for now.  As an aside here is an argument for hand drawn animation and one for puppet/modular animation, in case anyone out there is still debating which method to use.

If anyone out there knows that I'm making a huge mistake here and can point out to me why what I'm doing is wrong, please don't hesitate to comment!  If you think my frame by frame animation sucks and I could makes some changes to make it better I'd love to hear from you too.