First sprite

[sfried]

I started using GraphicGale lately and I was wondering if I could get help about how to best approach animated sprites: Should I start them all in the computer and just proceed from there, or should I draw each frame and scan them? Right now, I'm using a Tablet PC, but even then, it took me awhile to edit this first frame. And even then I still think it's crude and rudamentary by my standards:
.

I will admitt I got some help from a certain "Blank Blood" game (for certain color schemes and approximate head sizes), but I just used it as a basis and starting point while the rest I made from a preconcieved idea. I'm also not to sure about the ending proportions since even though they may look right (image was doubled in size for clarity), they might be particularly...usable gameplay wise.

[Jasch]

I like the 3/4 stance -- reminds me of sprites in LucasArts' SCUMM engine games, circa Day of the Tentacle.

Personally, I think that the medium of the keyframes should depend on the medium of origin.  Put another way: if it originated on paper, do the keyframes on paper and scan them in; if the sprite originated on the tablet or with a mouse, then stick with that.

My rationale:  Personally, my drawing style changes when using different tools; to keep the frames' style consistent, I'd use consistent tools.

[sfried]

I like the 3/4 stance -- reminds me of sprites in LucasArts' SCUMM engine games, circa Day of the Tentacle.

Personally, I think that the medium of the keyframes should depend on the medium of origin.  Put another way: if it originated on paper, do the keyframes on paper and scan them in; if the sprite originated on the tablet or with a mouse, then stick with that.

My rationale:  Personally, my drawing style changes when using different tools; to keep the frames' style consistent, I'd use consistent tools.

Well, I attempted to animate it straight out of GraphicsGale, and here's the result. I know it's missing certain keyframes from when she lifts her hand to when she puts it back on her waist. I definately cheated on alot of areas for something so minimalistic. In the end, it's still looks kinda funny.

[TomF]

Is her hand supposed to be in her pocket? If so then the bulge should change when she takes it out.

[Shrike]

seconded. also, i think there should be some thinking time between the glasses lowering and the hand going to fix them. and maybe run the animation a little slower?

[sfried]

Here's a small update for now. It has the minor corrections, but I have a class to catch, so I'll do the major revisions later (like adding more keyframes).

and maybe run the animation a little slower?

What browser are you using?

[Shrike]

Umm... Firefox. Looking better now, maybe add a few subtle highlights or shadows to the hair in the back? try to add some more form to it.
like this:

i didn't really mess with the brightest highlight on the top at all, just the lower half. hope it helps!

edit
i just realized that i fudged up the face shading, sorry. fixed
~Shrike

[sfried]

Umm... Firefox. Looking better now, maybe add a few subtle highlights or shadows to the hair in the back? try to add some more form to it.
like this:
edit
i just realized that i fudged up the face shading, sorry. fixed
~Shrike

What is the trick to creating the patterns for shading? I've been trying to figure that one out...

[sfried]

Latest update, now with newer and improved keyframes and better timing. I also added shadows to the back of her hair as suggested, abeit I applied it in a different manner to maintain consistency with the style.

I think I've flogged this sprite long enough. Any tips on how I should approach more drastic movements? Should I draft my animation on paper and them recreate it pixel-per-pixel, or should I just draw in the program as I go along?

[AdamAtomic]

You've got a pretty large character, so its hard to say what would be best.  I (and many others) have found that using a tablet to block out color blobs in an animation program works really well.  You can mess with the timing and basic motion a lot that way, without wasting too much time trying to get the linework just right.

[sfried]

You've got a pretty large character, so its hard to say what would be best.  I (and many others) have found that using a tablet to block out color blobs in an animation program works really well.  You can mess with the timing and basic motion a lot that way, without wasting too much time trying to get the linework just right.

What exactly are these color blobs you mentioned? Also, my character is approx. 80x130 pixels (the images/animations I've uploaded have been scaled to twice the size). What exactly are the resolutions used in most platform games?

[snader]

he means to just sketch out the animations before going into detail
to give the eye something it can understand, dont just make lineart-animations, but make silhouettes of shapes
something like such:


Adam means something like the 4th frame of this animation (i myself like to do everything in even smaller steps so i make stickfigures first and add in bodyparts 1 by 1)



basically, dont get lost in small things and spend time detailing before you have the animation down

[sfried]

he means to just sketch out the animations before going into detail
to give the eye something it can understand, dont just make lineart-animations, but make silhouettes of shapes
something like such:


Adam means something like the 4th frame of this animation (i myself like to do everything in even smaller steps so i make stickfigures first and add in bodyparts 1 by 1)



basically, dont get lost in small things and spend time detailing before you have the animation down

I see.

Any sideview walking animations I can study?

[Shrike]

Yeah. get Richard Williams' 'The Animators Survival kit' from the library and read the whole thing if you can. If not, just the walks section. its huge, you should learn a lot. I did.

[snader]

google and youtube are often quite helpful for reference:

http://www.youtube.com/watch?v=4lYholakqBQ&feature=related
http://www.youtube.com/watch?v=6Xu8I88toFs&feature=related

http://www.idleworm.com/how/anm/02w/walk1.shtml
http://bp0.blogger.com/_aaGFFoUCWaw/R95jFKFgjyI/AAAAAAAAABs/5lLIA2ghozM/s1600-h/walk_2_legs(side).gif

a female walk cycle is a bit harder to find then a male cycle, so you'll have to look around a bit till you find something that fits

[sfried]

I've read those sections about animation on the links/resouces mentioned, but I have a hard time condensing those frames all into maybe 5 or 4 frames.

Also, most of the animation is too bouncy.

Edit: First frame of the walk animation:

I'll fix the hair later (I know it's wrong), but right now I just need advise on the posture.

[geerolled]

pretty good for a starter anim. you might want to animate the arm going into the pocket a bit more to show that it's actually going into her pocket. for your walk cycle... the first frame looks more like a full out run with arms up in that bent position. you should have the arms gently gliding along at her side. unless of course she's power walking, which in that case you might want to add some dumb bells to her hands.

[geerolled]

keep practicing. you'll eventually get the hang of it

[sfried]

pretty good for a starter anim. you might want to animate the arm going into the pocket a bit more to show that it's actually going into her pocket.

here are a couple samples to help you out...

Err, I believe you were looking at an older version of that animation. The latest one has more keyframes in it and a slightly different take on timing. (Or see below)

for your walk cycle... the first frame looks more like a full out run with arms up in that bent position. you should have the arms gently gliding along at her side. unless of course she's power walking, which in that case you might want to add some dumb bells to her hands.

also, here's a sample walk cycle. hopefully, it helps.

Thanks alot. It really helps. Maybe I intended for her to jog after all? I've been looking at alot of Wolfteam games for reference. If you also have sample run cycles it would be great.

[Ben2theEdge]

Latest update, now with newer and improved keyframes and better timing. I also added shadows to the back of her hair as suggested, abeit I applied it in a different manner to maintain consistency with the style.

I think I've flogged this sprite long enough. Any tips on how I should approach more drastic movements? Should I draft my animation on paper and them recreate it pixel-per-pixel, or should I just draw in the program as I go along?

I guess it's a little late to respond to this... there are two words you need to commit to memory: REFERENCE and PERFORMANCE! This animation looks robotic because her movements are far too precise and utilitarian. If you tried to adjust your glasses just by throwing your finger in a straight line towards your face like this, you would poke yourself in the eye or nose. And moving your hand that fast with the rest of your body static would only be possible if you were specifically trying to be rigid.

If you try this movement yourself in a mirror, you will see that there is a LOT happening besides the utilitarian movement of the hand and outstretched finger. You will find that humans approach their own faces very cautiously, because we have a lifetime's experience of accidentally jabbing ourselves, and also because we can't see the action as we're doing it so we have to "explore" with our hand a little bit. You might even shift your weight a little bit from one leg to the other. There are myriad other little details that you would discover if you studied this motion a little more in the real world. And they are all important because they make the character believable. Remember that animation is ACTING more than anything else. It's a form of pantemime that permits unlimited control, so take advantage of it!

[sfried]

I guess it's a little late to respond to this... there are two words you need to commit to memory: REFERENCE and PERFORMANCE! This animation looks robotic because her movements are far too precise and utilitarian. If you tried to adjust your glasses just by throwing your finger in a straight line towards your face like this, you would poke yourself in the eye or nose. And moving your hand that fast with the rest of your body static would only be possible if you were specifically trying to be rigid.

If you try this movement yourself in a mirror, you will see that there is a LOT happening besides the utilitarian movement of the hand and outstretched finger. You will find that humans approach their own faces very cautiously, because we have a lifetime's experience of accidentally jabbing ourselves, and also because we can't see the action as we're doing it so we have to "explore" with our hand a little bit. You might even shift your weight a little bit from one leg to the other. There are myriad other little details that you would discover if you studied this motion a little more in the real world. And they are all important because they make the character believable. Remember that animation is ACTING more than anything else. It's a form of pantemime that permits unlimited control, so take advantage of it!

So should I plan out all of these elaborate movements in paper first? I'm kind of confused as to what you just said since they highlight alot of important faults (I'm quite aware that the animation looks stiff, which is why I'm seeking advise), but I'm not exactly sure how to tackle these subtle motions you mentioned unless your're asking me to rotoscope, which I lack the means to execute.

[geerolled]

i give up on bloggers. you all ask for help, and flatly reject it when industry veterans take the time to offer advice.

[Ben2theEdge]

So should I plan out all of these elaborate movements in paper first? I'm kind of confused as to what you just said since they highlight alot of important faults (I'm quite aware that the animation looks stiff, which is why I'm seeking advise), but I'm not exactly sure how to tackle these subtle motions you mentioned unless your're asking me to rotoscope, which I lack the means to execute.

I don't recommend rotoscoping even if you had the means - ironically it almost never looks natural. I often sketch out key-frames on paper - this really helps in developing good poses, but won't do much to improve your sense of timing, it's really just only good for practicing. For actual animation I prefer to do very rough keyframes in Graphics Gale as simple sketches, then add a layer and draw the character on top, then fill in the frames between until the timing is correct. This is an old example, it's not a subtle motion but this is the technique: http://www.wayofthepixel.net/pixelation/index.php?topic=4599.msg57614#msg57614

Beyond that the best way to improve is to learn to draw what you see. It's difficult in animation because things move so fast, and it's hard to study them frame-by-frame. It takes time to train your eye to scrutinize and commit to memory. It all starts with good reference, especially when animating people. The action of pushing the glasses up is a pretty easy animation to reference, since all you need is a mirror or a webcam - or a willing friend/family member to model for you. If you just observe it a few times before you try to animate it you'll see all the little details that make it real.

[sfried]

For actual animation I prefer to do very rough keyframes in Graphics Gale as simple sketches, then add a layer and draw the character on top, then fill in the frames between until the timing is correct. This is an old example, it's not a subtle motion but this is the technique: http://www.wayofthepixel.net/pixelation/index.php?topic=4599.msg57614#msg57614

Thanks. The link is very helpful and I'm studying the program right now. I really new to using Graphics Gale and so far I've only grasped certain basics like onion-skinning and the color pallets. I really do want to learn certain in-between techniques like blurring and such.

[Sokota]

Also, on your running frame, the right[?] shoulder is very unreadable at first glance. It took me about 20 seconds to figure out which arm was which. You have it positioned way to far to the right, when actually, her shoulder should be more in line with her neck. (Like most of us) The bicep and forearm do move like that, (I think), but the shoulder doesn't move very far forward. Hope that helped.

Sokota

[geerolled]

...

[sfried]

for animation and/or pixel animation, i strongly recommend Pro Motion by Cosmigo. learn it.

Which is easier to learn and master? GraphicsGale or Pro Motion?

[Sherman Gill]

for animation and/or pixel animation, i strongly recommend Pro Motion by Cosmigo. learn it.

Which is easier to learn and master? GraphicsGale or Pro Motion?

I'd definitely say GraphicsGale. It's much closer to... well, just about any other art program than Pro Motion is.

[geerolled]

it was just a suggestion. almost all game development studios are using Pro Motion. so if you're looking to get into actual game dev, Pro Motion would be the weapon of choice. but to each his own, i guess. do what you want. those of us in game development prefer Pro Motion. everything else is just a runner up.

[Ben2theEdge]

Not all of us in game development prefer Pro Motion 
I'm all about Graphics Gale. But at our studio the artists can use pretty much whatever tool they're most comfortable with.

[sfried]

By the way, I'm trying to limit my sprite to 16-bit colors. I'm trying to find ways to attain that PC-Engine/TurboGfx 16 look. I notice most people here use 24-bit or higher, but I'm trying to design something that uses a variety of dithering techniques (faux alpha).