AuthorTopic: GR#136 - Knight Swordswing - Animation  (Read 12407 times)

Offline jahasaja

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

GR#136 - Knight Swordswing - Animation

on: September 04, 2013, 05:32:35 am
Hi all,

I am trying to make a sword swing but i cannot seem to make the motion blur look good.

I  tried several different versions but all seems to come out bad. I guess the problem is that I have several animations frames during the swing (needed for the game).



any ideas??

Offline r1k

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

Re: Help with Sword swing motion blur

Reply #1 on: September 04, 2013, 07:50:08 am
Im not the best at animating but I gave my try at an edit.



what I noticed first about your animation is that the motion is distributed pretty evenly.  It should be slower during the anticipation, and quicker during the action.  So I added a few extra anticipation frames.  I didnt spend that much time, so its not very good, but what I wanted to acheive by this was to show the weight of the sword pull him over a little as he brings it back. 

Now the foreward motion should be fast, so I cut a few frames out.

The point of motion blur is that youre drawing multiple positions of something in a single frame.  You want the motion to be fast, but you also want to show all the inbetween stages, but you dont want to add more frames because that would slow it down.  So instead you draw all the positions it moves through in 1 frame.  If you simplify this, you can just draw a blur of the object in the positions it moves through rather than actually drawing the object multiple times. 

So I put the motion blur on the frame with the most displacement from the previous frame (right when he brings it foreward).

Lastly, I added some frames where he doesnt have his sword out at the beggining.  This is just so we dont have to watch it looping over and over and also so we can see what the transition from the end of the sword swing into an idle pose looks like.  This is just for viewing purposes, and would be taken out after the animation itself is perfected.

Maybe someone more knowledgable about animation will come by and say I am wrong about this stuff though, Im still new to animation.

Offline jahasaja

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

Re: Help with Sword swing motion blur

Reply #2 on: September 04, 2013, 08:10:20 am
thanks a lot. It looks good.

However one problem is that i need more than one frame for the swing (for collision detection in the game) so i need to make it work with more than one frame. Maybe you should not have motion blur when you have more than one frame??
« Last Edit: September 04, 2013, 08:22:16 am by jahasaja »

Offline numlock

  • 0001
  • *
  • Posts: 47
  • Karma: +0/-0
    • View Profile
    • my blog

Re: Help with Sword swing motion blur

Reply #3 on: September 04, 2013, 08:49:57 am
I think the motion lacks weight, also I don't think you should start shading before youre sure you want to use that animation, heres my quick edit but I know it could be done much much better, I think his back looks wrong on some frames but overall it might have the punch you want, maybe even more, also its 13 frames so 1 frame more than your animation, but someone more competent could make better animation with even less frames I think
« Last Edit: September 04, 2013, 08:52:03 am by numlock »

Offline r1k

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

Re: Help with Sword swing motion blur

Reply #4 on: September 04, 2013, 09:45:03 am
I really liked what numlock did in his edit so I updated my edit, mainly by copying the last couple frames from numlocks edit into mine.  I also tried taking out the frame where the sword is horizontal before it hits the ground cause it was kinding of slowing the impact.  Instead I copied the frame where it hits the ground and tried adding a motion blur on that frame too.  Not sure how well it works having 2 frames of blur.  Though it seems its important that the shapes of the blur match/move smoothly into each other.



sorry, I feel like Im hijacking your thread, but hope its helping atleast.

Offline jahasaja

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

Re: Help with Sword swing motion blur

Reply #5 on: September 04, 2013, 10:01:51 am
Thanks both, Yeah i know he lacks some weight. what you guys are doing helped a lot 

Still problem with the collision detection though. I guess I will have to find another way to solve that

Offline numlock

  • 0001
  • *
  • Posts: 47
  • Karma: +0/-0
    • View Profile
    • my blog

Re: Help with Sword swing motion blur

Reply #6 on: September 04, 2013, 10:27:26 am
for collision dedection just make an invisible sword like object appear in front of him while attack animation is running and use that for actual attack instead of your player object, it should be like projectile but still and have few seconds of existence in game, you could also add an hitting effect(like dust or something) when it collides with enemy so it'll give more punch to it I think

Offline tim

  • 0010
  • *
  • Posts: 240
  • Karma: +2/-0
  • Founder of Odd Tales - Art Director
    • View Profile
    • Tim Soret - Showreel

Re: Help with Sword swing motion blur

Reply #7 on: September 04, 2013, 12:12:25 pm
thanks a lot. It looks good.

However one problem is that i need more than one frame for the swing (for collision detection in the game) so i need to make it work with more than one frame. Maybe you should not have motion blur when you have more than one frame??

You shouldn't use the actual graphic animation as a the real collision data. Always try to separate the graphics (which is supposed to be pretty and complex) with the engine (which should be a simplified version for faster calculations anyway).
Founder of Odd Tales
Art Director - Game Director - Game designer - Motion designer

Offline ptoing

  • 0101
  • ****
  • Posts: 3063
  • Karma: +0/-0
  • variegated quadrangle arranger
    • the_ptoing
    • http://pixeljoint.com/p/2191.htm
    • View Profile
    • Perpetually inactive website

Re: Help with Sword swing motion blur

Reply #8 on: September 04, 2013, 01:01:06 pm
I don't see a good reason to suggest that you should never use actual graphic data as collision. We are not in the 90s anymore where this makes a big impact on processing. There are cases where it is warranted, all depends on what kinda game you are making and how you want your fighting system to be like.
There are no ugly colours, only ugly combinations of colours.

Offline jahasaja

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

Re: Help with Sword swing motion blur

Reply #9 on: September 04, 2013, 02:20:40 pm
I want to be able to block the attack. I want it to look natural when you block so that is why I need several animations. I am working on something and will post it here when it is done. (will probably look shit  :P)

Offline PypeBros

  • 0100
  • ***
  • Posts: 1220
  • Karma: +2/-0
  • Pixel Padawan
    • PypeBros
    • View Profile
    • Bilou Homebrew's Blog.

Re: Help with Sword swing motion blur

Reply #10 on: September 04, 2013, 02:43:32 pm
Quote
Maybe you should not have motion blur when you have more than one frame??
I suggest you have a look at these animation edits by PixelPileDriver.

Quote
I don't see a good reason to suggest that you should never use actual graphic data as collision.
"never" would indeed be extreme and thus not so useful. Our abilities to learn hitboxes (as gamer) is the determining item for coding a collision engine, imho: the player must be able to tell whether things will collide or not.

actual graphic data might be helpful, but they're usually over-estimated by (wannabe?) game designers. Imho, they'd have to be "actual graphic data of layer X if [additional condition, e.g. in form of a hitbox] as :
 - you don't want your player's cape to get hits from that arrow
 - you don't want the blob to get a hit if it touches your back foot while you're giving a sword slash.

Quote
I want to be able to block the attack. I want it to look natural when you block so that is why I need several animations.
I'd dare to say that that would be an orthogonal problem. The "anticipation" phase of the animation is crucial if you want the opponent to have the ability to block: this is the timeslot he's given to press the button. He'll likely turn into "blocking" state then, and the slash animation would resolve in "blocked slash" rather than into "completed slash".

(PS: I have kirby kid's terminology in mind, just in case I'm fuzzy.)

Offline Pix3M

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

Re: Help with Sword swing motion blur

Reply #11 on: September 04, 2013, 04:04:46 pm


The issue is that the sword is moving the same distance each frame. This is incorrect because in real life, because of the way physics work, objects have to accelerate to change its motion. That means that if you want to move something in animations, yuo ideally want to have it slow in to the motion, and slow out back to being still.

Here, the sword starts slow, then I smeared the frames where the sword is moving very fast. Then, it slows down at the end of the attack.

Offline PixelPiledriver

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

Re: Help with Sword swing motion blur

Reply #12 on: September 05, 2013, 02:08:42 am
Quote
yuo ideally want to have it slow in to the motion, and slow out back to being still.
Slow In and Slow Out are animation concepts that help in creating more convincing motion.
Like Pix3M  is suggesting, it is good to learn the basics and use them creatively when animating.
Threw together some stuff to help express them visually:















You can also find many more examples of this elsewhere.
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline jahasaja

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

Re: Help with Sword swing motion blur

Reply #13 on: September 05, 2013, 05:39:02 am
Thanks a lot for all the help..

I will try to make one with a lof of frames. (lot of work :-( ) and see how it goes.  I tried to make one but it seems that gifs have limit on how fast they can play so right now it looks better in the game than as a gif

If i can have one last question it would be: How to make good looking motion blur with several frames l(like +6 frames or something)? Perhaps even the hand should be blured.

As for some of the issues for the totally wannabe (i.e. me) game creator.

Quote
- you don't want your player's cape to get hits from that arrow
If if you use the graphic you can still code which part of the graphic that would be the hitbox

Quote
  - you don't want the blob to get a hit if it touches your back foot while you're giving a sword slash.
  Same here. if the blob hit the player's fot the player should get injured even if it is during the sword attack animation. if the sword hit the blob the blob should get injured.


Offline r1k

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

Re: Help with Sword swing motion blur

Reply #14 on: September 05, 2013, 06:21:12 am

Offline PixelPiledriver

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

Re: Help with Sword swing motion blur

Reply #15 on: September 05, 2013, 08:17:58 am
Did some edits.

more anticipation, forward movement, 2 multi frames, energy dissapation
same as above with blur - good call r1k.
1 delay slower than the above

I usually do an animation several times to get a feel for it.
Here's my quick process animations that led me to the above.





Many things could still be improved.
My edits are a bit messy, most of the motion is was done with the select tool with some drawing here and there.
Do everything in passes and clean up later.
Be creative with how you want to represent the slash and how to dissipate the energy from it.
There are many different styles depending on the feel that you want.
« Last Edit: September 07, 2013, 07:59:41 pm by PixelPiledriver »
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline jahasaja

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

Re: Help with Sword swing motion blur

Reply #16 on: September 05, 2013, 11:01:28 am
Wow thanks that was awesome!

Offline Dusty

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

Re: Help with Sword swing motion blur

Reply #17 on: September 05, 2013, 05:12:05 pm
I don't see a good reason to suggest that you should never use actual graphic data as collision. We are not in the 90s anymore where this makes a big impact on processing. There are cases where it is warranted, all depends on what kinda game you are making and how you want your fighting system to be like.

The only problem with graphics is that they may not always lead to good gameplay. For example, if you have a small sword you might want to extend the hitbox to a bit larger than what is visually going on so gameplay is more balanced. Or maybe you want detection to persist past where the sword is graphically in the animation(ie still hitting enemies above you despite being in the last few frames of the animation and the sword is in front). In the end I find coding hitboxes/collision boxes give you more control over what you want to happen as opposed to using graphic collision. Alternatively could combine these and use a collision map overlay with graphics/shapes. but you're right, it all depends on the game and what you want, but I can't think of many instances where graphical collision would be ideal unless you want very, very precise detection(which I don't think suits fighting games all that well).

Also on a sidenote, PixelPileDriver is my hero. He's god damn everywhere providing the most amazing and helpful critique.

Offline Corinthian Baby

  • 0010
  • *
  • Posts: 223
  • Karma: +1/-0
  • Meditating Pixel Placement
    • View Profile

Re: Help with Sword swing motion blur

Reply #18 on: September 05, 2013, 09:56:40 pm
PixelPileDriver, those illustrations are very helpful even from a bystander perspective. Never took the time to study animation much, just know from practice. The concept of slow out and slow in never occurred to me. Is there a theory behind what makes it work?

Offline Dusty

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

Re: Help with Sword swing motion blur

Reply #19 on: September 05, 2013, 11:33:33 pm
Is there a theory behind what makes it work?

It's just natural movement, so it looks better. Wave your hand around and you'll notice it moves very similar to the "slow in/slow out" animations. Linear spacing moves at a constant increment, which makes it look very robotic.
« Last Edit: September 05, 2013, 11:35:09 pm by Dusty »

Offline PypeBros

  • 0100
  • ***
  • Posts: 1220
  • Karma: +2/-0
  • Pixel Padawan
    • PypeBros
    • View Profile
    • Bilou Homebrew's Blog.

Re: Help with Sword swing motion blur

Reply #20 on: September 06, 2013, 11:35:04 am
Is there a theory behind what makes it work?
F=ma -- Force = mass * acceleration -- aka Newton's law of inertia.

When you apply a force, you apply an acceleration, not a speed. If you want to put something at speed v, it starts slower and you keep pushing it until you reached desired speed. The heavier the object, the smaller the acceleration will be for an equal force. Since our limbs (and robots motor) have limited ability in the force they can produce, the "slow in/slow out" effect is increased on a hammer vs. a 2-cent coin.

When you stop applying a force (i.e. perfectly compensate for gravity), the object keeps its current velocity and direction.
« Last Edit: September 06, 2013, 12:17:30 pm by PypeBros »