How to animate smoothly? (sprite included)

[Usuratonkachi]

Hello,
        This is my second post here. I want to learn how to animate a big sprite smoothly, as if in Street Fighter games. Here are some references to what I am talking about:


As you can see the animation is very smooth and "bouncy". The colors of these examples are very cartoon like. I would love to learn how to make my sprite's color and animation like that.

This is my sprite:


A thanks to everyone in advance, please show me how to make a sprite better colored and animated,
Usuratonkachi.

[JJ Naas]

Some notes.

1. Your sprite is HUGE. That means trouble and a massive amount of work to make it look good and smooth.
2. Pillow shading = The light comes from the eye of the viewer, like in a flash photography. It's the most boring way to light on object.
3. Plot out the anatomy under the robes and do a rough animation for the body first, before tackling the robes.
4. He seems to be prepared for performing a jutsu, not a physical attack, like in the SF pics. So what's an idle stance like for being prepared for a jutsu attack? I don't know.

[NaCl]

Hmm, where to start. You are essentially at point A, and are asking how to get to point Z. There really is no way besides going through B, C, X, Y, etc... Honestly I don't have the experience and skills to really lay this out for you, but I can tell you to start smaller (in terms of canvas size and expected results). Your current sprite is not only flawed in it's colors, but also in it's anatomy, shading, posture, lines, forms, everything. The colors on those SF sprites are certainly vibrant, but they look so good for many reasons, not only their colors. Simply modifying the colors on your current sprite could never get the same dynamic look because the shading and lines are goofed up.

Here are my two best suggestions:

- Shrink your Samurai guy down to 1/4 or 1/2, and get some help here ironing him out.

- To animate, start with rough forms, sketches or blocked out silhouettes of the entire animation, and refine those into clear and well timed animations. Then go back and add in the details. Those street fighter animations were first rough sketches.

I know you probably really want to see your Samurai guy animated, but it's a monumental leap from what you have now to what you want, and it will only result in disappointment.

[Usuratonkachi]

Some notes.

1. Your sprite is HUGE. That means trouble and a massive amount of work to make it look good and smooth.
2. Pillow shading = The light comes from the eye of the viewer, like in a flash photography. It's the most boring way to light on object.
3. Plot out the anatomy under the robes and do a rough animation for the body first, before tackling the robes.
4. He seems to be prepared for performing a jutsu, not a physical attack, like in the SF pics. So what's an idle stance like for being prepared for a jutsu attack? I don't know.

-should i shrink it down in size? but its fine with me though i am willing to work as long as it takes.
-for the shading maybe i should extend the shading more towards right so it seems as if the light is comming from the right, i mean make the lighter shades smaller and darker more, extending towards the right.
-yes, i know its too much to ask but that would need some amount of super vision as i would mess up time to time and i would really llove to see a visual example if somehow possible.
-this one he is just standing and this is the main pose, he is supposed to bounce up and down a little along with his arm a little. this is his idle stance, sorry if it looks weird.

______________________________________________

Hmm, where to start. You are essentially at point A, and are asking how to get to point Z. There really is no way besides going through B, C, X, Y, etc... Honestly I don't have the experience and skills to really lay this out for you, but I can tell you to start smaller (in terms of canvas size and expected results). Your current sprite is not only flawed in it's colors, but also in it's anatomy, shading, posture, lines, forms, everything. The colors on those SF sprites are certainly vibrant, but they look so good for many reasons, not only their colors. Simply modifying the colors on your current sprite could never get the same dynamic look because the shading and lines are goofed up.

Here are my two best suggestions:

- Shrink your Samurai guy down to 1/4 or 1/2, and get some help here ironing him out.

- To animate, start with rough forms, sketches or blocked out silhouettes of the entire animation, and refine those into clear and well timed animations. Then go back and add in the details. Those street fighter animations were first rough sketches.

I know you probably really want to see your Samurai guy animated, but it's a monumental leap from what you have now to what you want, and it will only result in disappointment.

-i guess i'll have to shrink it down as the person above you suggested the same. it'll be helpful to understand.
-so first shrink it down, then try to mimic the animation of sf sprites, refine it till the shrunk looks fine, then work on the details of the bigger and apply the same to bigger. i think thats a good exercise to learn, does that seem like a good plan to you guys?

Thank you all for helping, btw, where do i ask for some supervision if i need some examples? its okay i can do it on my own but help is always nice.

[ErekT]

-should i shrink it down in size? but its fine with me though i am willing to work as long as it takes.

Say, something like the next four years? No? Capcom is a huge company with serious money to spend and Street Fighter is a flagship product of theirs. They've no doubt spent an insane amount of money to make sure that product shone and hired some of the most talented sprite artists on the planet to do the job. Still, their sprites are only about half the size what you have in mind. Don't you think they with all their resources would draw them bigger if they thought there was any point?

 

-for the shading maybe i should extend the shading more towards right so it seems as if the light is comming from the right, i mean make the lighter shades smaller and darker more, extending towards the right.

Shading is best done with light coming from somewhere above. It's where objects usually receive their light from and will make your sprite fit into most environments.

 

-this one he is just standing and this is the main pose, he is supposed to bounce up and down a little along with his arm a little. this is his idle stance, sorry if it looks weird.

Do yourself a favor and forget about animation until you have a solid grip on anatomy and shading. Try out this tutorial:

http://steve.neonstar.net/fighter1.htm

It doesn't seem to cover anatomy tho', so go find some material on that. Anatomy is super-important.

[Usuratonkachi]

Sorry if this is considered a double post. This is related to the last recent post i made about animation. This is a rather quick attempt, made in GIMP (took a while to find this software) , there are only 3 frames mainly.

I was going to finish making 6-7 frames but i thought i should show it here if I am somewhat going in the right direction.

Please c&c.


thank you in advance.

[st0ven]

erekT: OMG please never link that place ever again heh.

kachi: As nacl said - your Danzou is huge. Hes probably about as large as some of the largest 2d commercial fighting sprites out there on the market! theres ways to make that not such a huge issue if you plan on properly animating your characters anyway (and given the nature of naruto series, being an anime and all, your sprites would match that description), it still is a really daunting size to work with in pixels.

If you are going to have any prayer at achieving the quality of sprite animation you are hoping for, theres just no substitute for being a traditional animator and drawing out frame by frame each sprite's frame of motion as if it were to be inserted in the anime itself. Anything else would be an exercise in futility imo. theres no tricks to how its done or special shortcut process unfortunately.

just looking at your example, i can tell you there arent half the amount of frames youll want/need to make that a really smooth animation like those from capcom. also, a good rule of thumb is that the feet always need to remain grounded if they arent being lifted off the ground. so the pivot motion from your squat would not bring the feet up, but rather lower the rest of the torso and head downwards, feet never moving in the Y direction.

if you can make a serious effort at making an example lineart frame of animation, I and many others here can help guide you how to lead that to a finished pixeled product.

[Usuratonkachi]

erekT: OMG please never link that place ever again heh.

kachi: As nacl said - your Danzou is huge. Hes probably about as large as some of the largest 2d commercial fighting sprites out there on the market! theres ways to make that not such a huge issue if you plan on properly animating your characters anyway (and given the nature of naruto series, being an anime and all, your sprites would match that description), it still is a really daunting size to work with in pixels.

If you are going to have any prayer at achieving the quality of sprite animation you are hoping for, theres just no substitute for being a traditional animator and drawing out frame by frame each sprite's frame of motion as if it were to be inserted in the anime itself. Anything else would be an exercise in futility imo. theres no tricks to how its done or special shortcut process unfortunately.

just looking at your example, i can tell you there arent half the amount of frames youll want/need to make that a really smooth animation like those from capcom. also, a good rule of thumb is that the feet always need to remain grounded if they arent being lifted off the ground. so the pivot motion from your squat would not bring the feet up, but rather lower the rest of the torso and head downwards, feet never moving in the Y direction.

if you can make a serious effort at making an example lineart frame of animation, I and many others here can help guide you how to lead that to a finished pixeled product.

steven thanks a lot, your post was really helpful. I'll surely make a serious attempt but what do you mean by lineart frame of animation? and i'll really appreciate you taking a look at what I post (lineart frame of animation).

thank you again.

[crab2selout.png]

What you're looking for are the 'Principles of animation.'
http://www.google.ca/search?hl=en&rlz=1G1GGLQ_ENCA332&q=principles+of++animation&aq=f&aqi=g4g-c1g1g-c2g2&aql=&oq=&gs_rfai=

There are a few websites taht try to cover them, but I think the best reference for these are still to be found in books like the animators survival kit. It's written by a guy who worked for Disney. It's been named dropped by just about every respectable and excellent animator I've seen on this forum and plenty of other people recommend it as well.

[Jad]

I'm just gonna pop in and say that you should really really scale your sprite down instead of working at guilty gear (or bigger) size. Or else you won't ever feel the sweet caress of massaging small crude pixels into their right place and watch the magic.

Just saying!