Traditional Animation V.S Skeletal Animation in 2D Games

In video games there are great battles…

Mortal Kombat vs Street Fighter, Mario vs Sonic, C.O.D vs Battlefield, Meat Boy vs Veggie Man (I made that last one up!) The same can be said of animation. When it comes to creating your first game you will find yourself asking this question “Should I go with traditional animation or should I go with skeletal?” Well, for me it’s simple, you should go for a lil’ bit of both!

In this blog I will go through the benefits of each and why I feel that combining them will often give you the best results.

Pre Fight Build Up

So what better place to start than at the actual base level differences between skeletal animation and traditional.

Traditional animation is quite simply a series of drawings put together and played back at a certain speed. This allows the drawings to come to life in front of the viewers very eyes. Think of those old flick drawings you did in school while your teacher droned on about who knows what… no really… I haven’t a clue!!! I spent all my time making silly animations and ruining the rest of the student's education by making scarily realistic baby crying sound that confused some, brought joy to others and terrified the rest! But you know what I mean, those animations where you draw a stick man in the corner of a book and page by page draw small movements to the character till you have created your very own masterpiece! “Stickman Takes Manhattan!” He shoots things, planes drops bombs, buildings blow up, it all happened with just a handful of drawings in the corner of the page. This is traditional animation in its purest form!

Skeletal animation is relatively new and it allows the artists a lot of freedom to experiment with movement without the hassle of drawing image after image. How does it allow this? Well, skeletal animation allows you to build… you guessed it… a skeleton from digital bones. In your minds eye you are probably seeing a real skeleton but it doesn’t look like this and will not be seen in the final animation. A better way to think of it is to think that the skeleton acts like points to which images can be attached. The images are stuck to the points and the points can then be manipulated to move up and down, side to side and even rotate.

Round 1. Ease of Use

Why skeletal over traditional? Well it’s simple… that’s it really, it is actually simple, simple to use! Look, can always knock up a simple sprite animation but skeletal animation allows you to make much more complex animations with relative ease! Let me explain.

Traditional animation requires serious skills when it comes to animating. You really have to know how to draw and animate to be able to pull off an animation that has “feel” and that is convincing. Like if a gun shoots do you "feel" the impact through the animation. We’ll go more in-depth with "feel" a little later as it is a huge part of what makes your animation believable. On a side note, I bet you every time you read “feel” you said it like this in your mind - Feeeeel. Ahhh the power of inverted commas!

Yes people train for years to be artists and animators, slaving away with their faces an inch above the paper, pencil in one hand, coffee in the other. They do this because it is what they want; they want to create amazing frame-by-frame animations that just have that thing old animations do, that character. We will come back to how that is achieved shortly but for now the point is this, you can’t just draw for the first time and make amazing animations, it just doesn’t happen that way. One must practice!

You see skeletal just doesn’t work this way, it is not that complex. There is no need for creating drawing after drawing until you are blue in the face! Don’t get me wrong with all the upgrades in skeletal animation over the years it is an amazing skill to master in itself, there are people doing incredible things with it but for the person with minimal skills, it is the easier option to get you started with animation.

With skeletal animation you create your skeleton from “bones.” As I mentioned earlier, each bone can have an image attached to it. So to create a simple skeleton for a standard human or huwoman we need certain bones. The most basic structure is usually:

Head - Right Arm - Right Forearm - Right Hand - Left Arm - Left Forearm - Left Hand Spine – Pelvis - Right Leg - Right Shin - Right Foot - Left Leg - Left Shin - Left Foot

The bones are linked together in a hierarchy fashion then the corresponding images are attached and voilà, we have our skeleton ready to animate. Now just manipulate the  bones and boom, you have an animation! Below is Danton's pre-dive animation, first as just a skeleton, then with the images overlayed.

Skeleton Skeleton Dan

So it is clear, skeletal animation is definitely the easier of the two opstions as a start point for novice animators.

Round 2. Performance

When it comes to game design we always get hung up on performance, why? Well, if the game isn’t utilizing its assets properly it will cause performance to drop thus creating a choked game. Basically, because you haven’t been optimizing correctly, the game will have endless issues. This is due to the processor, RAM and GPU being overworked having to handle all of your badly optimized art assets! You idiot!

Sorry, I don’t mean you when I say “you idiot” I mean me… me idiot!  You see with Dangerous Diver I had a huge issue that caused me to rethink everything. I mentioned this in Blog 2. “The Evolution of Danton Dangeruex” in which I explained that I had created the animations in After Effects only to later realize that there was no way to get the bone animations from After Effects to Unity. I had to export them all as PNGs creating hundreds of images per animation eventually choking out my PC…  (sharp intake of breath) Dangerous Diver is a mobile game, it could never in a million years run it in this current state!

Busted PC

Now, while these weren’t technically traditional animations, they were created using bones but exported as images, they were essentially doing the same thing. If you have complex frame-by-frame animation and you have lots of them, they will choke as they pile up and no Heimlich Maneuver will save you at this point, as I learned… the hard way!

Skeletal Animation shouldn’t really have this issue unless you make something out of a billion bones but since you are only using the one set of images and controlling them with the bones it is generally pretty light on the performance. This makes skeletal animation a great choice for creating games. Again, simple sprite animations are the exception and once packed onto a sprite-sheet, will have little to no performance overhead. In this case, we are talking complex frame-by-frame animation.

Round 3. Flexibility

Flexibility is a very important round for me, it represents the ability to control your animation as you want to. While skeletal animation has bags of flexibility, especially being able tweak an animation without needing a new drawing for each tweak you make, you would think that it would be a sure fire winner! Not to mention working on a computer gives you so many options to get your animation right, paper, not so much… But wait, traditional animation doesn’t have to be done with a pencil and paper!

You see, traditional animation is just as flexible as skeletal when you draw your animations directly into software on your computer. Nearly all animation studios use drawing tablets to draw traditional animation that is captured on the pc. This opens up an endless amount of options for the animator to tweak individual frames, undo, change colour etc. It doesn’t work the way it used to, where you committed to the idea and if it wasn’t working you would require new drawings to make minor changes.

For me, traditional animation has to win here, why? Because there is no limit to the imagination and if your drawing skills match you ambition, you can create pretty much anything you want! While this is possible with skeletal you will find yourself combining traditional with it to achieve this. You will need to create individual drawings and thus you are no longer working purely within the constraints of skeletal animation so to me, flexibility, as long as you have the skill, has to go to traditional animation.

Round 4. Feel

“Feel” is pretty much the most important round in my opinion. Firstly what do I mean when I say feel? Well, sometimes animations just don’t have that thing, that punch, that character, that impact, that feel. Sometimes you will play a game and wonder why when my character jumps is it so light, like the character has no weight. Or why when a character punches another is there no real impact. Well this all comes down to the feel of the animation and there are a few things you can do to increase it.

Look up the 12 principles of animation and this will give you all you need to get amazing frame-by-frame animation. For me though a couple of these are really key to achieving the feel. Anticipation and Squash & Stretch.

This blog isn’t really about delving into the principles of animation so I will explain them briefly.

Anticipation is basically the moment that happens before the main action. It is intended to let the viewer or player see that the main action is about to happen. Below we have a Yeti from "Dangerous Diver" preparing to launch an attack, this version has no anticipation. He goes from flat footed to jump attack and lands.

Yeti No Anticipation

Below we have the same animation but there is a minor addition of anticipation. He briefly bends down before leaping into the air. This bend helps hit home that effort behind the jump. While the effect is minor, almost unnoticeable, it adds that little something that makes the animation feel more impactful.

Yeti With Anticipation

The difference is clear, having the extra frames of anticipation makes you understand that the yeti is about to attack, he almost winds up to it. If he just attacks, as the top GIF image shows, it seems far too static and sudden without the build up.

Squash & Stretch is exactly what it sounds like; it is the squashing and stretching of an image to give it more impact. Below we have the same animation but let's look at a different moment that is happening within the same animation.

Yeti Squash&Stretch

This image has a little Squash&Stretch when the yeti lands. His body completely squashes and his head follows and squashes moments after. While this may look crazy when you freeze fame at certain points, when played altogether at speed it gives a great bounce to his landing. The animation has that feel that we talked about, that little something extra, that impact.

With traditional animation and skeletal these are easily achieved but, one glorious technique lands this round in favour of traditional, the animation smear.

A smear is a frame between your key frames that is used to convey motion in one drawing. They often look kind of crazy but it works to depict motion with just one image. Here is an example of a smear for the same yeti animation.

Smear

So here is the finished animation alongside the original. The final animation has anticipation, squash & stretch, a smear frame and I also added a slash visual effect to hammer home the slash impact.

Yeti No Anticipation

Yeti Completed Animation

Big difference right?

While you can just as easily draw a smear frame and add it between a skeletal animation (as I did above) it is not pure skeletal animation, you are basically combining the two types, so this one goes to traditional. This really is the reason that I think the most powerful form if a combination of both.

Double K.O

In the end we have two rounds to skeletal and two to traditional and in my opinion this is why combining yields the best results! Why cut your options because you are stuck with one form of animation, combine my friends and the fruits of all will be yours for the munching!

Get started with skeletal for the ease of use factor, this will at least allow you to get something animated without all the stress of trying to learn frame-by-frame. Thankfully you wont have to worry about performance issues either with bone animation so fire up the computer and get animating!

Be flexible, use those traditional techniques to imagine images that you wouldn’t otherwise be able to achieve with just a simple skeletal animation. Lastly pull out all the stops, using skeletal animation you can easily apply Squash & Stretch using FFD (Free Form Deformation) to achieve this, you can also achieve anticipation easily. Don’t be afraid to draw up some wild and crazy looking animation smears to connect everything together though, they will really help nail that “feel” for your animations!

Happy animating folks, now get back to making games you idiots! (That time I meant you guys!)