AuthorTopic: GR#148 - Slashing Animation  (Read 16923 times)

Offline Zizka

  • 0010
  • *
  • Posts: 497
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

GR#148 - Slashing Animation

on: December 03, 2013, 08:31:57 pm
Hello guys! ;D

So I'm continuing my work on this game:

1st attempt:


2nd attempt:


3rd attempt:


4th attempt


5th attempt


As usual, I will rework this as many times as necessary.
« Last Edit: February 21, 2015, 07:17:59 pm by Cyangmou »

Offline Gamer36

  • 0001
  • *
  • Posts: 75
  • Karma: +0/-2
  • Just a noob.
    • View Profile
    • Gamer36 Wordpress

Re: Slashing Animation

Reply #1 on: December 04, 2013, 01:01:20 am
The second one is much better than the first, it is more slashing, while the first it looks like he is spinning a rope around. I am on my school laptop, and thus do not have a very good image editor, but when the knife is behind his head, I don't think it is long enough that you would see the tip of the blade. (I counted pixels). I'll leave critiquing the colors and anatomy to someone else :P
Pixel Art, what (mostly) all of us are here for.

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 468
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art

Re: Slashing Animation

Reply #2 on: December 04, 2013, 12:46:19 pm
First one is not so good, it looks like a parody of a sword fight.

Second one is almost identical as .

It's great as a basic reference but you shouldn't copy it frame by frame, cause then there will be two games with the same character movement, but your will only be a copy.

Try to use what you've learned so far from this example, and create your own version. Maybe yours will be even better. :)

Offline Zizka

  • 0010
  • *
  • Posts: 497
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Slashing Animation

Reply #3 on: December 04, 2013, 03:46:54 pm
@HarveyDentMustDie:

I did use that animation as a reference. To be honest, I didn't think it would improper as the sprite I animated is my own. I guess it depends on the person, although I do feel like I'm being put on the spot here as if I'm some sort of imposter which is sort of upsetting .  :blind:. Also your message doesn't really provide any input as to how I can make my original animation better so... so yeah, it sort of puts me on the defensive.

I didn't copy it frame for frame but at it open in another window and I tried to reproduce it. I did the exact same thing for the running animation using a tutorial from ptoing and no one mentioned anything. Where do you draw the line when using a reference? Isn't ok to use the same movement if the sprite is different? I don't know, but it wasn't my intention to steal anything from anyone.

If I used a video as a reference and I copied the movement, would it be ok? I just want to make sure I'm doing the right thing.

To sum things up, in your message, you said:

1. Your first animation is bad. I'm not telling how you can improve it, just that it looks like a parody...

Why not provide some pointers in other to help me improve instead? I mean, I don't know how to use this criticism...

2. Your second attempt is a copy. You can't use a reference like this in my opinion.
Ok, I see your point about if the game comes out and I agree with you. It's not clear how much I'm ''allowed'' to use a reference and I doubt it's a universal truth either. But in this case, I agree with you, what you say is logical.

@gamer36:

Thanks for the comment about the knife, I agree, you're right.
« Last Edit: December 04, 2013, 03:54:47 pm by Zizka »

Offline ErekT

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
  • fistful of pixels
    • View Profile

Re: Slashing Animation

Reply #4 on: December 04, 2013, 04:35:50 pm
It's completely cool imo, at least for learning. Reference, copy, whatever. You can learn a lot from reproducing the techniques of others. I referenced hard back in the day and still do when I try to expand my comfort zone. (Um, that's not an endorsement for blatant rip-offs of course :P) But it has its limits. If you want to become a good character animator you need to make yourself conscious of how the body actually moves when it performs an action. From your animations I get the feeling you didn't try the movement out for yourself, did you? If not, do that. And while you do, pay attention to what your body does to carry out the swing. What happens to the hips? Do they rotate? Do your hips move before or after your arms? What about the torso? Shoulders? Get a feel for these things and you'll be a lot more free to create completely original animations. You'll be extra happy with your work too.

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 468
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art

Re: Slashing Animation

Reply #5 on: December 04, 2013, 05:50:29 pm
Sorry if I offended you, that was not my intention.

I said that the first version is not very good, and if I were you I would continue to work on the second one.

Second one, I clearly said that is good as a reference, but you need to add more of you into it. Using reference means, trying to learn form it, not trying to recreate it. If this wasn't obvious copy how would I recognize it from the first view. Same leg movement, same head movement etc. only he is now dressed for a winter. :) How can anyone help you to improve already good animation.

For me your work it's not a problem at all, I only post this comment so you try to make it more of your own creation. Create some interesting move by using things you learned from this animation like motion blur, frame timings etc.

Offline Selassin

  • 0001
  • *
  • Posts: 43
  • Karma: +0/-0
    • View Profile

Re: Slashing Animation

Reply #6 on: December 04, 2013, 07:55:28 pm
 I agree with HarveyDentMustDie, it's good but with better timing you can make it more fluid I think.

 Here, I cut 2 frames, first one is before the slash effect, because it slows down the and prevents "powerful smash" feeling, and second one is the last frame, because when you loop the animation, he's left legs look weird, like bouncing. And I played with frame times:


 And this is more fluid animation, I just played with frame times, but it needs more frames for better animation(like preparing for attack or more ending frames):


Offline astraldata

  • 0010
  • *
  • Posts: 391
  • Karma: +1/-0
    • View Profile
    • MUGEN ZERO

Re: Slashing Animation

Reply #7 on: December 04, 2013, 08:52:39 pm
The fundamental problem with your 2nd attack is not the frame timing (as was suggested by Selassin), but instead is the timing of the stomping of the foot itself. Having practiced Kendo for some years, I can easily spot the lack of power being wasted by the stomping of the foot too late in the attack.

Try to make him step forward completely just as he's beginning to swing his weapon, then follow-through with the attack as it is now (you'll mostly just need to delay/slow the upper-body movement by a few frames before he swings [this is all assuming you're going for a powerful sword strike of course] ).

The main thing is to make sure he has stepped forward first (his upper-body dragging behind a little), then, once his weight is placed on his front leg almost completely, lean his upper-body in for the slash.
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/

Offline Zizka

  • 0010
  • *
  • Posts: 497
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Slashing Animation

Reply #8 on: December 04, 2013, 09:18:09 pm
@ErekT:

Quote
I get the feeling you didn't try the movement out for yourself, did you?

I did and I got the first result. Maybe I need to use a mirror or something.

@HarveyDentMustDie:

What upset me is that I had the feeling I was being accused of something I never considered in the first place considering that I thought it was ok to do what I did (and still kind of do to some extent). No hard feelings anyway. Anyways, this won't happen again as I will always put up every single reference I use in the future.

@Selassin:

I think removing some frames might be a good idea.

@astraldata:

I've copy/pasted your message and try to improve my version although I might remove the foot thing entirely in order to the animation to be more different than my reference.

Offline wolfenoctis

  • 0100
  • ***
  • Posts: 1072
  • Karma: +2/-0
    • View Profile

Re: Slashing Animation

Reply #9 on: December 05, 2013, 04:36:12 am
Copying to figure out what someone did is ok, as long as you don't stop there, understand the principles he used and apply them to your own animation. It's clear from your post that you didn't understand why he made that char move the way he did(referring to chasm's), which is why you ended up with a shallow imitation. Now there is a reason people tend to look down on copycats and plaigerisers, they are seen to be ripping off someone elses work rather than doing the effort of coming up with their own and the practice is rightly frowned upon. I'ts ok for practice but not when presenting it as your own work. To illustrate my points I made two variations using the same principles used in the chasm sprite:




See the difference, the expression of my movements are my own, but I used the same principles as that of chasm's sprite instead of copying the expression of chasm's sprite.

Also try to keep your sprite rough like I did mine until you've finalised the animation, and then detail it, it will save you a lot of unnecessary work  ;D
A good resource on animation and it's foundational principles can be found in "The Animators Survival Kit" by Richard Williams (Highly Recommend you obtain it if you're able).
Hope it helps and good luck  :y:

Edit: The pauses at the beginning and end of my animations are just to show off the movement, they should not be present in a game scenario because they will make the controls feel unresponsive, no one wants to press an attack button and wait for an attack to happen ;D
« Last Edit: December 05, 2013, 04:47:44 am by wolfenoctis »

Offline astraldata

  • 0010
  • *
  • Posts: 391
  • Karma: +1/-0
    • View Profile
    • MUGEN ZERO

Re: Slashing Animation

Reply #10 on: December 05, 2013, 06:41:51 am
Nice slash animation there dude.

And I second the recommendation of that book. It's hella cheap on Amazon, and for what and how it teaches you, I've not seen or heard of anything that tops it yet.

Also echoing what wolfenoctis mentioned, as far as animation in pixel art goes, it's definitely good practice to keep your animations rough until you've nailed the movement you're after.

It's difficult to realize this as a beginner to both pixel art and animation, since, if you're anything like I was when I got started, you'll probably be thinking "well, the more I can copy/paste in an animation, the less work I'll have to do later since most of the pixel-work is already done," which is faulty logic when it comes to animation where small expressive sprites are required (such as the case is with yours) because a single pixel in the wrong place can ruin the form you're trying to express, and this is double-true when that tiny set of pixels need to express subtle movement over multiple frames (since there is no concept of sub-pixel movement when it comes to animations in small sprites -- so you'll have to use other colors/shades to blur the pixel between two locations, or leave that pixel where it is until the correct moment when the movement is significant enough to allow it to translate to a new position).

As mentioned/shown already, it is better to redraw the image in flat colors if your sprite is small (and only copy/paste static chunks with slight tweaks to simulate perspective shifts when the sprite is large, redrawing everything else in flat colors that connects the chunks together) because this gives you the ability to change subtleties in the essence of your movement + expression (even at very small scales such as this one), and that stuff does matter very much. You should put in as much -- or more --  thought and work into planning your movement as you do into your pixel-placement.

If you play with it long enough, you'll find that animation can be just as fun, perhaps even moreso, than drawing/designing the character itself. This sense of enjoyment only comes when you realize that animation is not just something you have to do for your game, but what actually gives your characters and worlds their life, and this can be changed easily by simply tweaking a motion where you might think a character *should* go up, and making him go down instead. The more you play with it, the more you do your own thing with your movements, the more you'll both learn and enjoy it. Though, whatever you do, remember that you've got to keep a sense of weight and follow-through in your motions (even the impossible ones), or they'll be dull and lifeless.

Motion is simply the translation of mass and energy from one point to another, usually in the form of an arc.

In the slashing animation you have here, figure out the main arc of the slash, and make the head/body/shoulder/arm/elbow/hand follow it in succession. What you do with the *rest* of the body is what gives your slash the 'expression' wolfenoctis was referring to.

In the case of what I was describing to you earlier, that's a standard kendo/samurai style slash, but your character doesn't need to be a master japanese swordsman if that's simply not in his character. He could slash just like you would swing a bat, and as long as the body moved convincingly enough (i.e. it expressed sufficient anticipation, action, & recovery to compensate for the entire motion), it would be an effective animation, no matter what way you decided to move the body or sword during the attack.
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/

Offline Zizka

  • 0010
  • *
  • Posts: 497
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Slashing Animation

Reply #11 on: December 05, 2013, 09:28:06 pm
@wolfennoctis:

Quote
. Now there is a reason people tend to look down on copycats and plaigerisers, they are seen to be ripping off someone elses work rather than doing the effort of coming up with their own and the practice is rightly frowned upon.

Well, hopefully I haven't been branded as this kind of person just yet.  :yell:

Quote
See the difference, the expression of my movements are my own, but I used the same principles as that of chasm's sprite instead of copying the expression of chasm's sprite.

To be honest, I still think your new version is *really* similar to chasm's one. Instinctively I would've said that it's not different enough to say you've personalized it. Goes to show the whole thing is sort of subjective after all (nice animation by the way). I think that when it comes to digital art, the boundary between what belongs to others and what belongs to you is very, very thin and very much so debatable.

I have the book you mentioned, Pixel Pile Driver had already suggested it to me  ;D.

Anyhow, I'll rework the second one to make it more of my own and will share the result here.

Offline Mr. Fahrenheit

  • 0010
  • *
  • Posts: 326
  • Karma: +0/-0
    • View Profile

Re: Slashing Animation

Reply #12 on: December 05, 2013, 09:45:18 pm
Dont worry, I dont think anyone thinks you are copy cat or whatever. You've been around here for a while and have worked on a lot of things.

Just keep working on it  :)

Offline wolfenoctis

  • 0100
  • ***
  • Posts: 1072
  • Karma: +2/-0
    • View Profile

Re: Slashing Animation

Reply #13 on: December 06, 2013, 03:48:49 am
Well, hopefully I haven't been branded as this kind of person just yet.  :yell:
You haven't, you've just been made aware of the risk of this happening if you copy others work too closely and present it as your own. Also don't take things too personally, if I thought you were a copycat I would come right out and say it, it was just critique and a kind warning.

To be honest, I still think your new version is *really* similar to chasm's one. Instinctively I would've said that it's not different enough to say you've personalized it. Goes to show the whole thing is sort of subjective after all (nice animation by the way). I think that when it comes to digital art, the boundary between what belongs to others and what belongs to you is very, very thin and very much so debatable.

Of course it is, I used the exact same principles: the anticipate moving the char back before the swing, the swing itself wich is a wide arc and the recovery to the idle stance. The whole point I was trying to get across is that you can use the same principles but with a different expression of movement. These principles are not the creation or the property of the animator of chasm's sprite but relatively common in sprite animations, his expression of movement is however his own creation even though he "copied" the principles used by many other sprites.

You can use the same principles, but don't copy the expression of movement.  ;D

Offline ErekT

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
  • fistful of pixels
    • View Profile

Re: Slashing Animation

Reply #14 on: December 06, 2013, 03:51:53 am
Quote
I did and I got the first result. Maybe I need to use a mirror or something.

Mirrors are good.

In the first animation, your character keeps his free hand resting on his hip. That's a bit relaxed for someone in a knife/sword fight where limbs and guts might go flying, isn't it? When acting out the motion you'd best think through how you'd act in the actual situation. Someone wants to kill you! You have a blade in your hand. What do you do? Even for a baseball bat swing, you'd be likely to put your whole body into it and that's just a ball coming at you.

Offline Zizka

  • 0010
  • *
  • Posts: 497
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Slashing Animation

Reply #15 on: December 06, 2013, 12:16:10 pm
@wolfenoctis:

I see what you mean, don't worry. I think this whole topic (is it different enough or not to use it in my game) would probably lead to an interinable tale of various equally valid opinions pretty much because of this sentence:

Quote
relatively common in sprite animations, his expression of movement is however his own creation even though he "copied" the principles used by many other sprites.

I can really see how one could get in an endless lexical argument as to what is copied, what is inspired, what is a reference, which principles are ''public domain'', what is ok and what is isn't according to one and not the other, etc...

I don't know if you understand what I'm saying but anyways, let's leave it at that, the objective of the thread isn't to debate about this anyway. I'll edit the sprite according to what I think is different enough to warrant using it in my game and we'll take things from there.

@ErekT: Actually, the hand is supposed to be in front of his torso but I think I need to redo that as well. Again, thanks for the input.

Offline coffee

  • 0010
  • *
  • Posts: 190
  • Karma: +1/-0
    • JohanAronson
    • View Profile

Re: Slashing Animation

Reply #16 on: December 06, 2013, 04:46:37 pm
People put a lot of time and thought into their projects and it often becomes somewhat like a baby. Artists on the internet are very exposed so that's a reason for the harsh tone it might take sometimes. It's hard to track down and get a formal closure to something that breaks copyright when we are spread all over the globe, almost impossible.

It was my first thought when I saw the animation as well, that it looked very much like the Chasm one. However it's good to do things other do just to understand what they have done. Just don't make it a habit and never stop trying to develop your own style and mark on you art.

It's a great feeling when people can see that it's you who've made the art without knowing beforehand.

So try to make your own version of it ! Because now I can't really see the difference.

/coffee

Offline Daimoth

  • 0010
  • *
  • Posts: 140
  • Karma: +0/-0
  • I Am Tooth
    • View Profile

Re: Slashing Animation

Reply #17 on: December 06, 2013, 05:38:15 pm
Regarding the whole p,agiarism thing, i posit that the Chasm animation is a logical place to start in terms of reference sbecause of its simplicity. Animation is intimidating, it is only natural to take small steps at first. I doubt this is he first or last time there will be Chasm like swing anims, tbh.

Offline Cyangmou

  • 0011
  • **
  • Posts: 929
  • Karma: +3/-0
    • cyangmou
    • http://pixeljoint.com/p/32234.htm
    • cyangmou
    • View Profile
    • Pixwerk Homepage

Re: Slashing Animation

Reply #18 on: December 06, 2013, 06:50:57 pm
there were about 508304 with a similar slashing animation like Chasm has before this animation was created.
I mean a simple swordstroke always will look like a swordstroke (with about 508304 more or less subtle variations).

If you act a swordstroke out you will come to a very similar movement.

Also if we look at Kendo and Aikido videos of sword techniques we will see that the ideas of how the feet move and how they weight is shifted is heavily inspired by reality. THe rest is simplification and timing.

If it'd be a super characteristical animation only the character has (like Sonic's Dash attack) I'd go and call something plagiarism, but not for simple movements.
I mean all walk and run cycles also work with the same principles over and over and over again.

And I never heard that the basic 3 sprite RPG walk is plagiarism of game xy.
[sarcasm]we should bring that up once somebody is posting a rpg sprite next time[/sarcasm]  :crazy:
"Because the beauty of the human body is that it hasn't a single muscle which doesn't serve its purpose; that there's not a line wasted; that every detail of it fits one idea, the idea of a man and the life of a man."

Dev-Art
Twitter

Offline coffee

  • 0010
  • *
  • Posts: 190
  • Karma: +1/-0
    • JohanAronson
    • View Profile

Re: Slashing Animation

Reply #19 on: December 06, 2013, 09:47:09 pm
Well no, there are plenty of ways to make a sword slash animation since there are no rule saying there is a certain way to slash a sword in a digital world. However since there were plenty of people reacting on it looking almost exactly the same does say something. I'm not calling plagiarism, I'm just against taking shortcuts to make something look good without actually learning something, like someone mentioned earlier. There is a big step without any really explanation between the first version and the second, upping the quality of the animation several dots.

and coming out with a version inspired by your own imagination and with your own style on it will probably make you a better artist. Why is that not sought for?
« Last Edit: December 06, 2013, 09:56:15 pm by coffee »

Offline Zizka

  • 0010
  • *
  • Posts: 497
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Slashing Animation

Reply #20 on: December 07, 2013, 07:07:31 pm
I personally agree with Cyangmou but it's true my version was too similar.

I've played it safe this time.

First of all, here are the references I used. Keep in mind that this is all I used this time around, any other resemblances with anyone elseís work would be purely coincidental.



(this one is pretty big)
http://img10.imagefra.me/i5c7/freemind/fuui_808_u5vq6.jpg

The new version doesn't look as good as the second one but I'm certain there won't be any doubt about the authenticity this time around. I kept editing and editing and editing and it was a good learning experience (although I'm nowhere done with this just yet). I went for more of a knife instead of a sword this time around.

Right off the bat, I can still see some things which need fixing (like the size of the leg which decreases on the last sprite), but I figured now would be as good a time as any

Now if it looks like a parody ( ;)), telling me how to improve it would be most helpful (humour, peace).

Here:



Now, let's see if I can get as many comments about the animation as I did for the other issue  :D.

Offline coffee

  • 0010
  • *
  • Posts: 190
  • Karma: +1/-0
    • JohanAronson
    • View Profile

Re: Slashing Animation

Reply #21 on: December 07, 2013, 07:35:18 pm
Nice one! It's good to see that you used what you had learned from doing the other animation and put your own touch to it. I am not at all an expert at animation, I'm currently putting a lot of time learning whilst doing projects.

Like you said there are things to tweak. First of all I think it would look good if he actually turned his head a bit, would make it easier to see that he got his back to us when he charges and easier to see it's the front when he's done. Also the arm looks a bit dislocated in the final frame, I think you should move it a bit more up and also perhaps give the strands of hair a bit of movement to make it more alive.

nice progress

/coffee
« Last Edit: December 07, 2013, 07:37:04 pm by coffee »

Offline Zizka

  • 0010
  • *
  • Posts: 497
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Slashing Animation

Reply #22 on: December 07, 2013, 07:57:51 pm
Thanks coffee, I appreciate your help  ;D.

When I was slashing my knife in my home (no it did not look psychotic in the slightest), I realized I wasn't moving my head (not much anyway). Which is why I opted for a rather ''static''. Having him twisting more might help giving more dynamism so I'm going to give your suggestion a shot and see what happens.

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 468
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art

Re: Slashing Animation

Reply #23 on: December 07, 2013, 11:18:53 pm
 There's no parody here. ;) I'm glad that you invested more of yourself into this, and now this is officially yours. ;D That was the point of the whole argument. This time you used references as they should be used.  :)

Quote
The new version doesn't look as good as the second one
but maybe it will be even better at the end.

He shouldn't make such a big step forward. It's like fencing, and it's to graceful for a knife attack.
 

I think that his left leg should be up front, like the leg of character from your second reference. This is side view, and characters is turned away from the user (more or less) during the whole gesture, and that's not very good. His final posture should be like the one in the second reference.

His left arm is very strange. Maybe arm should go back at the beginning (while right one is positioned like in your animation) and at the end should be in line with the body, or very little in front of it. Try it yourself, it's easier to understand. 

Knife motion blur should be more narrow, because now his weapon is smaller. Also you should remove one pixel from each side of knife handle (or change it) because it's to big for a knife. Now the weapon looks like a short sword.

Quote
When I was slashing my knife in my home (no it did not look psychotic in the slightest), I realized I wasn't moving my head (not much anyway). Which is why I opted for a rather ''static''.
If it makes him look better, use it.  ;)

I hope that I was "most helpful". :)

Offline Zizka

  • 0010
  • *
  • Posts: 497
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Slashing Animation

Reply #24 on: December 08, 2013, 04:36:20 pm
Alright you guys :  ;D

Elements added based on Coffeeís criticism:

- Added an animation to the hair.
- Twisted the body some more in the pre-slash animation.
- Fixed the dislocated arm.

Elements changed on HarveyDentMustDie criticism:

- Final frame now ďfacesĒ us.
Quote
His left arm is very strange. Maybe arm should go back at the beginning (while right one is positioned like in your animation) and at the end should be in line with the body, or very little in front of it. Try it yourself, it's easier to understand. 
I didnít understand this. Could you exemplify with a picture? Well I think I understood. Iíve modified the left arm entirely.
- Made the handle of the knife narrower.
- Made the slash animation narrower.
- Reduced the free space between the two legs.

My own modifications:
- Made the character look slightly down as he is about to swing (see ref):
- Modified the ending position of the knife. I felt it was unnecessarily too high before.
- Changed the position of the arm on the torso on the pre-slash frame. It didnít look right to me.
- Also removed the blur for the arm, it was unnecessary. I made this decision after analyzing Wolfennoctis gif higher up the thread.
- I modified the blur animation after playing Prinnieís last night.
- I added some blur on the first slash of the animation (this idea also came to me after checking out the animation by Wolfenoctis.
- Fixed the width of the legs.
- Changed the background color to something slightly darker so that the animation stands out more.

And here's the result:

V.3: (previous version)



V.4 (current version)



Alright, whatís next guys, hehe  :y:. You canít say I donít take your input into consideration huh?

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 468
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art

Re: Slashing Animation

Reply #25 on: December 08, 2013, 09:41:44 pm

This is very raw and sloppy edit (only 4 frames :) ), but good enough for you to understand what I was saying.

Also maybe you should consider removing black outlines, that way you will gain more room for details.

Offline Zizka

  • 0010
  • *
  • Posts: 497
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Slashing Animation

Reply #26 on: December 10, 2013, 08:19:12 pm
Oh I see thanks. I kind of like the hand the way it is now though.  :y:

Alright, I added another slash to the animation. It's actually faster than shown here, I think I'm having speed limitations because of the browser. That's too bad, I'd like you guys to see the *real* speed.

I added a "trail" to the slash, I think it looks nicer that way.

As always, your comments are more than welcome, I use them to improve.

Also, on HarveyDentMustDie recommendation, I removed the outine and change the direction on the face on a frame.

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 468
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art

Re: Slashing Animation

Reply #27 on: December 10, 2013, 11:28:48 pm
I said this many times
Quote
I think that his left leg should be up front, like the leg of character from your second reference. This is side view, and characters is turned away from the user (more or less) during the whole gesture, and that's not very good. His final posture should be like the one in the second reference.
but I will repeat it again, you should look leg positions in my edit, you'll see that the front leg is "dark one". Leg positions of your character implies that he is turned away from user (user can see his back instead of his front) which is not good.

Example:http://www.youtube.com/watch?v=Z0wNb3DHMmY
Character never turn his back to user even during the attack.

You still have outlines on his head and legs.

About animation, recommended minimum time for browsers is 0.02s per frame.

« Last Edit: December 11, 2013, 12:14:59 am by HarveyDentMustDie »

Offline HardcoreBadger

  • 0001
  • *
  • Posts: 39
  • Karma: +0/-0
    • View Profile

Re: Slashing Animation

Reply #28 on: December 10, 2013, 11:33:54 pm
The first one is very good for a "fun" motion

but the last one you made is awesome, better than the Chasm gif for me

and about the legs, I don't see any problem with the char "showing his wonderful back", seriously this is only more work for "nothing". Is it a rule ? "never ever ever show the back of your character when making an animation else the player will feel very sad"



Why not making more frames describing the motion ? i mean the motion between the frame 4 and 5, you only see the beginning and the end but the motion blur is kinda replacing it.
So I wonder if the motion blur is also a way to gain some frames ? I must draw something like this and its very hard for me, and on my model there is no motion blur so I thought I'd need to draw the missing frames but if i can replace it exactly as you did, it will save me 2-3 frames for each attack animations !!
My animation is much more realistic than this and it's like 20-30* bigger (or even more) and has a realistic perspective too (yes it's higher level than my skills are lol).


I analyzed the chasm gif and your animations and saw there is no frames between the beginning and the end of the slash (and thats why i post here, dunno if its a good idea though).
« Last Edit: December 11, 2013, 12:10:47 am by HardcoreBadger »

Offline Zizka

  • 0010
  • *
  • Posts: 497
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Slashing Animation

Reply #29 on: December 11, 2013, 12:46:25 am
@HarveyDentMustDie:

Arrrrrgh! Sorry, I didn't understood what you meant (English isn't my first language). I checked the video and now I get it. Thanks!

Will remove the border too.

@HardcoreBadger:

Quote
but the last one you made is awesome, better than the Chasm gif for me

Wow, for real? Thanks! It means a lot to me!  ;D

Quote
and about the legs, I don't see any problem with the char "showing his wonderful back", seriously this is only more work for "nothing". Is it a rule ? "never ever ever show the back of your character when making an animation else the player will feel very sad"

I don't know. My guess would be that the front of the character is more interesting to look at than the back.

Quote
Why not making more frames describing the motion ? i mean the motion between the frame 4 and 5, you only see the beginning and the end but the motion blur is kinda replacing it.
So I wonder if the motion blur is also a way to gain some frames ? I must draw something like this and its very hard for me, and on my model there is no motion blur so I thought I'd need to draw the missing frames but if i can replace it exactly as you did, it will save me 2-3 frames for each attack animations !!
My animation is much more realistic than this and it's like 20-30* bigger (or even more) and has a realistic perspective too (yes it's higher level than my skills are lol).

Well, the way I understand it, ''skipping'' frames and using blur is a way to give a stronger impression of speed. Look at Wolfenoctis example higher in the thread, I think it gives a good idea.



Offline HezaKey

  • 0001
  • *
  • Posts: 55
  • Karma: +0/-0
  • *draws furiously*
    • hezakey
    • hezakey
    • View Profile

Re: Slashing Animation

Reply #30 on: December 11, 2013, 02:43:43 am
I actually noticed that if you stare at the animation too much you can actually switch which leg is right/left. (kind of like that optical illusion with the twirling ballerina.)

Maybe just a little more shadow/definition/something will make that effect go away.  Although, I'd still buy this as a very convincing slash animation if implemented in a game, as is.  It's fun to watch, and I can see bad guys flying in it's wake.

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: Slashing Animation

Reply #31 on: December 11, 2013, 11:40:39 am
Looks good.  :y:

Here's the original with the 1 delay frames changed to 2 delays:


The hand stops instantaneously after the first swing and creates a sticking effect.
This pulls a lot of attention because the hand/knife is the focus of the action.
Try to apply subtle motions to balance your broad motions.
Here's a bunch of slightly different edits.

And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline HardcoreBadger

  • 0001
  • *
  • Posts: 39
  • Karma: +0/-0
    • View Profile

Re: Slashing Animation

Reply #32 on: December 11, 2013, 06:39:01 pm
PixelPiledriver, I see a difference between your edits but I can't see which one lol I know they are differents but still I cant define why. It looks so easy for you all to animate characters o_0

And thanks for the input on Wolfenoctis example which is great ! I didn't see it first !

Offline Zizka

  • 0010
  • *
  • Posts: 497
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Slashing Animation

Reply #33 on: December 11, 2013, 09:22:24 pm
Looking extra nice as usual, Pixel Pile Driver. Thanks!!  :y:

@HarveyDentMustDie:

I did a bit of research and actually found quite a bit of games which didn't show ''the front'' of the character, some of them as popular as double dragon:





In the Double Dragon shot, the character actually turns even farther away from the player. The character's legs are also in about the same position as those in mine. I don't know, it looks fine to me. Just wanted to share what I found out.

Offline astraldata

  • 0010
  • *
  • Posts: 391
  • Karma: +1/-0
    • View Profile
    • MUGEN ZERO

Re: Slashing Animation

Reply #34 on: December 11, 2013, 10:13:59 pm
Quote
In the Double Dragon shot, the character actually turns even farther away from the player. The character's legs are also in about the same position as those in mine.

The only difference that makes the leg position so awkward in yours versus the Double Dragon sprite is like someone said previously -- it's too easy for the eye to be tricked into thinking the back leg is the front and vice versa. Even with proper lighting, your issue is with the readability of the silhouette, not with the pixels themselves.

If you moved the back leg farther back, making the character appear to almost kneel when slicing or even just shifted the back thigh forward to turn with the hip as it turns the front of the character forward in 3d, it would fix this issue.

Since there's no indication of a knee in the back leg to give a sense of 3d depth (in terms of shape+size), it makes it very hard for the eye to recognize what's going on at first glance. Unlike the Double Dragon sprite, if you turned your character sprite entirely one color, you wouldn't be able to tell which leg was in the front on your sprite. Thus is the difficulty of dead-on 2d views in animation.
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: Slashing Animation

Reply #35 on: December 11, 2013, 10:39:46 pm
Quote
I know they are differents but still I cant define why.
Sorry, sometimes I don't take the time to write about my edits.
It's important to study how animation changes from frame to frame, so if you ever have questions of what you see download the gif.
All of the edits have slightly different timing and spacing.

The first few edits work on the hand stickiness.
The hand stops at the end of each slash instantly and holds position.
Adding progression in motion helps resolve actions.
And subtle motion helps smooth transitions and create focus.


The last two edits play around with making him lean back before the first slash to give him more space to lean forward, creating more change, speed, and impact.
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline YellowLime

  • 0010
  • *
  • Posts: 227
  • Karma: +0/-0
    • View Profile
    • Sour Pixels

Re: Slashing Animation

Reply #36 on: December 11, 2013, 11:01:07 pm
Always leave it to PixelPiledriver and his high-quality, detailed edits to save the day! :y: :crazy:

Offline HardcoreBadger

  • 0001
  • *
  • Posts: 39
  • Karma: +0/-0
    • View Profile

Re: Slashing Animation

Reply #37 on: December 11, 2013, 11:24:22 pm
Quote
I know they are differents but still I cant define why.
Sorry, sometimes I don't take the time to write about my edits.
It's important to study how animation changes from frame to frame, so if you ever have questions of what you see download the gif.
All of the edits have slightly different timing and spacing.

The first few edits work on the hand stickiness.
The hand stops at the end of each slash instantly and holds position.
Adding progression in motion helps resolve actions.
And subtle motion helps smooth transitions and create focus.


The last two edits play around with making him lean back before the first slash to give him more space to lean forward, creating more change, speed, and impact.



owww ok I thought u didn't edit the frames in itself, only the timings

this one is the best for me

Imma analyze these later :) ty for the explanations

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 468
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art

Re: Slashing Animation

Reply #38 on: December 11, 2013, 11:57:42 pm
Quote
I don't know, it looks fine to me.

Your game, your choice. :) That was just my opinion.

Also, another thing crossed my mind. You will have to make animation that will move character from idle position to this "back turned" fighting position, to keep everything smooth.

After PixelPiledriver edit, animation looks pretty good.  :y:

Offline HardcoreBadger

  • 0001
  • *
  • Posts: 39
  • Karma: +0/-0
    • View Profile

Re: Slashing Animation

Reply #39 on: December 12, 2013, 12:17:03 am
Quote
Also, another thing crossed my mind. You will have to make animation that will move character from idle position to this "back turned" fighting position, to keep everything smooth.

Yes you must do that if you want the perfect thing, but think about the Warcraft 3 animations for example (as I know them a lot), they are pretty detailed because it's 3D but there is no transition between some animations, like when a unit runs then suddenly stops and changes to the attack animation.
It's the same thing in World of Warcraft where the animations are pretty good (not for all units though).

So HarveyDentMustDie is the advice for the perfect work, mine is the advice for the less frustrating work xD
But he is more qualified than me ofc :P

Offline Zizka

  • 0010
  • *
  • Posts: 497
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Slashing Animation

Reply #40 on: December 12, 2013, 01:41:01 pm
Quote
The hand stops at the end of each slash instantly and holds position.
Adding progression in motion helps resolve actions.
And subtle motion helps smooth transitions and create focus.

Ah ah! That's why. It's always great when you explain the edits, easier to learn from them.  :y: :y:

I'll tweak it a bit further based on this advice and we'll call it done as I'll soon be spamming the board with the next step: a jumping animation.