View source for How to create motion blurs

How to create motion blurs - aka the "swooshes" that trail after a fast-moving weapon

'''Theory:'''

All animation works by showing a series of still images, and fooling the human brain into thinking they're a moving object.  This mostly works because our eyes don't see changes immediately; it actually takes a fraction of a second for the chemicals in them to 'react' to being exposed to light (which works a lot like developing film, except on a scale of milliseconds, rather than minutes).  If the images are changed more quickly than the eyes can react, the changes look like a single object moving, instead of multiple pictures being flashed before the eyes.

One pitfall in animation is that if an object moves too much between frames, this illusion breaks down.  The fast-moving element suddenly 'teleports' to it's new position, rather than feeling like it actually moved through the intervening space.  The reason for this, and the solution to this is because our eyes work like photo cameras capturing an object.  An object which moves more quickly than we can resolve a clear image will result in a blurred smear of motion in our field of vision.

And that's exactly the solution.  When a part of an object would move a large distance in the time taken by one animation frame, you should stretch the object out to fill that entire space.  '''Yes, this means that when animating objects in motion, you should bend the rules of size and proportion you strictly apply to still objects.'''  For a single frame, a swinging sword can take the shape of a wide, flat 'fan'.  A lunging body can be twice its regular thickness.  A body landing after a jump can squash to half its height.  Embrace the idea of deforming things in the direction that they're moving, and your animation will look very fluid.  If you don't embrace this, and keep all proportions in exactly the same strict form they're in when the object is at rest, you will at best end up with an animation that resembles old "stop motion" animation.  It's not a terrible fate, your animation will look perfectly 'respectable', but it'll also look very stiff and stilted.


'''Practice:'''

In wesnoth, we most commonly use this trick on weapons being swung through the air.

The first step to drawing this is correctly visualizing the path that the weapon will take through the air.  Remember, although you're looking at a 3d object, you're drawing a 2d shape.  You mind will probably "feel" like the path is a circle,  but when you're drawing it on a 2d canvas, only a tiny fraction of the time, from a very unusual viewpoint, will the path actually be a circle;  the vast majority of the time, you'll be looking at an ellipse.  You need to pick this correctly, because nothing will goof up a motion blur more than having an incorrect path.  Unfortunately, this has mostly to do with intuition;  although you could get really creative with some fancy math to model the swing of a weapon, the best bet is to draw from life.  One really helpful trick, though, is to take some video footage of a model performing the action (this could be either an actual art model, or an actor in a movie - all that matters is that the camera doesn't move), and carefully step through each frame of the animation and watch how the weapon moves through the air.  Stepping slowly through video footage is actually a great way to see a lot of subtle and/or unintuitive things which are worth animating, but which generally escape the eyes when viewed at normal speed.

To draw that path of the weapon in wesnoth, you fill that arc which the weapon would swing in with the color of the swinging weapon (generally the brighter colors of it).  We usually make it slightly transparent (around 30% transparent or 70% opaque), but in practice it tends not to make much difference if the swing is slightly transparent or not.



Here's an in-game example; this is the middle of the naga warrior's sword attack.  Note how the blade immediately snaps to the end of its swing-arc in just one frame; this rapid movement gives the animation a feeling of power.  Notice also the subtle trick of having a collapsing remnant of the motion blur on one frame after the initial swing; this helps portray the deceleration of the weapon (and also conveys the direction that the motion-blur was collapsing towards), and makes the animation much smoother:

http://www.wesnoth.org/wiki-images/tutorial/motion-blur/naga-motion-blur.png


==See Also==
*[[Basic Animation Tutorial]]
*[[Art Tutorials]]
*[[Create Art]]

[[Category: Art Tutorials]]