How To Create Motion Blurs - Revision history

Artisticdude: Specified that motion blurs should be fully opaque & drawn with the 2 brightest colors in the weapon palette (or 3 brightest in some rare cases)

2012-01-30T21:12:25Z

Specified that motion blurs should be fully opaque & drawn with the 2 brightest colors in the weapon palette (or 3 brightest in some rare cases)

Jetryl at 19:24, 6 May 2009

2009-05-06T19:24:11Z

Jetryl: Major Rewrite

2009-05-06T19:22:23Z

Major Rewrite

Thrawn at 18:41, 21 January 2008

2008-01-21T18:41:03Z

Thrawn: /* See Also */

2008-01-21T18:39:46Z

‎See Also

Thrawn at 18:39, 21 January 2008

2008-01-21T18:39:07Z

Jetryl at 22:32, 7 January 2006

2006-01-07T22:32:38Z

New page

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

Here, weapons can be divided into two different categories, those being slashing weapons (maces included), and thrusting weapons, like spears.

There are two things you need to do - first, you need to visualize correctly the way that the weapon will move through the air. This needs to get "collapsed" into a two-dimensional drawing of it's path. Nothing will goof up a motion blur more than having an incorrect path, and unfortunately, I can't really help with this, my best advice is really to just watch either a friend swinging a mock weapon (or oneself in a mirror), or a movie wherein the characters look competent in the use of their weaponry.

The second thing is how you draw that path, and this I can teach. In earlier versions of wesnoth, and in a number of our existing unit animations, the motion blur would be a shape filled with a solid color, set to high transparency.

There's a better way to do this, which is to use the smudge tool in either photoshop or the gimp. Create a new layer to put the motion blur in, and set the smudge tool to sample it's values from all layers. Set it to a very small pixel width (about 1 pixel), and carefully touch down with it in the brightest color of the weapon. Drag this out in an arc, following the movement path of the weapon. These trails should be longer at points where the weapon is moving faster, and should be thicker where the weapon is thickest - the thin tips of most swords do not have the most opaque blur.

I'll add images to this tutorial as soon as I create another motion blur for a weapon.

@@ Line 16: / Line 16: @@
 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.
+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 two brightest colors in your palette are all you need, although in some rare cases the third brightest may also be necessary). The motion blur should not be transparent at all; it should be 100% opaque (solid).
@@ Line 27: / Line 27: @@
 ==See Also==
 *[[Basic Animation Tutorial]]
 *[[Art Tutorials]]
 *[[Create Art]]
 [[Category: Art Tutorials]]

← Older revision		Revision as of 19:24, 6 May 2009
Line 20:		Line 20:


−	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 ~~extending~~ the motion blur to one frame after the initial swing; this helps portray the deceleration of the weapon, and makes the animation much smoother:	+	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		http://www.wesnoth.org/wiki-images/tutorial/motion-blur/naga-motion-blur.png

@@ Line 1: / Line 1: @@
 How to create motion blurs - aka the "swooshes" that trail after a fast-moving weapon
-Here, weapons can be divided into two different categories, those being slashing weapons (maces included), and thrusting weapons, like spears.
+'''Theory:'''
-There are two things you need to do - first, you need to visualize correctly the way that the weapon will move through the air.  This needs to get "collapsed" into a two-dimensional drawing of it's path.  Nothing will goof up a motion blur more than having an incorrect path, and unfortunately, I can't really help with this, my best advice is really to just watch either a friend swinging a mock weapon (or oneself in a mirror), or a movie wherein the characters look competent in the use of their weaponry.
+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.
-The second thing is how you draw that path, and this I can teach.  In earlier versions of wesnoth, and in a number of our existing unit animations, the motion blur would be a shape filled with a solid color, set to high transparency.
+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.
-There's a better way to do this, which is to use the smudge tool in either photoshop or the gimp.  Create a new layer to put the motion blur in, and set the smudge tool to sample it's values from all layers.  Set it to a very small pixel width (about 1 pixel), and carefully touch down with it in the brightest color of the weapon.  Drag this out in an arc, following the movement path of the weapon.  These trails should be longer at points where the weapon is moving faster, and should be thicker where the weapon is thickest - the thin tips of most swords do not have the most opaque blur.
+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.
-I'll add images to this tutorial as soon as I create another motion blur for a weapon.
+'''Practice:'''
 ==See Also==

← Older revision		Revision as of 18:41, 21 January 2008
Line 16:		Line 16:
	*[[Art Tutorials]]		*[[Art Tutorials]]
	*[[Create Art]]		*[[Create Art]]
		+
		+	[[Category: Art Tutorials]]

@@ Line 13: / Line 13: @@
 ==See Also==
-[[Basic Animation Tutorial]]
+*[[Basic Animation Tutorial]]
-[[Art Tutorials]]
+*[[Art Tutorials]]
-[[Create Art]]
+*[[Create Art]]

← Older revision		Revision as of 18:39, 21 January 2008
Line 11:		Line 11:

	I'll add images to this tutorial as soon as I create another motion blur for a weapon.		I'll add images to this tutorial as soon as I create another motion blur for a weapon.
		+
		+	==See Also==
		+	[[Basic Animation Tutorial]]
		+	[[Art Tutorials]]
		+	[[Create Art]]