Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
August 21, 2014
arrowPress Releases
August 21, 2014
PR Newswire
View All
View All     Submit Event





If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 
Why I chose Hand Drawn Animations over Puppet Animations for Party Animals
by Ryan Sumo on 05/10/14 05:20:00 am   Featured Blogs

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

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 Party Animals 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.

 

This post was originally written for the Party Animals Devlog. Visit to find out more about the game.


Related Jobs

Disney Consumer Products
Disney Consumer Products — Glendale, California, United States
[08.20.14]

Contract Game Programmer
Cloud Imperium Games
Cloud Imperium Games — SANTA MONICA, California, United States
[08.20.14]

Art Director
Deep Silver Volition
Deep Silver Volition — Champaign, Illinois, United States
[08.20.14]

Visual Effects Artist
Amazon Game Studios
Amazon Game Studios — Irvine, California, United States
[08.20.14]

Art Director-Double Helix






Comments


Stephen Corwin
profile image
"I once again came to the conclusion that trying to do it that way was just using a far too complicated tool for a simple task."

As a programmer, I can relate to this concept all too well. Well written article. Thanks for the good read.

Ryan Sumo
profile image
It's definitely a problem that cuts across disciplines!

Sterling Reames
profile image
I like the style! Just one question, why animate the character like a puppet if you are completely unchained with hand drawn animation? It totally works, but it's interesting to see, since usually puppet characters exist because of technical constraints.

I'd say, the biggest upside to puppet animation is if you're going to have a ton of characters in your game. You make a set of animations for different characters, and just swap in the parts (similar to model swaps for 3d characters). This also helps with texture loading, since it's a lot cheaper to load animation data than tons of frames of animation.

We are working in Unity as well, and found that pre-rendering outside of Unity is the best way to go if you don't want your animation to be shackled by technical constraints (no uniform scaling, no spline, limited bone count, no blend shapes, the list goes on). Unity has been making strides on adding visual features, so I'm hopeful that someday soon we'll see the limits lifted (or at least have features optimized enough to actually put to use).

Thanks for the post!

Ryan Sumo
profile image
"why animate the character like a puppet if you are completely unchained with hand drawn animation?"

That's a fair question. If this were a straight up animation I would probably not bother arranging the body parts into separate puppet-like layers/groups. The original reason I would do this is that it gives me some flexibility if I need to change the size of the characters for a variety of reasons (using them in different parts of the game, for different screen sizes, etc.)

You're right about puppet animations and being able to swap in parts. My understanding though, and let me know if I'm wrong, is that this only works if the characters are roughly the same size? so for example if my bones were set up for a short character, I couldn't just swap in parts for a taller character and expect it to work?

I didn't mention this in the article but I also don't like handling the bones. It feels really finicky to me, whereas with PS I'm more comfortable transforming the shapes and if necessary just redrawing to suit my needs. Again this has to do more with familiarity with the tool than anything else!

Sterling Reames
profile image
Yeah, puppet animations require each character to have nearly exact proportions for animation sharing and part swapping, but that's why you make like 3 or so distinct rigs for small, medium, and large characters (or whatever the case may be). That's actually why we shied away from using model swapping on our current project, you do lose something when you have to make animations so generic to fit every type of character.

I haven't touched bones in Flash in a long time, but I remember it being completely horrendous; so it's definitely not your fault. It wasn't until I used a 2d bone animation program called Spine, by Esoteric Software, that I found 2d bone animation that is on par with 3d animation tools. A neat little program compatible with Unity that was originally funded by a Kickstarter.

Will Hankinson
profile image
You might take a look at Flash (the program). I also have a Spriter pro license, but haven't found a project yet where it fit better than Flash. It seems really really good for having a set "rig" or perspective and cranking out a ton of animations using that rig.

But any time you try to do something the rig doesn't support, that means adding new art. For any animation-only tool, that means added complexity of creating the new piece and bringing it in. Because Flash is both animation tool and drawing tool, you can just swap in a new symbol if you need a new shape and keep going. Kind of the best of both worlds for hand-drawn and puppet/rig-based animation.

Ryan Sumo
profile image
Yeah one of these days I'll definitely try Flash out.

Nabi Mortan
profile image
Nice article, Ryan. Thank you so much for sharing your workflow with us!

I never think that frame by frame animating suck at all. On the contrary, I really appreciate the effort of the artists doing it. I think that there are no borders between using hand-drawn animations and puppet-based animations for characters, but it is always the workflow that you want to choose in the process. I often use Flash for hand-drawn animations in my 2D games, but sometimes, I use tween tools in Flash for walking cycles and certain movements.

I never used rigging tool on Flash, though. There are some tools to create skeleton, but I do not think they are specialized for rig-based animation as software like Spriter.

Thanks for showing Spiter too, I will give it a shot when I will have some spare time.

Ryan Sumo
profile image
Yeah you should definitely give Spriter a try when you have time. They have a free demo and the full product is only $25 so it's not a lot to pay for some very useful software.

Mark Vigouroux
profile image
Nice and interesting post for animators.
Personally I like frame animation which can give wonderful results, as Paul Robertson lately showed us (Scott Pilgrim game and co ). There's a disruptive way of building animations, with its tricks, and you can achieve great effects.
On the other side, interpolation/skeleton animation obviously brings huge advantages in terms of memory and building time's consumption.
Luckily, animators can use both techniques !
For our last game with cute cartoon ninjas Ninja Smash for One Click Flare, Von Flex uses Spine (200$ pro version), a very nice software by Esotericsoftware, which allows to mix skeleton animation and frame animation easily ( plus some useful effects they brought too, like free-form deformation ).

Jheng Wei Ciao
profile image
Nice article. Good job Ryan. We're developing our new game in keyframe animations too. However, what skeletal animations can do has an edge on cost of development. In our upcoming new game, to create 100+ keyframed characters is a huge time-consuming task. I'm trying to investigate Unity2D and Spine and wish to combine the advantages of both in our next game.

Willy Hwang
profile image
Thanks for the article, glad that frame animation still lives here and there. Wish there were such tools for Maya...well, there probably are, but I don't know how to search for them, haha! (and they probably don't support the old version I'm using, anyway)

But yeah, in the production I'm involved with, we do almost everything with frame animation and it's a huge timesink and eats up tons of texture space. I can totally understand why puppet-type animating is the norm.

Regarding animation timing in Photoshop, if you bring up the list of timings and select "Other...", you can input a specific time. I'm guessing that you know but just putting it down for posterity.


none
 
Comment: