Ever wonder how I made this animation (or any of these)? You'll learn how in this tutorial, including a detailed behind-the-scenes look.
How do you make animations that behave in a realistic way?
Last updated: Apr 12, 2006 (first version)
Level 3 update on Jun 10, 2007 (clarifications and lighting formula updated)
This section covers important things, like vocabulary terms and the formulas I commonly use with art.
1 Glossary
I use special terminology to describe things, some of which are quite straight forward.
Alpha channel - like red, green, and blue, the alpha channel is another channel, most commonly used for transparency in images. It, like red, green, and blue, has a valid intensity of 0 to 255 (255 is fully opaque, 0 is fully transparent and cannot be seen). Glass in a typical clean window has an alpha of about 8.
Anti-aliasing - the effect of smoothing out pixels to give a more natural feel rather than a pixelated look. It is often used to get rid of the stair-step line or at least minimize its appearance. The color to use is determined with the color-averaging formula. This image uses anti-aliasing:
Base plan - a plan for a project in its simplest form. Knowing what your animation will be about in general is it's base plan. The more specific details like positions and the scenery used are not part of the base plan.
Compression - a method to reduce the amount of data needed to store a file. GIF files, whether animated or not, are compressed files, along with PNG and JPG.
Coordinate unit - the coordinate unit is defined by the distance travelled at 1 mph for 1/10 of a second and is also the number of pixels a background scenery object moves per frame (10 fps only) at a scaling of 1. This makes the coordinate unit equal to 11/75 of a foot (1.76 inches or 4.4704 millimeters). This screwy scale allows for very easy calculations of acceleration and motion.
Detailed plan - the final phase of planning before doing the scenery. It involves the precise motion for the animation accurate to a single frame, including the character's movements.
Flash attack - a special ability that causes a sudden flash and a 100 mph boost in any direction, of which is amplified in denser substances like water.
Float run - a special ability common in my mind game where one runs floating 2 or 3 inches above the ground floating. See my mind game report for further details.
Fog - the fading of distant objects to a single color. Distant objects are more heavily fogged out (more closely resembling the fog color) while nearby objects aren't as intensly fogged out (more closely to the object's actual color).
Frame - a single, still image that makes up part of an animated image. Normally, I use 10 frames per second meaning that 10 frames are displayed each second where each still frame is displayed for 0.1 seconds.
GIF - a compressed image file format common on the internet supporting up to 256 colors. GIF files can be static or animated. We'll be making a video-like animated GIF.
GIMP - the GNU image manipulation program. It is an open-source 2D graphics editor that is of commercial quality.
In-progress checking - checking positions while in the process of making the frames to ensure that the final animation will have no problems. It should be done frequently as one mistake 50 frames back means having to redo all 50 previous frames.
Layer - a small image composing a larger image. A stack of layers creates the full image. Layers makes making my type of animations a breeze!
Main plan - the concept for a project in greater detail than a base plan. It is the second phase of planning, after the base plan, is the main plan, setting the positions, making the scenery, and the more precise behavioral details.
Open source - of free software where the code is available to the public for free-will editting. GIMP is open-source software.
Optimize - of GIFs, to alter the image so it looks exactly like the original only having the smallest possible file size. It often involves making unchanged parts of an animation transparent and leave areas that change as is giving the same animation but using less disk space and memory. It can also involve combining colors to form a single global palette rather than for each image. One other difference is that the resulting image is cropped where no change occurred from the previous frame. My animations are very good candidates for an optimized GIF because of the lack of change on many of their frames.
Palette - in computer graphics, it is a set of colors that are used in an image. GIF files support a palette of up to 256 colors, but can be less. High color has a palette of 65,536 colors and true color has a palette of 16,777,216 colors.
Pixel - a colored dot that is the basic unit of computer graphics. A 320x240 image has 76,800 pixels as a total. A computer resolution of 1600x1200 has 1,920,000 pixels.
Resolution - the image size. A higher resolution will allow for more detail, but generally a bigger file size as well. I typically use 320x240, sometimes 160x120 and rarely 640x480. You can use whatever you want.
Scaling - the size and distance of objects in the background. The higher the scaling is, the further away something is and the bigger it is. Mountains typically use high scaling values and houses and cities typically use low scaling values. The distance depends on the resolution and field of view used. The higher the field of view and the higher the resolution, the smaller the distance between a scaling of 1 and 2 there is.
Spreadsheet - a table-like interface that can perform calculations or be used to input text, arranged in columns and rows to form cells. I use spreadsheets to perform the calculations and take notes.
Testing - checking to make sure the animation is processed correctly. An animation that is not processed correctly will need some fixes. This is why in-progress checking is important.
True color - of the 24-bit color palette supporting 16,777,216 colors. You can see all these colors with this 4096x4096 image.
XCF - GIMP's native file format which supports layers, alpha channel, and true color.
2 Commonly used formulas
For fog, lighting, transparent objects, and 3D, I use a collection of formulas. The most common is the color-averaging formula, of which has several variants used.
2.1 Color-averaging formula
Function: Blends two colors by the number of parts used for each. Commonly used for transparent objects, but has three other variants with otherwise the same function.
Verification: 100%
MCOL - mixed color; COLA - first color (normally the foreground); RATA - ratio of first color (parts of this to mix); COLB - second color (normally the background); RATB - ratio of second color (parts of this to mix);
Usage: building the scenery (medium).
To mix 2 parts orange with 3 parts indigo, RATA is 2 and RATB is 3. I traditionally use the A (COLA and RATA) for the background color or original color and the B (COLB and RATB) as the transparent or foreground color but since addition is cumulative, they can be done in any order. This formula is processed three times, one for red, then green, then blue.
2.2 Fog formula
Function: Determines the color to use from an object being in fog.
Verification: 100%
MCOL - mixed color; FC - fog color; DIST - object distance; BC - base color (the color without fog); VIS - visibility (at or past here, use the fog color);
Usage: building the scenery (high).
This formula is processed three times, one for red, then green, then blue.
2.3 Light darkening factor formula
Function: Determines the color to use from lighting based on the angle of the surface and light source.
Verification: 85%
MULT = cos(SOAD)*cos(SOED);
MCOL = COL*(MULT+(AMB*(1-MULT)));
MULT - multiplier value; cos - the cosine function; SOAD - the sun-object azimuth difference (horizonal pan); SOED - the sun-object elevation difference (vertical pan); MCOL - the resulting mixed color; COL - the pixel color at maximum brightness; AMB - the ambient intensity (from 0 to 1, typically 1/3);
MCOL - mixed color; FLC - fully-lit color (the color before it is darkened); ANGD - angle difference (in degrees) from the direct light area to the position (use the largest value);
Usage: building the scenery (medium).
If the light source was perpendicular to the surface, the angle difference would be zero. If the light source was parallel with the surface, the angle difference would be 90 degrees. If the difference is greater than 90 degrees, the multiplier is zero. If at a direct 45-degree angle for both the elevation and azimuth, the object would be half as bright. Ambient is anywhere from 25 to 40% for outdoor scenes lit by the Sun. Indoor scenes are different in that it varies significantly. The formula has two parts. It is split for greater efficiency of processing as the bottom one needs to be used 3 times, one for red, green, then blue.
2.4 Alpha channel result formula
Function: Determines the color on a fully opaque background from a transparent object in front, based on the alpha channel.
Verification: 100%
MCOL - mixed color; BGC - background color (the color behind the transparent color); ALP - alpha (based on the 0 to 255 scale, not the percentage scale); FGC - foreground color (the transparent color);
Usage: building the scenery (rarely).
Note: this formula is only valid when you have a fully opaque color in the background. A different formula is used (likely another variant of the color-averaging formula, of which I currently don't know yet) for determining the color on two transparent objects. This formula is processed three times, one for red, then green, then blue.
2.5 Simplified 3D formula
Function: Determines the size difference based on different distances.
Verification: 100%
IXY - Image X or Y vertex position; XY - 3D coordinate X or Y position; Z - 3D coordinate Z position (depth or distance); IW - image width (in pixels); AF - adjustment factor (use 2 for a 90° field of view);
Usage: Planning - indirectly used (high).
For my animations, this formula is rarely used. The only exception is a variant where, if the distance doubles, the objects are half as high. If tripled, they're 1/3 as high.
2.6 Distance-acceleration formula
Function: Determines how far you travel given a constant acceleration rate.
Verification: 100%
DT - Distance travelled (at 10 fps, if I got 199, I'd travel 199 coordinate units); ESPD - ending speed (speed at end of frame); SSPD - starting speed (speed at start of frame); ACL - acceleration rate;
Usage: Planning (medium).
This formula is actively used when building the spreadsheet. It's simplified further in the spreadsheet. Also, in most cases, I do not need the absolute value indicators (but if removed, replaced with parentheses as the subtraction must be done before the division).
The order to calculate is furthest to closest. Within each step, process transparent objects, lighting, then the fog in that order. For transparent objects, process the lighting and fog for it first. For maximum accuracy, keep the fractional values you get until you get to the last part, the fog.
3.2.3 Animation creation tutorial - how I make my flash-like animated GIFs to the finest detail
3.2.3.1 Introduction - The indroduction and tools needed
3.2.3.1-1 Introduction
3.2.3.1-2 Tools used
3.2.3.2 History - The history of my animation creation
3.2.3.2-1 The AVI days
3.2.3.2-2 MSPaint and early animated GIFs
3.2.3.2-3 GIMP and my latest animations
3.2.3.2-4 Automation leads to extreme complexity
3.2.3.2-5 Discoveries made along the way
3.2.3.2-6 The future
3.2.3.3 Glossary of terms and common formulas - Common animation-related terms and common formulas involved with art
3.2.3.3-1 Glossary
3.2.3.3-2 Commonly used formulas
3.2.3.4 Planning - Forming the plan - what the animation will do and how to set up the spreadsheet
3.2.3.4-1 The base plan
3.2.3.4-2 The main plan
3.2.3.4-3 The detailed plan
3.2.3.5 Creating the scenery - Making the scenery - how to optimize it and work with it
3.2.3.5-1 Some important notes
3.2.3.5-2 The easy stuff
3.2.3.5-3 The mountains
3.2.3.5-4 Making the character
3.2.3.5-5 Adding the obstacle and speed data
3.2.3.6 Animating - Processing the frames - using the spreadsheet data to make the frames of the animation
3.2.3.6-1 Important notes
3.2.3.6-2 Doing the text objects
3.2.3.6-3 The first scenery frames
3.2.3.6-4 Further scenery frames
3.2.3.7 Testing - Testing the animation - how to test the animation to spot problems
3.2.3.7-1 Compiling the animation
3.2.3.7-2 Testing the animation
3.2.3.8 Tips and tricks - Tips, tricks, and shortcuts to make animation-creation easier and faster
3.2.3.9 FAQ - Some commonly asked questions and help to common problems
Footnotes:
None.
