GR#136 - Knight Swordswing - Animation

[PypeBros]

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.

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.

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.)

[Pix3M]

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.

[PixelPiledriver]

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.

[jahasaja]

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.

- 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

  - 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.

[r1k]

maybe you can try a blur effect like this:

http://www.ransen.com/repligator/Images/Motion-Blur-BlueCar.jpg

I just remembered the type of blur I was describing in my first post is called animation smears.  Theyre used alot in cartoons, but are kind of different:

https://www.google.com/search?gs_rn=26&gs_ri=psy-ab&cp=13&gs_id=4h&xhr=t&q=animation+smears&bav=on.2,or.r_qf.&bvm=bv.51773540,d.cGE&biw=1024&bih=640&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi&ei=4iEoUp68D4fJiQKc94HgBg#hl=en&q=animation+smears&tbm=isch&um=1

[PixelPiledriver]

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.

[jahasaja]

Wow thanks that was awesome!

[Dusty]

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.

[Corinthian Baby]

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?

[Dusty]

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.