Saturday, May 10, 2014

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.


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.


James Tyse said...

Nothing wrong with what you are doing...but, there's also a third way, I don't know if you have looked at Anime Studio Pro? it uses a 2D bones system to animate either vectors or textures (although better with vectors). This produces a fluid (ie. not puppety) looking animation with the advantage of a keyframed bones system. Victor Paredes uses the software to great effect:

of course it requires a bit of learning time to get familiar with it, which may not be worth it for your project. Looking at your style I think it's a good fit.
Forum for AS is here:

Ryan said...

I've not tried Anime Studio Pro but I may look into it in the future, thanks for the tip!

Allen said...

Ryan, you can combine puppet-like animations, squeezing/scaling, and a little bit of frame-by-frame (switching out assets) at one time. This is also possible in Unity by using a combination of the native animation system plus the Puppet2D extension.

Looking at the mouse animation, you would only need to switch out the frame on his right arm. Everything else was moved through scaling (squeezing the body, eyes, and mouth inward/downward), and puppeting (moving the left arm joints and leg joints).

Sticking solely to frame-by-frame would be good for style points, but it could be bad when you have too many characters at one time because all those frames will be loaded into memory. Memory limitation can be especially apparent on mobile devices. If you don't foresee this as a problem, then stick with frame-by-frame. Looks good btw.

Shinna Shinna said...

Chantel st claire while you are deciding on your skin care products do now not pick them based at the fragrance of those merchandise. The cause of the skin care product isn't to act as a fragrance. if you want a deodorant choose a deodorant however while you are deciding on pores and skin care product base your choice on the ingredients and the first-class of the ingredients used.

Post a Comment


Party Animals Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger