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 7 update on Jun 10, 2007 (Several things changed here and there, mainly added details or replacing old details; one new question added)
These are some common questions that may be asked related to this.
Q. Why do you use colors that are a multiple of 16?
A. When I was working on animations with AVI format using Winzip to compress them, colors using a multiple of 16 compressed very well and it eventually became a habit. The most common odd case to this is when calculations tell me otherwise (especially from using the color-averaging formula (or one of its derivatives) of which is used for mathematical accuracy). A less common case, even without calculations, is when there's a large difference between the multiples of 16 where I go to multiples of 8 instead.
Q. Can I have a faster frame rate than 10 fps?
A. That depends on what you will do with your animation. 10 fps is as fast as Internet Explorer, Firefox, and other web browsers can reliably render them. If intended to be online, 10 fps is the fastest you'll get. If you don't intend to have it online, then you can use whatever frame rate you feel as neccessary. 100 fps is the fastest GIF supports that I've seen. You may still need a program to preview the animation though to check it for bugs.
Q. Why 20 mph per second acceleration instead of 21.9 or 9.81?
A. Ease of use. Notice in the spreadsheet how you just need to subtract 2 off the speed each frame? Why bother with 2.19? Also, 9.81 is in meters per second per second rather than miles per hour per second. Want 8 or 15 fps instead? Working with 20 is much easier to deal with than 21.9 when doing these conversions. Also, it's in the physics of my mind game where gravity is absorbed for use in other special abilities such as immunity to drag.
Q. Why do some animations use different downward acceleration rates?
A. You may have seen a change of 8 in some of my animations and sometimes two frames before a change of 1. This depends on what special ability is used. The stomp (both variants) and the bounce ability amplify the effects of gravity allowing for 80 mph per second acceleration. The fall-glide reduces the effects of gravity allowing for 5 mph per second acceleration or a half of a mph per frame. When stopping on the ground, gravity amplification and friction work together to get 80+20 or 100 mph per second deceleration. It all depends on the abilities used.
Q. Why do all that math to make an animation?
A. If you did it manually, it wouldn't be anywhere near as realistic in behavior. Taking the math-less approach is okay under some conditions such as simple animations, but these animations are quite complex and otherwise doing the math makes it much more realistic. Doing it with math gives a much more realistic feel to it.
Q. I thought 3D had angle calculations involved, but your formula doesn't. Do you have such a formula?
A. Although I don't have the formula, the process is otherwise the same thing. First, set the field of view like 60°. From the left side to the right side of the image is that number. The center is the 0° meaning that, if the field of view was 60°, the objects on the left and right edges of the view are 30°. You'd use the arctangent function to find position: "atan(offset/distance)". Distance is otherwise the scaling, but you wouldn't use scaling as done in the animations, rather, an actual distance. If facing straight at something 10 feet away, 3 feet to the left, and 1.7 feet up you'd use "atan(-3/10)" (Left is X-negative) for the X position of a vertex and "atan(1.7/10)", a vertex is placed at -16.699° for the X position and 9.648° for the Y position. To plot the point, you need to know the image size. Let's say your image is 640x480. Divide the image width by your field of view. 640/60 is 10 2/3. This means that, for every 10 2/3 pixels, there is an offset of 1 degree. To plot the point, you add half of the field of view to the angles you calculated. -16.699° + (60/2)° = -16.699 + 30° = 13.301°. Multiply the 13.301 by 10 2/3 and you get 141.875. Because the width is an even number, trash after the decimal is dropped and thus the X position on the image is 141. If one of the dimensions was an odd number, you'd round to the nearest integer instead (-0.5 exactly would round to 0 rather than -1 since it rounds up when exactly between two points). Follow the same procedure for the Y position of the vertex. Repeat the procedure for each vertex of an object and eventually connect the points.
Q. Why use a spreadsheet?
A. Spreadsheets allow for massive calculations to be done far more easily, easy visibility for faster processing, even getting a very good overview of your plan to fine-tune it. Just punching numbers into the calculator will take a very long time, ten times longer even and you may forget what your plan is. You don't, however, have to use strictly Excel. Any spreadsheet program (like Open Office which is free and open source) with the simple capabilities required is all you need.
Q. I made a mistake 100+ frames back and don't want to redo everything! Is there another option?
A. You should always check positions frequently, at least once every 10 frames. When there's a lot of adjustments being made, such as that after starting to go up, checking should be done more frequently, at least once every 5 frames. Remember, one mistake 50 frames back means having to redo all of the frames from there on. However, it doesn't actually take long to fix a small mistake, even 50 frames back where it can take 10 minutes. If the mistake is minor, you can live with it and continue on with the fix made in the current frame, but it may not be at it's best. To prevent this, you can automate the movement and this is only possible with programming.
Q. How many layers can I have?
A. That's up to you. The more layers, the more detailed the scene, the bigger the resulting file size, and the longer it'll take to process each frame. Spreadsheets support up to 256 columns (or at least Excel does as well as MSWorks 4.5a (an old version)). If you want a lot of layers and a lot of frames, you're likely better off automating it instead. My record is currently 30, but could well be in the thousands (for beyong 250 or so, you'd need to use the main position of the character to figure that part out.
Q. If you make animated GIFs so nicely, how about flash?
A. Because I don't have flash and it costs more than I can spend (even if I had the money for it), I cannot use flash animations. I would like to though, but at $500, it's ridiculously high-priced. Considering I rarely do it, even at $100 would seen a bit much. I do plan on writing a program (in C) that could offer similar features and someone could come up with a Flash converter, the only actual hope I have. My animated GIFs are flash-like in the way they behave, they have been for nearly 3 years.
Q. Where's the program to automate the process?
A. Unfortunately, I'm not skilled enough to do this using C and Gamestudio won't allow users to modify images. Before I can do this, I need to learn how to dynamically change the size of an array (not everyone's going to use 320x240 or smaller, someone may want a rather odd 981x794 size), create a basic spreadsheet program (optional, but will allow you to fine-tune your animation with greater ease than programs like Excel since it would be dedicated to animation creation), and have it be able to write the animated GIF output. I've learned everything else. Once I learn these, I could very well be able to write a program to automate the animation elements positioning and even be able to preview it. The spreadsheet part of it involves many other elements I don't know either, but it's not required.
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.
