Basic Animation Tutorial - Revision history

Jetryl at 06:18, 6 September 2012

2012-09-06T06:18:53Z

Show changes

Artisticdude: Added link to From Base Frame To Full Animation page in the "See Also" section

2012-01-30T19:21:56Z

Added link to From Base Frame To Full Animation page in the "See Also" section

Shadowm: Formatting, spelling

2012-01-04T20:13:17Z

Formatting, spelling

Show changes

Artisticdude: Changed the spelling of Jetrel's name from 'Jetryl' (older version) to 'Jetrel' (current version)

2011-12-13T23:50:08Z

Changed the spelling of Jetrel's name from 'Jetryl' (older version) to 'Jetrel' (current version)

Jetryl: Reworded some stuff for clarity.

2009-05-09T20:10:30Z

Reworded some stuff for clarity.

Jetryl: New image references, and edits to the tutorial.

2009-05-06T10:33:58Z

New image references, and edits to the tutorial.

Show changes

Jetryl: /* Moving only the active element */

2007-10-30T03:01:34Z

‎Moving only the active element

GrabberBot: automated change of forum links take 2

2006-01-21T17:39:53Z

automated change of forum links take 2

Allefant: Reverted edit of GrabberBot, changed back to last version by Jetryl

2006-01-21T16:50:12Z

Reverted edit of GrabberBot, changed back to last version by Jetryl

Show changes

GrabberBot: automated change of forum links

2006-01-21T16:27:26Z

automated change of forum links

Show changes

@@ Line 28: / Line 28: @@
 * '''Wrong:''' http://www.wesnoth.org/wiki-images/tutorial/basic-animation/asheviere-no-kinematics.gif
 * '''Right:''' http://www.wesnoth.org/wiki-images/tutorial/basic-animation/myrmidon-good-kinematics.gif
@@ Line 75: / Line 76: @@
 == See Also ==
 * [[Art Tutorials]]
 * [[Create Art]]

← Older revision		Revision as of 23:50, 13 December 2011
Line 1:		Line 1:
−	by ~~Jetryl~~	+	by Jetrel

	''' Introduction '''		''' Introduction '''

@@ Line 34: / Line 34: @@
 * '''Hidden surfaces must be redrawn'''
-When an object turns, in an animation, and shows a side that wasn't visble before, it ''must'' be drawn from scratch.  If a man has his back to you, and turns around, his now-visible face will look a whole heck of a lot different from the back of his head, which was visible before.  It's obvious that things look different when they're turned around, but, this is a really common mistake, because people are afraid of having to draw parts from scratch.  It's really hard, and people like to think that there's some shortcut they can use to get away with not actually having to draw something from scratch.  (For a lot of beginners, including myself back in the day, the idea of having to redraw things from scratch seemed impossible.)  However, this is something you'll have to get used to and overcome.  The bright side of this, though, is that redrawing the few newly visible parts is a great source of practice, and is much easier than drawing a whole sprite from scratch; it's a good way to build up to being able to create entirely new sprites from scratch.
+When an object turns, in an animation, and shows a side that wasn't visble before, it ''must'' be drawn from scratch.  If a man has his back to you, and turns around, his now-visible face will look a whole heck of a lot different from the back of his head, which was visible before.  It's obvious that things look different when they're turned around, but this is a really common mistake, because people are afraid of having to draw parts from scratch.  It's really hard, and people like to think that there's some shortcut they can use to get away with not actually having to draw something from scratch.  (For a lot of beginners, including myself back in the day, the idea of having to redraw things from scratch seemed impossible.)  However, this is something you'll have to get used to and overcome.  The bright side of this, though, is that redrawing the few newly visible parts is a great source of practice, and is much easier than drawing a whole sprite from scratch; it's a good way to build up to being able to create entirely new sprites from scratch.
 A common shortcut, which is selecting body parts in your graphics program, and sliding/moving them around (referred to as "Select and Slide") can only be used for the tiniest motions, or motions in which there is NO rotation.  As soon as you're rotating a sprite around the y-axis, things need to be redrawn.
@@ Line 54: / Line 54: @@
 Traditional animation studios discovered several rules of thumb to liven up a strict representation of movement - that is, techniques that are probably correct to use even if you're not "drawing from life" and witnessing them firsthand.  These were especially powerful in the first days of animation, because the drawings made were so simple, and left out a lot of the detail of the natural world - these are some of the first details to put back in.  All of these are based vaguely on movement in the real world.  If you exaggerate these too much, which you can certainly get away with, it will result in the animation looking cartoony, which is not necessarily a bad thing.  These were developed in the first days of animation - in fact, fellows like Walt Disney pioneered them.
-* '''Wind-Up/Anticipation''' - When human beings prepare for a big move, such as swinging a baseball bat, or sword, they tend to give themselves some space to gain momentum.  When a pitcher winds up for a throw, he curls back so that the ball will spend more time in his hand, thus spending more time accelerating, and thus have a higher speed.  For wesnoth images, this is a great technique to use on big swords and clubs.  If a man is going to throw a punch, he reels back with the arm that is preparing to deliver it.  If a cobra is going to strike, it first rears back its head.  Think of what "Popeye the Sailor Man" does when he's about to clobber someone, and you'll have good example of the "cartoony" range of things.
+* '''Wind-Up/Anticipation''' - When human beings prepare for a big move, such as swinging a baseball bat, or sword, they tend to give themselves some space to gain momentum.  When a pitcher winds up for a throw, he curls back so that the ball will spend more time in his hand, thus spending more time accelerating, and thus have a higher speed.  For wesnoth images, this is a great technique to use on big swords and clubs.  If a man is going to throw a punch, he reels back with the arm that is preparing to deliver it.  If a cobra is going to strike, it first rears back its head.  Think of what "Popeye the Sailor Man" does when he's about to clobber someone, and you have a perfect (albeit slightly exaggerated) example of this.  Keep in mind though that you don't need to be afraid of over-exaggeration;  we are hurt much more by under-exaggerating a motion, than we are by over-exaggeration, so always err on the side of over-exaggerating things like windups.
 * '''Inertia and Air Resistance''' - Different things are affected by physics in different ways.  When a person makes a motion, certain muscles drive the motion, and the rest of the body is pulled by this force acting on it.  The most important thing is that different parts of the body will move at different speeds - this is related to my mantra of ''"move the whole body"'' - if you do it, things will look a ''lot'' more realistic.
-* '''Non-rigid Objects''' - Most objects in the real world flex in extraordinary ways when they move, ways that you would never guess, but which are clearly percieved by the "subconcious," and thus look right when animated.  For a stunning example, if you look at a slow-motion recording of baseball being hit by a bat, the baseball gets flattened like a pancake!  This happens only for the tiniest moment, after which it oscillates back and forth (like a spring) returning to it's normal shape.  In wesnoth animation, using such a thing only for a single frame can make for a much livelier animation.
+* '''Non-rigid Objects''' - Most objects in the real world flex in extraordinary ways when they move.  You don't consciously notice these, and you'd normally never guess that they took place, but they look right when animated because you do subconsciously see them in the real world.  For a dramatic example, if you look at a slow-motion recording of baseball being hit by a bat, the baseball gets flattened like a pancake!  This happens only for the tiniest moment, after which it oscillates back and forth (like a spring) returning to it's normal shape.  In wesnoth animation, using such a thing only for a single frame can make for a much livelier animation.  Consider our thief's idle animation, and how the tossed money bag deforms as it lands in the hand.
 * '''Follow Through''' - often taught to beginning boxers, a strike given with enough force to damage will often be targeted not at the surface of the opponent, but deep inside and even behind him.  This is also related to many situations in which the person performing an action doesn't care where the moving object stops - a baseball player is not concerned with where the bat stops in his swing, rather he just wants to hit the ball as hard as he can, which is why the bat will often swing a full half-circle beyond home plate.  In animating wesnoth images, this is why it looks better if really strong sword strokes go ''clean through'' the point where the opponent is standing.  As an example, this is why the Elvish Hero's attack looks stronger than that of the Elvish Fighter.

@@ Line 25: / Line 25: @@
 In order to understand how something is supposed to move, you may need to look in the mirror, or look at a movie.  There are many examples of good, medieval action films - titles such as Braveheart, or Lord of the Rings come to mind.  Watch one of those movies, find a point where a character swings a sword, and watch what happens to the rest of the body.  It's not subtle at all.
 * Wrong: http://exong.net/wesnoth-attach/files/dark_queen_577.gif
-* Right: http://exong.net/wesnoth-attach/files/orc_grunt-westattack0_213.gif (ignore the dithering (dots))
+* Right: http://exong.net/wesnoth-attach/files/orc_grunt_eastattack_263.gif
 ===Hidden surfaces must be redrawn===

@@ Line 24: / Line 24: @@
 In order to understand how something is supposed to move, you may need to look in the mirror, or look at a movie.  There are many examples of good, medieval action films - titles such as Braveheart, or Lord of the Rings come to mind.  Watch one of those movies, find a point where a character swings a sword, and watch what happens to the rest of the body.  It's not subtle at all.
-* Wrong: http://www.wesnoth.org/forum/files/dark_queen_577.gif
+* Wrong: http://exong.net/wesnoth-attach/files/dark_queen_577.gif
-* Right: http://www.wesnoth.org/forum/files/orc_grunt-westattack0_213.gif (ignore the dithering (dots))
+* Right: http://exong.net/wesnoth-attach/files/orc_grunt-westattack0_213.gif (ignore the dithering (dots))
 ===Hidden surfaces must be redrawn===
@@ Line 32: / Line 32: @@
 ===Turned surfaces must be redrawn===
 After about a 30-45 degree turn of any part of a sprite, the surface of that part has to be redrawn to account for the rotation.  If a man is facing you, and turns sideways, his appearance will change considerably - for one thing, there will only be one eye visible where there were two visible before.  Like I said above, '''DO NOT CUT AND PASTE'''.  It simply will _ not look right.
-* Wrong: http://www.wesnoth.org/forum/files/elvish-rider-die_272.gif
+* Wrong: http://exong.net/wesnoth-attach/files/elvish-rider-die_272.gif
 ===Misaligned Frames===
 Each image in a series must line up correctly with the image before it.  If they don't, the image shakes around inside the animation.
-* Wrong: http://www.wesnoth.org/forum/files/elfherb_170.gif
+* Wrong: http://exong.net/wesnoth-attach/files/elfherb_170.gif
 == Exaggeration techniques: ==
@@ Line 57: / Line 57: @@
 <table>
 <tr><td>
-http://www.wesnoth.org/forum/files/orc-grunt-westbase_146.png
+http://exong.net/wesnoth-attach/files/orc-grunt-westbase_146.png
 </td><td>
 The base frame for an Orcish Grunt
 </td></tr>
 <tr><td>
-http://www.wesnoth.org/forum/files/orc_grunt-westattack_f1_203.png
+http://exong.net/wesnoth-attach/files/orc_grunt-westattack_f1_203.png
 </td><td>
 Wind up - note the exaggerated pullback
 </td></tr>
 <tr><td>
-http://www.wesnoth.org/forum/files/orc_grunt-westattack_f3_123.png
+http://exong.net/wesnoth-attach/files/orc_grunt-westattack_f3_123.png
 </td><td>
 Strike - note the whole body has moved, and most (but not all) of it has had to be redrawn.