Difference between revisions of "From Base Frame To Full Animation"

From The Battle for Wesnoth Wiki
(Formatting, clarifications, rewording, & typo fixes)
 
(25 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
by Stern
 
by Stern
  
'''Introduction'''  
+
'''Note''': it is strongly recommended that you read the [[Basic Animation Tutorial]] before reading this page.
  
A solid method of moving baseframes forward towards full animation and a compilation of quick and easy tricks to help bring the animator's creations to life.
 
  
Learn how to take a standing base frame: http://img15.imageshack.us/img15/1500/ghast.png
+
==Introduction==
  
To full animation:                      http://img808.imageshack.us/img808/2486/ghastattack7.gif
+
A solid method of moving base frames forward towards full animation and a compilation of quick and easy tricks to help bring the animator's creations to life.
  
'''Kinematics'''
+
Learn how to take a standing base frame: http://img88.imageshack.us/img88/4724/goblintrumpeter2.png
  
Your character is comprised of a "network" of many parts which are all hooked together as is described in Jetrel's Basic Animation Tutorial: http://wiki.wesnoth.org/Basic_Animation_Tutorial. Therefore, When your character swings a sword, the entire rest of the character must move in response. The magic of animation is "capturing" how your character moves and reacts through a series of frames.
+
To full animation: http://img510.imageshack.us/img510/3489/goblintrumpeter24.gif
  
'''The Network'''
+
The magic of animation is "capturing" how your character moves and reacts through a series of frames. To animate well, we must learn about a concept called...
  
It can be quite daunting to figure out where to start animating if the position of any one part of the character is dependent with respect to all of the others parts. Therefore it is valuable to understand the linkages throughout the anatomy of your character. For example, here is the baseframe of my Goblin Trumpeter and an edited version. 
+
==The Network==
  
http://img88.imageshack.us/img88/4724/goblintrumpeter2.png
+
One of the most important concepts of animation is that of the "network." Your character is comprised of a "network" of many parts which are all hooked together. In theory, when your character swings a sword, the entire rest of the character must move in response. Why? Well, for a variety of reasonsbut principally to keep the character balanced, and/or  to maintain/increase the force behind the movement.
  
http://img23.imageshack.us/img23/3458/goblintrumpeterjoints.png
+
====Example====
  
The character's core is colored green, the joints are outlined in red, and the "bones" are highlighted in blue.
+
To illustrate a "network" in a character, below is a base frame of my Goblin Trumpeter and an edited version.
  
The position of each of the Goblin Trumpeter's joints is dependent upon the core of the character. By animating the core and head of the character first in your frames, it is easy to imagine where the feet and knee joints would have to be in order to support the character throughout its motion. As the Goblin Trumpeter's core moves, each of his arms and legs have to move with it because they are all attached at the joints.  
+
http://img88.imageshack.us/img88/4724/goblintrumpeter2.png http://img23.imageshack.us/img23/3458/goblintrumpeterjoints.png
  
'''For this tutorial, you will need:'''
+
* Green: Core
 +
* Blue: Bones
 +
* Red: Joints
  
A base frame of the unit -> (http://wiki.wesnoth.org/Creating_a_scratch_built_sprite)
+
It is valuable to understand the linkages within the anatomy of your character. The position of each of the Goblin Trumpeter's joints are dependent upon the character's core. By animating the core and head of the Goblin Trumpeter first, it was simple to imagine where the feet and knee joints would be placed to support him throughout his attack. Also, determining the swing of the Goblin Trumpeter's spear early on simplified the placing of his elbows and hands. In conclusion, by utilizing the "network" concept we can bring our creations to life.
  
A graphics editing program -> http://www.gimp.org/
+
==Animation Methodology==
  
 +
'''To make an animated character, you will need:'''
  
'''Lets get started'''
+
A base frame of the character -> [[Creating a scratch built sprite]]
  
When I begin to animate a character, I first divide the subject's moving parts into easy to distinguish colors. Here, I have modified Zerovirus's base frame of the Ghast into a mess of colors based on the monster's different limbs.
+
A graphics editing program -> [[Art Programs]]
  
http://img15.imageshack.us/img15/1500/ghast.png http://img440.imageshack.us/img440/4742/ghast1.png
+
===Blocking===
  
This part of the animation is called "Blocking." It allows you to quickly animate and perfect the full movement of your character without having to constantly re-adjust every little detail.  
+
Some artists try to create their animation by outlining and then fully shading each frame one at a time. Generally speaking, this is a very bad idea. You may realize when you have completed your fifth frame that the animation that the movement of the character is too jerky in places, or that the character ends up facing in an incorrect angle for him to be able to actually hit whatever he's attacking, etc. "Blocking" is a method of pre-animation which allows you to quickly visualize the entire animation from start to finish with minimal effort. By dividing the character's moving parts into distinguishable areas of solid colors, you can simulate and adjust the full movement of your character without spending time re-doing tiny details or having to re-shade large areas. For example, I have modified the Goblin Trumpeter's base frame into solid, distinguishable colors based on the character's different limbs.
  
 +
http://img88.imageshack.us/img88/4724/goblintrumpeter2.png http://img716.imageshack.us/img716/8687/goblintrumpeter.png
  
 +
===Animation Script===
  
 +
Just like any good blockbuster movie, your character should have a written script or description of what it will be doing throughout its frames. By writing a brief description of what you want the character to do in each of his frames, you create a logical series of actions for a convincing animation.
 +
Another helpful tip is to draw a rough draft of the animation with stick figures to show how you want your character to move. By drawing stick figures ahead of time, you are actually "mapping" out the "network" of your character in preparation for animation.
  
'''Animation Script'''
+
http://img72.imageshack.us/img72/3948/animationtutorial2.png
  
Just like any good blockbuster movie, your character should have a written script or description of what it will be doing throughout its frames. I usually write a brief description of what I want to portray throughout a character's 6-7 frame attack animation. In addition, I also doodle stick figures on scratch paper to illustrate what I want my character to portray throughout the animation.
+
====Example====
 
+
A script for my Goblin Trumpeter's attack animation and corresponding blocking frames.
For example, heres a script for my Goblin Trumpeter's attack animation and corresponding blocking frames.
 
  
 
http://img716.imageshack.us/img716/8687/goblintrumpeter.png
 
http://img716.imageshack.us/img716/8687/goblintrumpeter.png
  
Base Frame: Character is at rest.
+
'''Base Frame:''' Character is at rest.
  
 
http://img51.imageshack.us/img51/4969/goblintrumpeter1.png
 
http://img51.imageshack.us/img51/4969/goblintrumpeter1.png
  
Frame 1: Character is charging up for the attack, Begins to raise spear and begins shifting bodyweight backwards.
+
'''Frame 1:''' Character is charging up for the attack, Begins to raise spear and begins shifting bodyweight backwards.
  
 
http://img526.imageshack.us/img526/4724/goblintrumpeter2.png
 
http://img526.imageshack.us/img526/4724/goblintrumpeter2.png
  
Frame 2: Character is fully charged up for the attack. Bodyweight is fully shifted back and spear is fully raised.
+
'''Frame 2:''' Character is fully charged up for the attack. Bodyweight is fully shifted back and spear is fully raised.
  
 
http://img573.imageshack.us/img573/3017/goblintrumpeter3.png
 
http://img573.imageshack.us/img573/3017/goblintrumpeter3.png
  
Frame 3: Character initiates attack. Lowers spear while bringing body weight forward.
+
'''Frame 3:''' Character initiates attack. Lowers spear while bringing body weight forward.
  
 
http://img585.imageshack.us/img585/6604/goblintrumpeter4.png
 
http://img585.imageshack.us/img585/6604/goblintrumpeter4.png
  
Frame 4: Character is in full swing. Spear impacts target.
+
'''Frame 4:''' Character is in full swing. Spear impacts target.
  
 
http://img824.imageshack.us/img824/5089/goblintrumpeter5.png
 
http://img824.imageshack.us/img824/5089/goblintrumpeter5.png
  
Frame 5: Character follows through, Weapon reaches full extention. Ends in a "lunge" stance.
+
'''Frame 5:''' Character follows through, Weapon reaches full extention. Ends in a "lunge" stance.
  
 
http://img24.imageshack.us/img24/5775/goblintrumpeter6.png
 
http://img24.imageshack.us/img24/5775/goblintrumpeter6.png
  
Frame 6: Character pauses to regain balance. Withdraws spear.
+
'''Frame 6:''' Character pauses to regain balance. Withdraws spear.
  
 
http://img823.imageshack.us/img823/3536/goblintrumpeter7.png
 
http://img823.imageshack.us/img823/3536/goblintrumpeter7.png
  
Frame 7: Character regains balance and steps back to rest position.
+
'''Frame 7:''' Character regains balance and steps back to rest position.
 +
 
 +
By using the stick figure drawings and following the written script, I created the finished blocking animation of the Goblin Trumpeter. Through the iterative process of moving the character's core and all of the corresponding joints frame by frame, little by little, you will soon have the blocking for a full animation.  
  
 
http://img696.imageshack.us/img696/3996/goblintrumpeter11.gif
 
http://img696.imageshack.us/img696/3996/goblintrumpeter11.gif
  
By using the stick figure drawings and following the written script, I created the finished blocking animation of the Goblin Trumpeter. Through the iterative process of moving the character's core and all of the corresponding joints frame by frame, little by little, you will soon have the blocking for a full animation.
+
===Fine Tuning===
  
'''Fine Tuning'''
+
It's nigh on impossible to make a perfect blocking animation on the first try. That is why it is important to continually observe the effects that your changes have upon the entire animation as a whole. To finely tune your blocking animation, it is a good idea to be on the look out for the animation issues discussed in Jetrel's [[Basic Animation Tutorial]].
 
 
To finely tune the blocking animation, continually observe the effects that your changes have upon the entire blocking animation. It is a good idea to be on the look out for the animation issues discussed in Jetryl's Basic Animation Tutorial: http://wiki.wesnoth.org/Basic_Animation_Tutorial.
 
  
 
* Moving only the active element
 
* Moving only the active element
Line 93: Line 98:
 
* Hidden and turned surfaces not redrawn
 
* Hidden and turned surfaces not redrawn
  
For feedback from the Wesnoth Community it is valuable to discuss the development of your animation via the Wesnoth Art Workshop: http://forums.wesnoth.org/viewforum.php?f=23&sid=a976661f1c0a02092e50c643980d7eb0.
+
Another great resource is to discuss your animation on the Wesnoth Community [http://forums.wesnoth.org/viewforum.php?f=23&sid=a976661f1c0a02092e50c643980d7eb0 Art Workshop forum].
 
 
'''Character Coloring'''
 
 
 
If you are happy with how the movement of your character is throughout your "blocking" animation, it is time to finish by coloring your character.
 
 
 
http://img510.imageshack.us/img510/3489/goblintrumpeter24.gif
 
 
 
My preferred method of coloring a character is to trace an outline around each of the character's moving parts frame by frame while applying an appropiate base color. Here is an example with a blocking frame from the Ghast's walking animation.
 
 
 
http://img510.imageshack.us/img510/5412/ghastwalk11blocking.png http://img46.imageshack.us/img46/5516/ghastse11.png
 
 
 
Once this process has been completed for all of your blocking frames, your character will start coming to life.
 
 
 
http://img220.imageshack.us/img220/606/ghastanim27.gif http://img225.imageshack.us/img225/415/ghastanim28.gif
 
 
 
'''Applying complex textures and shading '''
 
  
This section is still in development.
+
== See Also ==
  
'''Credits'''
+
* [[Basic Animation Tutorial]]
 +
* [[Art Tutorials]]
 +
* [[Create Art]]
 +
* [[Create]]
  
Zerovirus for Ghast baseframe: http://img15.imageshack.us/img15/1500/ghast.png
+
[[Category: Art Tutorials]]

Latest revision as of 19:22, 30 January 2012

by Stern

Note: it is strongly recommended that you read the Basic Animation Tutorial before reading this page.


Introduction

A solid method of moving base frames forward towards full animation and a compilation of quick and easy tricks to help bring the animator's creations to life.

Learn how to take a standing base frame: goblintrumpeter2.png

To full animation: goblintrumpeter24.gif

The magic of animation is "capturing" how your character moves and reacts through a series of frames. To animate well, we must learn about a concept called...

The Network

One of the most important concepts of animation is that of the "network." Your character is comprised of a "network" of many parts which are all hooked together. In theory, when your character swings a sword, the entire rest of the character must move in response. Why? Well, for a variety of reasonsbut principally to keep the character balanced, and/or to maintain/increase the force behind the movement.

Example

To illustrate a "network" in a character, below is a base frame of my Goblin Trumpeter and an edited version.

goblintrumpeter2.png goblintrumpeterjoints.png

  • Green: Core
  • Blue: Bones
  • Red: Joints

It is valuable to understand the linkages within the anatomy of your character. The position of each of the Goblin Trumpeter's joints are dependent upon the character's core. By animating the core and head of the Goblin Trumpeter first, it was simple to imagine where the feet and knee joints would be placed to support him throughout his attack. Also, determining the swing of the Goblin Trumpeter's spear early on simplified the placing of his elbows and hands. In conclusion, by utilizing the "network" concept we can bring our creations to life.

Animation Methodology

To make an animated character, you will need:

A base frame of the character -> Creating a scratch built sprite

A graphics editing program -> Art Programs

Blocking

Some artists try to create their animation by outlining and then fully shading each frame one at a time. Generally speaking, this is a very bad idea. You may realize when you have completed your fifth frame that the animation that the movement of the character is too jerky in places, or that the character ends up facing in an incorrect angle for him to be able to actually hit whatever he's attacking, etc. "Blocking" is a method of pre-animation which allows you to quickly visualize the entire animation from start to finish with minimal effort. By dividing the character's moving parts into distinguishable areas of solid colors, you can simulate and adjust the full movement of your character without spending time re-doing tiny details or having to re-shade large areas. For example, I have modified the Goblin Trumpeter's base frame into solid, distinguishable colors based on the character's different limbs.

goblintrumpeter2.png goblintrumpeter.png

Animation Script

Just like any good blockbuster movie, your character should have a written script or description of what it will be doing throughout its frames. By writing a brief description of what you want the character to do in each of his frames, you create a logical series of actions for a convincing animation. Another helpful tip is to draw a rough draft of the animation with stick figures to show how you want your character to move. By drawing stick figures ahead of time, you are actually "mapping" out the "network" of your character in preparation for animation.

animationtutorial2.png

Example

A script for my Goblin Trumpeter's attack animation and corresponding blocking frames.

goblintrumpeter.png

Base Frame: Character is at rest.

goblintrumpeter1.png

Frame 1: Character is charging up for the attack, Begins to raise spear and begins shifting bodyweight backwards.

goblintrumpeter2.png

Frame 2: Character is fully charged up for the attack. Bodyweight is fully shifted back and spear is fully raised.

goblintrumpeter3.png

Frame 3: Character initiates attack. Lowers spear while bringing body weight forward.

goblintrumpeter4.png

Frame 4: Character is in full swing. Spear impacts target.

goblintrumpeter5.png

Frame 5: Character follows through, Weapon reaches full extention. Ends in a "lunge" stance.

goblintrumpeter6.png

Frame 6: Character pauses to regain balance. Withdraws spear.

goblintrumpeter7.png

Frame 7: Character regains balance and steps back to rest position.

By using the stick figure drawings and following the written script, I created the finished blocking animation of the Goblin Trumpeter. Through the iterative process of moving the character's core and all of the corresponding joints frame by frame, little by little, you will soon have the blocking for a full animation.

goblintrumpeter11.gif

Fine Tuning

It's nigh on impossible to make a perfect blocking animation on the first try. That is why it is important to continually observe the effects that your changes have upon the entire animation as a whole. To finely tune your blocking animation, it is a good idea to be on the look out for the animation issues discussed in Jetrel's Basic Animation Tutorial.

  • Moving only the active element
  • Misaligned frames
  • Hidden and turned surfaces not redrawn

Another great resource is to discuss your animation on the Wesnoth Community Art Workshop forum.

See Also

This page was last edited on 30 January 2012, at 19:22.