Pixelation

Critique => Pixel Art => Topic started by: Mike on December 17, 2008, 03:28:24 pm

Title: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Mike on December 17, 2008, 03:28:24 pm
Ok so I have been working on this animation(if you can call it that, and not just a bunch of frames) for shooting a fireball, and I wanted to give it some cool motion blur that will tie the huge jump in spacing together, but I honestly have no clue on how to make it look as fluid as something Capcom or Nintendo would do.

The animations are bit clunky right now and lacks the fluidity that I want.  They also lack cool down frames at the end, so any and all help would be greatly appreciated.

I've decided to change this thread into an animation dumping ground.  I just finished my classes and I have a lot more free time, so I will be updating this at least everyday with a new animation, and with modified editions thanks to comments and critiques.

Seriously any masters of motion blur, please please lend me your help.  Thanks
(http://i3.photobucket.com/albums/y63/vashers/weakblast.gif)Update(http://i3.photobucket.com/albums/y63/vashers/shootingweakblastv4.gif) I'll add this too (http://i3.photobucket.com/albums/y63/vashers/fuegoidlev6.gif)
jumping that is used when not at a stand still (http://i3.photobucket.com/albums/y63/vashers/jumping.gif) This is an attack animation, it's kinda odd(http://i3.photobucket.com/albums/y63/vashers/fuegospinballfirespit.gif)
Title: Re: (Animation)Shooting fireball(need help)
Post by: TrevoriuS on December 17, 2008, 03:50:24 pm
He grabs his energy rom the air and throws it an an opponent. The head, should remain looking at the opponent. The other arm, should be actively moving according to the rest of the body, most logical function for the second hand in an attacking motion, is to defend. Also, I'd have him bend his knees and lower to the floor a bit rather than rotate away from the foe. Your animation lakcs relaism, and the anticipation could be bigger than this.
Title: Re: (Animation)Shooting fireball(need help)
Post by: Jim16 on December 17, 2008, 04:31:54 pm
Its good, I would however add 1 or 2 tweeners to define what your going for, as its a bit snappy and moves from one position to another to quickly, I also think that the movement as a whole is very unrealistic and uncomfortable(have you tried to do that movement yourself?).
Here is a typical fighter stance that I quickly whipped up to show you what you could do.
(http://img154.imageshack.us/img154/3498/49997696jj7.gif)
Bare with me....(i did this in like 5minutes)

Yellow arrow: this is the movement of that arm.
Brown arrow: this the movement of the back arm and the movent of the body as the yellow arrow moves forward. AKA the rotation point and direction.
Pink under foot: This where most of the weight is on .
yellow under foot: this is where the weight is shifted through the rotation.

This would be an easy movement to integrate into your sprite and is suitable for a sprite of this kind.

You can however use that movement as it is used typically for games that incorporate ninjas(where they would be throwing a shiroken ) and so on. But the extensive arm movement would have to be shortened and looked at in detail to what movement your intending to do and what your throwing.

Well I'm blabbering on :blind:
I'm sorry for the bad example, but I have very little time on my hands.

Edit:
He grabs his energy rom the air and throws it an an opponent. The head, should remain looking at the opponent. The other arm, should be actively moving according to the rest of the body, most logical function for the second hand in an attacking motion, is to defend. Also, I'd have him bend his knees and lower to the floor a bit rather than rotate away from the foe. Your animation lakcs relaism, and the anticipation could be bigger than this.

Your a bastard  :P Beat me to it :blind: :ouch:
Hehe well there's another example for you Mr Mike.

Edit:
Also I would of done an edit of your animation....but my pc doesn't recognise it? Do you use MAC??
Title: Re: (Animation)Shooting fireball(need help)
Post by: Mike on December 18, 2008, 02:26:51 am
He grabs his energy from the air and throws it an an opponent. The head, should remain looking at the opponent. The other arm, should be actively moving according to the rest of the body, most logical function for the second hand in an attacking motion, is to defend. Also, I'd have him bend his knees and lower to the floor a bit rather than rotate away from the foe. Your animation lacks realism, and the anticipation could be bigger than this.

The hand in the pocket is more of a style choice then anything else.  I've done this pose in a mirror a few times as well.  It looked good when I was doing it but now I'm not so sure...sigh

I just want this animations to be a weak blast, but not completely static like a shot from Megaman's buster.  What should I do?

Its good, I would however add 1 or 2 tweeners to define what your going for, as its a bit snappy and moves from one position to another to quickly, I also think that the movement as a whole is very unrealistic and uncomfortable(have you tried to do that movement yourself?).
Here is a typical fighter stance that I quickly whipped up to show you what you could do.
(http://img154.imageshack.us/img154/3498/49997696jj7.gif)
Bare with me....(i did this in like 5minutes)

Yellow arrow: this is the movement of that arm.
Brown arrow: this the movement of the back arm and the movent of the body as the yellow arrow moves forward. AKA the rotation point and direction.
Pink under foot: This where most of the weight is on .
yellow under foot: this is where the weight is shifted through the rotation.

This would be an easy movement to integrate into your sprite and is suitable for a sprite of this kind.

You can however use that movement as it is used typically for games that incorporate ninjas(where they would be throwing a shiroken ) and so on. But the extensive arm movement would have to be shortened and looked at in detail to what movement your intending to do and what your throwing.

Well I'm blabbering on :blind:
I'm sorry for the bad example, but I have very little time on my hands.

Edit:
He grabs his energy rom the air and throws it an an opponent. The head, should remain looking at the opponent. The other arm, should be actively moving according to the rest of the body, most logical function for the second hand in an attacking motion, is to defend. Also, I'd have him bend his knees and lower to the floor a bit rather than rotate away from the foe. Your animation lakcs relaism, and the anticipation could be bigger than this.

Your a bastard  :P Beat me to it :blind: :ouch:
Hehe well there's another example for you Mr Mike.

Edit:
Also I would of done an edit of your animation....but my pc doesn't recognise it? Do you use MAC??

Thank you for that example Jim16.  However having him on his toes is sorta what I am going for.  On the other hand the frames where he shoots, I do realize that those feet shouldn't both be facing the same direction so I will fix that. 

When doing this animation I stand in front of a mirror.  Unfortunately its only waist high :(

As for not being able to edit it, it is only a .gif, at least it was when I uploaded it.  Try renaming the extension to .gif


*update*

(http://i3.photobucket.com/albums/y63/vashers/shootingweakblastv4.gif)
Title: Re: (Animation)Shooting fireball*Updated*
Post by: Mike on December 18, 2008, 12:51:50 pm
I also finished this idle animation today as well. 

(http://i3.photobucket.com/albums/y63/vashers/fuegoidlev6.gif)
Title: Re: (Animation)Shooting fireball*Updated*
Post by: Ben2theEdge on December 18, 2008, 02:28:31 pm
I think the problem with your fireball animation is that he's making a very violent motion but is unaffected by it. You don't have to be a great physicist to be a good animator, but there are two rules you MUST remember when animating:

1: Bodies in motion tend to stay in motion, and bodies at rest tend to stay at rest
2: Every action causes an equal and opposite reaction

For almost any animation this is all the physics knowledge you need. You can make an animation more or less "stylized" by exaggerating or downplaying these laws.

Here's my edit:
(http://i48.photobucket.com/albums/f230/ben2theedge/shootingweakblast_modified.gif)

It's slightly exaggerated to get the point across. Mine looks like it has more frames then yours but it actually has one less! I took out one of the blurred arm motion frames and added a few frames of recovery motion after the swing. He moved his arm with a lot of velocity so he has to use many different muscles to compensate, and he can't immediately stop moving his arm, he has to fight the inertia that he put into it. Try making this motion in real life and you will see that you have to push against your own velocity to stop your arm, and it actually bounces back and forth a little as you fight to regain control of it. This is applying Rule 1.

If we were going to be sticklers about reality I would say throwing a fireball this way would actually make it quite hard to control. thrusting the palm forward would allow for much better aim. But that's getting pretty anal and kind of takes the fun out of fireball-throwing anyway.  ;)

Anyway after the hand swing, the explosive force of the fireball actually pushes against him, and you can see his coat and hair blown back a little bit as the fireball pushes away from him. Remember, it's propelling itself by explosive force! All that energy will push against whatever it contacts - this is an application of Rule 2!

Also take a close look - after being blown in their initial direction his hair and coat actually swing past their original position before they lose momentum and come to a stop - there's Rule 1 again!

In games like Street Fighter 2 they couldn't show this because they didn't have enough memory for those few added frames. But it makes a huge difference. (Notice how in later Capcom games they started putting these frames in and the animation magically becomes so much better!  ;))

(Also I would add a highlight against the front of his body from the light cast by the fireball as well, but I didn't want to cover up the basic animation in my edit.)
Title: Re: (Animation)Shooting fireball*Updated*
Post by: Jim16 on December 18, 2008, 03:59:09 pm
Wow! this go's into my bookmarks!
Is always a good reference I guess.
Title: Re: (Animation)Shooting fireball*Updated*
Post by: Mike on December 18, 2008, 06:52:24 pm
I think the problem with your fireball animation is that he's making a very violent motion but is unaffected by it. You don't have to be a great physicist to be a good animator, but there are two rules you MUST remember when animating:

1: Bodies in motion tend to stay in motion, and bodies at rest tend to stay at rest
2: Every action causes an equal and opposite reaction

For almost any animation this is all the physics knowledge you need. You can make an animation more or less "stylized" by exaggerating or downplaying these laws.

Here's my edit:
(http://i48.photobucket.com/albums/f230/ben2theedge/shootingweakblast_modified.gif)

It's slightly exaggerated to get the point across. Mine looks like it has more frames then yours but it actually has one less! I took out one of the blurred arm motion frames and added a few frames of recovery motion after the swing. He moved his arm with a lot of velocity so he has to use many different muscles to compensate, and he can't immediately stop moving his arm, he has to fight the inertia that he put into it. Try making this motion in real life and you will see that you have to push against your own velocity to stop your arm, and it actually bounces back and forth a little as you fight to regain control of it. This is applying Rule 1.

If we were going to be sticklers about reality I would say throwing a fireball this way would actually make it quite hard to control. thrusting the palm forward would allow for much better aim. But that's getting pretty anal and kind of takes the fun out of fireball-throwing anyway.  ;)

Anyway after the hand swing, the explosive force of the fireball actually pushes against him, and you can see his coat and hair blown back a little bit as the fireball pushes away from him. Remember, it's propelling itself by explosive force! All that energy will push against whatever it contacts - this is an application of Rule 2!

Also take a close look - after being blown in their initial direction his hair and coat actually swing past their original position before they lose momentum and come to a stop - there's Rule 1 again!

In games like Street Fighter 2 they couldn't show this because they didn't have enough memory for those few added frames. But it makes a huge difference. (Notice how in later Capcom games they started putting these frames in and the animation magically becomes so much better!  ;))

(Also I would add a highlight against the front of his body from the light cast by the fireball as well, but I didn't want to cover up the basic animation in my edit.)
Holy hell!!  Man that looks so fantastic!!  Thank you for the edit!!  I don't even...wow....um.  I'm totally studying up on this, frame by frame.  How did you come about this snap back animation technique?  Even looking at it now I'm not sure the process you took. 

And about doing the motion myself, I totally forgot the amount of force it created when I whipped my hand into that motion.  I do remember falling off balance a bit.  From now on I'll remember those 2 rules when I am working on animations.
Title: Re: (Animation)Shooting fireball*Updated*
Post by: Jakten on December 18, 2008, 07:10:23 pm
It seems weird to me that his feet are sliding all over the place. Mostly his right leg, I realize they are rotating but it looks odd to me also some odd vibrating in his left shoe lace which grabs my attention immediately for some reason.

I'm really liking the Idle animation it shows a lot of weight but because he is so animated practically everything on him is moving except the center of his body stays fairly static. If you unfreezing this a bit I think it would look great.
Title: Re: (Animation)Shooting fireball*Updated*
Post by: Ben2theEdge on December 18, 2008, 07:18:47 pm
Holy hell!!  Man that looks so fantastic!!  Thank you for the edit!!  I don't even...wow....um.  I'm totally studying up on this, frame by frame.  How did you come about this snap back animation technique?  Even looking at it now I'm not sure the process you took.

Capcom animators use it liberally but it's not an uncommon technique in classic cartoons either, especially Warner Bros.
Title: Re: (Animation)Shooting fireball*Updated*
Post by: Mike on December 19, 2008, 04:37:21 am
It seems weird to me that his feet are sliding all over the place. Mostly his right leg, I realize they are rotating but it looks odd to me also some odd vibrating in his left shoe lace which grabs my attention immediately for some reason.

I'm really liking the Idle animation it shows a lot of weight but because he is so animated practically everything on him is moving except the center of his body stays fairly static. If you unfreezing this a bit I think it would look great.

I had the cross in the middle of his chest dragging a frame behind, but it looked odd.  I'll put it back in the animation and post it here in a bit.
Title: Re: (Animation)Shooting fireball*Updated*
Post by: Mike on December 19, 2008, 03:14:11 pm
I have been working on this today, thought I would slap it down.

(http://i3.photobucket.com/albums/y63/vashers/jumping.gif)

I need to add a boat load of inbetweens, but I think it's ok to post it and get some feed back just incase there is a glaring error I can't see.  Oh and I need to put in a crouching frame before the jump.

[edit] I should've said that this is the jump animation that plays if you are running and then jump.  I'm gonna have another animation for stand still jumping.

Oh and here is the idle with movement in the chest, and another version that has even more exaggerated bounce.

(http://i3.photobucket.com/albums/y63/vashers/idlev7.gif) exaggerated>>(http://i3.photobucket.com/albums/y63/vashers/idlev7megaexaggerate.gif)

I'm gonna have to redo the stripes on his pants...
Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Shrike on December 19, 2008, 03:53:40 pm
this.
(http://www.majhost.com/gallery/exendia/Misc/...wut.png)
This stuck out like a sore thumb to me. It doesn't look like he's jumping on his own will, it looks more like he's being thrown to the right.  !yus!
When you jump, I feel like the focus should be upward, not to the right. Here's a quick jumping example:
(http://www.majhost.com/gallery/exendia/Misc/image3.gif)
I'm no master animator, obviously. This is somewhat rushed, I'm sorry.
I'm sure Ben could give you a better example, but I do know that you should get the rough looking awesome before you blunder through the final version. Get a stick figure rough like mine, and build off that. Also, pay attention to gravity and stuff. Obviously. :P

I hope I've helped!
Shrike
Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Mike on December 19, 2008, 04:21:17 pm
this.
(http://www.majhost.com/gallery/exendia/Misc/...wut.png)
This stuck out like a sore thumb to me. It doesn't look like he's jumping on his own will, it looks more like he's being thrown to the right.  !yus!
When you jump, I feel like the focus should be upward, not to the right. Here's a quick jumping example:
(http://www.majhost.com/gallery/exendia/Misc/image3.gif)
I'm no master animator, obviously. This is somewhat rushed, I'm sorry.
I'm sure Ben could give you a better example, but I do know that you should get the rough looking awesome before you blunder through the final version. Get a stick figure rough like mine, and build off that. Also, pay attention to gravity and stuff. Obviously. :P

I hope I've helped!
Shrike

It needs way more inbetweens before the frame I'm afraid...thank you for the example though.  Seeing yours I feel like maybe I exaggerated it way way too much.  Here is the tiny tiny animation I used as a reference(drawn by me before working on the big version)
(http://i3.photobucket.com/albums/y63/vashers/jumptest.gif)

It looked pretty good here but maybe i'm bias to wacky exaggerated anims...darn
Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Quake on December 19, 2008, 04:37:13 pm
the example you showed us, Mike is more of a leap than a jump. An example of when you do this is in parkour (free running). I would imagine, you're trying to do a normal jump rather than a big jump. if so, then Shrike's example will be good to use.
Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Mike on December 19, 2008, 04:56:50 pm
the example you showed us, Mike is more of a leap than a jump. An example of when you do this is in parkour (free running). I would imagine, you're trying to do a normal jump rather than a big jump. if so, then Shrike's example will be good to use.

Its interesting that you bring that up, that is exactly the kind of feel I was trying to get.  I figured it would make running and then jumping a bit more fun.
Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Quake on December 19, 2008, 05:07:39 pm
well, then i suggest looking at some ninja games such as ninja Gaiden on the GBA. I believe this contains moves and such which would suffice with free running.

Another example is Prince of persia.

Anyway, good luck :D
-Quake

Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Mike on December 29, 2008, 05:04:17 pm
Alright I've decided to redo the jumping animation, there were a few problems with it, one being that it doesn't stay centered so the frames cycle weirdly.

Anyway I've been working on a new animation.  In the animation the guy rolls the ball of fire up his arm over his shoulders, to the other arm and then he spins it on his finger, which shoots out little fireballs in multiple directions.

(http://i3.photobucket.com/albums/y63/vashers/fuegospinballfirespit.gif) 
The rolling of the ball of fire used to be much smoother but if I'm going to use this for an attack I had to speed it up.  In the actual game the fire ball will be a separate object.

C+C will be very appreciated!  I decided not to add anymore detail so that if anyone wants to edit it won't be too hard.
Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Conzeit on December 29, 2008, 05:26:10 pm
have you looked at refference of say...the globe throtters or anyone who actually does the trick? first thing I can think of is that if you're trying to be economic frame 2 is unnecesary, you can use frame 3 while keeping the ball in his hand....and use that extra frame to better the rest of the movement.

also, shouldnt he also be creating a sort of a ramp with his arms and his back so that when the ball reaches his left elbow it'd jump off of it, he quickly puts his hand where it'll land, so it can spin on his finger? I just cant picture the movement without the ball jumping, I cant picture the ball rolling all the way from one arm to the other and just climb up the hand and into the finger to roll.

I havent really done or seen the trick...which is why I reccomend finding some reference....but eitherway if the attack is supposed to be the moment when the ball spins, I think you'd still get better impact for that moment by making the ball jump.
Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Mike on December 29, 2008, 06:03:06 pm
Thank you for responding so fast Conceit!

I looked for reference, but I don't know the exact name of the trick, and rolling ball on shoulders didn't come up with any good results.  Also I looked for some globetrotter stuff while I was doing the animation but there are many videos and I can't be sure which video the trick shows up in.  The only reference I found was this video, right at the start http://www.youtube.com/watch?v=E4-pdvcMJAU&NR=1 that is the reference I used, at least for some of it anyway.  I realize that this may actually be impossible in real life so I tried to make it as best as I could.

Furthermore even though I'm trying to be economic with the frames I do want the animation to read well.

As for making the ball pop up, yes I suppose I could give it a try.  I imagine it will look like when you roll something towards the middle of your bent arm then pop your arm straight so that it will pop back to your hand.

(edit)

This early version of the animation has more frames, just thought I would put it here and maybe get a comparison and see which is better.  It seems that when I get closer to completion on an animation it becomes a bit rigid.  Oh and the arm is up higher in this version but for later versions I had to take into account the smallest enemy I would be using.  So I had to angle his arm down some more. 

 (http://i3.photobucket.com/albums/y63/vashers/fuegospinballright2.gif)
Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Conzeit on December 30, 2008, 07:39:07 pm
I dont know if this is worth anything but here's a stab at the anim...hope u get some ideas out of it atleast  :crazy:

(http://img.photobucket.com/albums/v165/talbot/fuegospinballfirespit.gif) I obviously dont mean to suggest that you use random lines as fire...it's supposed to be kind of a blueprint...animatic thingy heheh.
Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: TrevoriuS on December 30, 2008, 09:24:17 pm
I miss 3 things in this animation.

1. A reason. He could just use the fire ball as a bowling ball or pass it on via the front... why do this motion?
2. Anticipation. There's no tendency or focus in his muscles. Make him tighten before he does anything. Exaggerate these things. Realism has them as well, they're less apparant, but I entirely miss them here.
3. Reaction. How can the ball stop like that? The ball falls on his hand so shouldn't de hand feel a little force from the ball as well? I know it's magical fire but so what It's energy. It's substantial.
Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Mike on December 31, 2008, 12:52:09 am
I'm not sure what you mean by the anticipation, your description is a bit vague.  The part where you mention to "exaggerate these things" what are these things?
As for the reason, it has no reason really, I thought it would be cool for him to roll the ball on his shoulders before he did his main action.  I'll probably have to cut it anyway and go with my original plan of him whipping his arm out and having the fireball spin out from his hand.

Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Kazuya Mochu on December 31, 2008, 02:52:09 pm
well antecipation is basicaly a visual hint of what is going to follow.
if you want your character to jump, you dont just want him to be a few pixels higher on the second frame. cause that will make it look like he's eigther being pulled or floating.
when you jump, you usually bend your legs a bit for impulse. thats antecipation.
on another example if you are going to scream, first you fill your lungs with air. otherwise it will just look like the character started yawning or even just being surprised.
another usual one would be a car bourning out before shooting off at great speed. to enhance this effect, most animations (depending on the visual style) have the front of the car go down and the rear go up as to indicate where the traction is.

anticipation deals with what happens previous to the movement you wanna portrai. usually by having a pose or a visible intention of going a certain direction or doing a certain movement. this concept can be applied to both indivial elements (such as arms or legs) or to the whole element it self (such as a body or a car)

What TrevoriouS means with "There's no tendency or focus in his muscles" is that visually there is no indication of what movement is going to perform or even what direction is he going to move.

hope that helps

Kaz
Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Mike on December 31, 2008, 06:49:21 pm
I tried to make a little movement that goes the opposite way he moves but I guess that wasn't really a big anticipation at all.  It's kinda hard to anticipate something like this because of the movement of the ball, and trying to keep it short.  Does anyone know where I can find a reference for this animation?  I haven't worked on it in a few days because I'm completely stumped and I'm afraid of working on it before I'm sure of what I need to do.

Apparently this stuff is called contact juggling

http://www.youtube.com/watch?v=cb-MZfrGyTE&feature=related
Title: Re: (Animation)Mike's Animations for game*Updated AGAIN!*
Post by: Conzeit on January 05, 2009, 05:07:29 am
I looked at some of that contact juggling stuff and it's fucking amazing! though, it doesnt seem to be exactly the same thing as that basketball vid.
The basketball guy just tips the balance making his arms and his neck sort of a ramp, so the ball will roll trough the arms all by itself
Contact juggling is more like the guys moving the opposite direction that the ball's spinning, so it sort of appears as if the ball is magically hanging in the air.

Both could look really cool but contact juggling could go a lot faster, as you can see in the video you linked yourself.

Sometimes after you've looked at a lot of reference you just gotta think back to the moment you decided to make the animation, and use whatever part of reality your guts tell you fits your goal best, the answer ultimately isnt out there because you're the one in charge of the piece and YOU know what you want people to feel when they watch this.

if you decide to go with contact juggling...dont make the guy GRAB the ball! look at this vid http://www.youtube.com/watch?v=are786WId4U&feature=related it's a no-no!

....I think using contact juggling as the basis for a fire char would be kickass =D