Hi everyone, I've been asked a couple of time about my workflow animating, so here I am!
Foreword This tutorial will not be about perfect 2d animation, but rather on animating sprites the most efficiently possible within the very specific constraints of such small resolution. If you want a formal animation tutorial, there is plenty of them on internet already. If you want just the basics, take a look at:
http://en.wikipedia.org/wiki/12_basic_principles_of_animationhttp://en.wikipedia.org/wiki/The_Animator%27s_Survival_Kit (
the animation bible )
Also, I work on photoshop, but excepting some specific tricks, I'll try to stay as much software neutral as possible.
01 Animation, what is what In sprites, I differentiate three main types of animations, each animated using different techniques:
The translation animation is very straightforward, it's about moving pieces "as it is". No modification is made on the part, and it's mainly use for barrel recoil, or sliding panels.
The fade animation consist to make a layer appear on top of an existing piece, but without animation on itself. I use that to brighten a part that is heating, or to add some lighting.
The frame animation is traditional 2d animation, where each frames of the animation is individually drawn. Pieces that deforms, or moves in perspective will be drawn that way.
Then there is an hybrid forth animation type, very specific, witch could be called the
random sparkle animation where you draw several small events on different layers and randomly make them appear and disappears. This is useful for lighting effects for example.
I can't stress enough that animating in pixel art is more about
careful preparations than pure animation skills, compared to "full size" 2d animation. You need to think about what you want for animation even before starting spriting. If you don't, you'll end up with a nice sprite with animated bits glued on top, or redrawing a large chunk of your ship.
Good integrated animation, it's part of the sprite: Bad slapped-on-top animation, feels completely artificial:
Also you need to refine your idea to keep only what's truly necessary for the ease of understanding. Too small details animated will only look like noise.
Bad animation: it's fluid, but out of place and distracting: That's better, often less is more for the sake of readability:
A rule of thumb for the absolute minimum movement length for a piece to appear sliding, is 2px. If you want to add an acceleration and deceleration, it's 6px. Symmetrize this and you need already 12px of space for your animation, the size of a small weapon.
02 Preparation, aka
the bulk of the workNow with these animations types in mind, lets take a look at this bad boy and see what animation we can come up with:
Okay, I want the whole front section to open, revealing the massive gun it's housing. I want heat, light and lighting, the works. If I breakdown my idea I got this
and now I'm off to prepare said animation...
...
Look, I'm back 5 minutes later, how's that possible? Well remember when I said "think about your animation even before spriting"? I did, and I had all the parts in different layers:
You can see the doors, the chargeup heat, and the cannon heat. And I even already have the interior of the ship drawn, isn't that great?
Well, I think I'm ready to animate.
03 Translation animationsTo animate things smoothly at low resolution, you need to use the old cell animation trick of doubling frames: unless you want to animate with anti aliasing the minimum movement between two frames is 1 pixel, but in most cases that's already too much to show the illusion of an acceleration. To to simulate a slower movement you can use the first frame twice. Here some examples:
The first one is the 2px minimum movement to show a sliding, the light color change helps to smooth the animation without further movement.
The second is a recoil-like animation: it start at full speed and then slow down to it's final position.
The third is a full symmetric accelerated then decelerated translation. As you can see, it require quite some space. The pixel movements are 1-0-1-1-2-1-1-0-1, you can cut the the middle movement to reduce the width of the displacement but then the acceleration will be less noticeable.
An other useful trick to smooth your animation is desynchronization:
All doors have the exact same animation, but on the right they all start at 1 frame from each other. That way the doubled frame is less visible than in the first animation. It also can make some animation less rigid, or more interesting if you have an old ship barely holding together. If you have several piece on an axis animated, desynchronizing them from the first to the last give a nice ripple effect:
At such low resolution I suggest that you animate your pieces in the main axis (up down or diagonal). Any other axis will need you either to animate in subpixel, blurring your part, or to go farther that 1 pixel away as minimum movement:
If you really need your part to go in an other axis, you can try an arc:
That way, the movement is already accelerated when you have to go 2px away from your previous pose.
Okay, now applying just that on my cruiser doors I get:
Desynchronization, accelerations, decelerations, arcs, double frame... Everything is there.
You'll notice I made the opening in two steps. First an "unlocking" and then the opening. If you read the link about the 12 principles of animation (or watched the video) you can tell this is both an anticipation and a staging: it direct the attention of the player on this spot and prepare him to see a doors movement, without the actual movement so that he doesn't miss it.
Photoshop ProTip
Spoiler
Photoshop animation tool is very quirky when animating using the move tool, and often mess your anim when you're trying to modify it midway, or touch the first frame of the timeline. To avoid that, work in small steps and convert your animation frames in layers as soon as you are satisfied. And to keep track of what is what, rename your layers BEFORE animating, because they will multiply like gremlins at a pool party:
There, everything's tidy and ready for animating.
When I'm satisfied, I duplicate and flatten the copy at each frame. That way, the new layer will be visible only on the current frame, keeping the animation intact.
And look, they are already nicely named! When I'm done flattening all the frames, I hide the group with the original animation and never touch it again to avoid screwing it...
04 Fade AnimationNow we enter the fun part, lets add some heat during the chargeup time. For that I use the little trick called glow:
In photoshop you will find it in the list from the effect button under your layers panel, or through "layer style" in the layer menu.
Make a nice gradient of the color you want (save it for later use!), set a low size and you should get something like that
Now for each stroke on this layer, you'll get an small glowing effect. Using a low opacity white brush, you can add lighting. With a more reddish one, it looks like heated metal. Don't forget to set them as additive/screen blending, since they are supposed to lighten the image underneath.
And now, only animating the opacity of the layer I get this:
not bad for something that isn't animated in itself.
If you don't have a glow effect on your software (unlikely but you never know) you can make the effect manually: make your basic brush strokes layer, duplicate, blur 0.5px and add a yellow tint, duplicate, blur 1px and add a orange tint, duplicate, 1.5px blur red... Then set them in additive mode with low opacity.
Photoshop Protip
Spoiler
To add some life in my painting easily, I often add some color randomness in my brush:
1% is good for spriting large flat areas. For the special effect you can dial up the jitters sliders a little more. Remember to uncheck it if you are painting masks, else they'll be noisy too!
Using this technique, I draw the heats layers for my cannon, power plant and the pipes underneath. Since the power plan is very white in the center, it would look grey at low opacity. To avoid this state, I also make an intermediary step more red. In the same order of idea, for the cool-down I want the barrel to cool faster than the muzzle, so I draw two different layers. In the end I got theses:
(The "power plant light" layer was an afterthought addition)
From this state, I only animate the opacity: 10% on the first frame, 20% on the second etc (if you have a very specific key frame you want to keep, just start by this one and go backward!)
And after a bit of patience I get
This is starting to look good, only missing the muzzle flash and the lightnings! Almost there...
05 Frame AnimationMuzzle flashes are animated frame by frame, so there isn't much advices I can give you except to experiment a lot. Most of the times it's only 2 to 4 frames long, it's not taxing to try two, three or more versions before settling your choice.
I make them using the same trick as heat and light, but with a larger size. Here some examples:
They are appearing so quickly that you don't need to draw them very precisely. Depending of the size I use either the sharp pen tool, or a 1px brush (this is actually the only time in all my spriting process I'm not using the pen tool). To add some emphasis, I also need a large flash (most of the times two bright blurred spots), and a layer for the light emitted by said flash:
With those layers in place, I can experiment freely the muzzle animation. After a few tryouts I got these:
Well I don't know witch one to choose. The first is a bit too long, the second is great, but will probably be redundant if I add some lightning bolts during the cool-down as planned in the beginning, and the third... Well he is not bad actually, maybe a bit classic for a cannon flash, but this gun is supposed to be a non offensive weapon:
Well I'll probably make a fourth version then...
Mmh... Nope, I'm still digging the second the most. I'll shift the colors toward a more purple tint, to add emphasis to the electric aspect, but other than that it's good as it is.
There! Good to go.
06 Random AnimationTo show you the last type of animation, I'll use this little thing:
It's intended to house an overpowered EMP emitter (the kind so powerful that it knock out enemies and friendlies alike). The firing will use the vanilla emp effect, but I want some lightnings to sparkle randomly as soon as it's charged.
For that I use the glow effect ("Again?" I'm telling you it's the magic tool!!!!)
Given the size, I'll use a medium opacity pen to draw several lightnings on individual layers:
Then I only turn them on and off in one frame. Sometimes randomly picking the one I make visible, sometimes trying to find a good rhythm between them. Like the muzzle flashes, it's an iterating process where you can quickly try and try again until you're satisfied.
After a few moments I got this:
You might notice I didn't put all the layers in the animation: no need to, it's the point to have something random.
Then you only have to export everything and your ready for in-game integration. For the photoshop users, it's "file/export/render video". Be warned, PS is sometimes dumb about framerate and frames durations: it can double or omit some frames. I always slow down my animation to 10fps before exporting it, that way small decimal variations won't mess anything.
Closing words That's it, you now know as much as myself about sprite animation. Of course it's mainly tips and trick to make the work a bit easier, and taking a look at some more regular animation tutorials wouldn't hurt. But I'm positive that it require more skill to draw a decent sprite than to animate it (If you carefully planned it!). If you're not sure about the frame rate: for animations with moving parts I usually go for 20fps, but given how many things are displayed on the screen while playing, you could go as low as 10fps for animations without movements.
It is important to note that given the nature of the game, people will be starring at your animation for extended periods of time. When animating it is imperative to watch your work again and again, if it's not boring after a hundred cycles, then it's probably good! If not, maybe the rhythm isn't right, maybe a part movement is awkward, or maybe it's simply not a good thing to animate this part.
Animation motto: Preparation, patience and reiteration.
I'm always available for suggestions, critics or help, so don't hesitate to poke me.
That's all folks!Bonus track: "Get da Psd" by MC Glowy feats Photoshop CS5
https://www.dropbox.com/s/crvafs7v23ej5rt/tutoAnimationCruiserSiren.psd