Fractal Softworks Forum

Please login or register.

Login with username, password and session length
Advanced search  

News:

Starsector 0.9.1a is out! (05/10/19); Updated the Forum Rules and Guidelines (02/29/20); Blog post: GIF Roundup (04/11/20)

Author Topic: Animation tutorial - Now with PSD link  (Read 25841 times)

Tartiflette

  • Admiral
  • *****
  • Posts: 2934
  • Toss a coin to your Modder, O' valley of plenty
    • View Profile
Animation tutorial - Now with PSD link
« on: June 02, 2014, 10:10:02 AM »

     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_animation
http://vimeo.com/93206523
http://en.wikipedia.org/wiki/The_Animator%27s_Survival_Kit (the animation bible ;D)
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.
Spoiler
Shameless self-promotion to show what you can do with the tiniest movements possible. Loose any pixel, and you loose readability or meaning:
  -  http://ccpotteranimator.deviantart.com/art/eat-THIS-308867786
  -  http://ccpotteranimator.deviantart.com/art/Colour-switcher-177524810
  -  http://ccpotteranimator.deviantart.com/art/LovToshop-177775426
[close]

02 Preparation, aka the bulk of the work

Now 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 animations

To 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...
[close]


04 Fade Animation

Now 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!
[close]

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 Animation

Muzzle 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:

Spoiler
[close]

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 Animation

To 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
« Last Edit: June 05, 2014, 01:33:20 PM by Tartiflette »
Logged
 

Thule

  • Admiral
  • *****
  • Posts: 577
    • View Profile
Re: [WIP] Animation tutorial
« Reply #1 on: June 02, 2014, 11:18:46 AM »

Spoiler
[close]
Logged

Tartiflette

  • Admiral
  • *****
  • Posts: 2934
  • Toss a coin to your Modder, O' valley of plenty
    • View Profile
Re: [WIP] Animation tutorial - Part one complete
« Reply #2 on: June 02, 2014, 03:15:49 PM »

Thule, you know that from now on, I'll always imagine you as that guy!  ;D
Can't unsee...
Logged
 

Thule

  • Admiral
  • *****
  • Posts: 577
    • View Profile
Re: [WIP] Animation tutorial - Part one complete
« Reply #3 on: June 03, 2014, 09:54:21 AM »

That's quite all right.
Looking like a ginger bearded pirate isn't a bad thing ;)
Logged

MShadowy

  • Admiral
  • *****
  • Posts: 874
    • View Profile
    • Email
Re: [WIP] Animation tutorial - Part TWO complete
« Reply #4 on: June 03, 2014, 01:08:53 PM »

Eeexcellent.  This will be quite helpful.

Hopefully I can get the animation done fairly shortly; probably wouldn't be possibly without your advice.
Logged

Thaago

  • Global Moderator
  • Admiral
  • *****
  • Posts: 4622
  • Quantum Mechanic
    • View Profile
    • Email
Re: [WIP] Animation tutorial - Part TWO complete
« Reply #5 on: June 03, 2014, 03:08:55 PM »

This is extremely helpful and interesting! Thanks for putting in the time and effort to share!
Logged

Tartiflette

  • Admiral
  • *****
  • Posts: 2934
  • Toss a coin to your Modder, O' valley of plenty
    • View Profile
Re: Animation tutorial - COMPLETED
« Reply #6 on: June 04, 2014, 03:38:03 PM »

Okay, it's finished! I hope there isn't too many typo (read it a dozen times!)
I nudged some parts and added good and bad examples in the beginning. If something isn't clear, please let me know.
Logged
 

Xalendi

  • Commander
  • ***
  • Posts: 198
    • View Profile
Re: Animation tutorial - COMPLETED
« Reply #7 on: June 04, 2014, 04:21:34 PM »

This is great, thank you! Definitely using the techniques here in my mod.
Logged

The Sage

  • Ensign
  • *
  • Posts: 14
    • View Profile
Re: Animation tutorial - COMPLETED
« Reply #8 on: June 04, 2014, 05:20:16 PM »

Well done!
Logged

Tartiflette

  • Admiral
  • *****
  • Posts: 2934
  • Toss a coin to your Modder, O' valley of plenty
    • View Profile
Re: Animation tutorial - Now with PSD link
« Reply #9 on: June 05, 2014, 01:35:58 PM »

If some people are interested in taking a more direct look, I put a link to the .psd file at the end of the tuto.
Logged
 

reactorcore

  • Ensign
  • *
  • Posts: 37
    • View Profile
    • Ask anything about game design!
    • Email
Re: Animation tutorial - Now with PSD link
« Reply #10 on: July 28, 2014, 04:50:27 AM »

This is a beautiful tutorial, I learned so much from it. Thank you!  ;D

I really like the shading style of your ships by the way, whats the process behind it?
Logged

Tartiflette

  • Admiral
  • *****
  • Posts: 2934
  • Toss a coin to your Modder, O' valley of plenty
    • View Profile
Re: Animation tutorial - Now with PSD link
« Reply #11 on: July 28, 2014, 11:46:01 AM »

1px brush and a LOT of patience! (plus the very carefull and limited use of some photoshop effects like Bevel or Drop shadows)
Logged
 

ucws

  • Ensign
  • *
  • Posts: 40
    • View Profile
Re: Animation tutorial - Now with PSD link
« Reply #12 on: November 07, 2014, 05:31:38 AM »

Learned so much in SCY.
Very cool mod. :D
Logged

Doci

  • Ensign
  • *
  • Posts: 14
    • View Profile
    • Email
Re: Animation tutorial - Now with PSD link
« Reply #13 on: September 24, 2015, 06:47:33 AM »

Thank you so much for this post !! looks really amazing !
I will try it when i have time :)
Logged
"Hallowed are the Ori"

Cergos

  • Ensign
  • *
  • Posts: 11
  • Fidem Serva
    • View Profile
    • Email
Re: Animation tutorial - Now with PSD link
« Reply #14 on: December 02, 2015, 10:45:49 AM »

This thing is definitely getting the ole' bookmark.

I have a feeling it will prove to be very helpful to me in the days to come.

Thanks :D.
« Last Edit: December 04, 2015, 01:25:21 PM by Cergos »
Logged