iDevGames

by Casey Gatti

Carlos Note: Change links to Textile markup format. needs a bit more proofing maybe?

Overview

Everyone these days seems to be thinking in 3D, when 2D animation can still play an important role, and games with 2D, especially cartoony looking games, are still loved by users. I know many of you are thinking, “2D? that is so 1980’s!”, but here’s why you need to learn good 2D animation techniques and my article will help you to achieve them.

Technical aspects of hand drawn animation

2danim01.gif

Hand drawn animation requires the artist to employ a system for keeping all the drawings in proportion and correctly registered. Maintaining proportions is based on the natural skill of the artist, however keeping the drawings correctly registered is a matter of using the Acme, Oxberry, or Standard 3-Hole peg bar system.

Basic equipment needed for drawing

I’d recommend purchasing the Standard 3-Hole peg bar system. Just think of 3-hole punched paper on top of a peg bar. To visually look at, or even perhaps order one, please visit LIGHTFOOT LTD. (http://www.lightfootltd.com/indexa.html) They cost only $4 per peg bar and you’ll probably need two ? one for the light table, and the other for the web-cam testing system.

Go to any office supply store, purchase the cheapest 500 page ream of paper ($5) and a 3-hole puncher ($25). Do not purchase pre-punched paper. This paper has factory made holes which are too big for the peg bars (your paper will slide around way too much).

Portable light tables run between $50-$90. Just tape the peg bar on top of the light table as shown in the photo.

2danim02.jpg

For more information on the general tools and materials needed for animation, please refer to the book title “The Animator’s Workbook.” It is an excellent resource for anyone pursuing animation.

Theory of character animation

Characters, primarily in video games, operate in looped animations. In the Playstation game “Oddworld”, the user has many different character movements for Abe to perform: standard walk, run, sneak, run-jump, jump, etc. The principles for these character animations stem from the study of an individual’s movement. Sometimes the best ways of understanding motion is through video recording a movement and viewing it frame by frame. Don’t be afraid to act out these movements. It is ideal to use a camcorder for the studying of movement in game animation because both camcorders and many video games operate on a 30fps time base. The artist can then choose to rotoscope the movement (trace over the real-life images) or draw the frames by hand and add distinct characteristics to the movement. To learn more about character animation and the amount of frames normally associated with a cycled animation (eg. walking, sneaking, running, etc.) please refer to “Character Animation” by Preston Blair. Please remember that this technique can be applied to 3D animation as well. Many 3D programs support importing QuickTime or AVI files within the background of a certain view. Since we can’t all afford $10,000+ motion capture systems, filming a character moving and then using the joints and bones as reference in a 3D program would be great.

The electronic tools needed for testing

So, you’ve drawn up 10 pictures which show a character running. Now it is time to test the animation. Before I go over the hardware and software to purchase, I want to mention my system specs: iMac 500MHz DV, 20GB, 768MB RAM, Mac OS 10.1.5, 1024×768 resolution. I would recommend the following tools based on their quality and modest costs:

• iBot by Orange Micro — Web-cam captures very high-quality 640×480 imagery with outstanding screen refresh rates of 30fps. (Firewire model — $90)
• BTV / BTV Pro by Ben Software — Application for capturing video content from most web cams. Works great with iBot. The basic version has the main tools that you’ll need for $20. But if you’re interested in stop-motion animation, motion detection capture, and some other movie editing features, consider the $40 pro version.
• ioexpert Driver by IOXperts — Provides the driver for practically all firewire cameras. This was bundled at a discounted rate of $10 if a user purchases an iBot, but I’m not sure if this discount is still valid. (Regular price — $20)
• QuickTime Player Pro by Apple — Any multimedia content creator should already have this purchased. It is needed for importing an Image Sequence ($29)

2danim03.jpg

Final cost should be around $150-$170 for all of these components and you’ll have a darn good animation testing system.(Just so you know, other non-computer based animation testing systems cost between $3,500-$5,000. It’s pretty ridiculous.)

Rigging the camera and lighting

The last thing you’ll need to do is rig the camera so it can face down and shoot the drawings. The camera needs to be securely connected to the crane-type of system. It can not wobble during shooting footage. You’ll also need a decent desk lamp or drafting table light to properly illuminate the “live area” which the camera will be shooting. Most video capture software has the capabilities to adjust brightness, sharpness, and contrast, but I suggest to try to create the correct lighting without configuring it through software. (I’ve sometimes run into software glitches when I try to adjust the lighting from within different video capture software.)

Testing and capturing the animation

These instructions assume that you’ll be using the same software as me. However, the principals provided within these steps should be applicable to other tools. Make sure the iBot is plugged-in and start-up the BTV software. It is best to capture animation tests at 320×240. (Capturing frames above that size takes more disk space and could possibly not show accurate frame rate when playing video back on a slower hard disk.) You need to set the preferences to save the screen captures to a specific directory/folder. You want them to be in PICT format and the program to automatically append a sequential numbering system to each file.

2danim04.mov Artist checking the movement

Step-by-step

• After you capture each file, quit out of the program.
• Now it’s time to use QuickTime Player Pro ($29) to import an Image Sequence. This cuts out the need to have an image compositing program such as Adobe Premiere or Apple’s Final Cut.
• Open QuickTime, select File and choose Open Image Sequence.
• Navigate to within the folder and select the image numbered 001.
• QuickTime will now prompt you with an option to import the files based on frames per second. Since video games mainly run at refresh rates of 30fps, it is best to import your animated characters at 10fps, or 15fps. (Note: If you have a 10 drawing run cycle, have the frames imported at 15fps. If the motion is too fast, then import them at 10fps.) To achieve the smoothest character animation, it is best that the characters play back at 15fps with your desired motion.
• Save the QuickTime movie. Choose “Save normally (allowing dependencies)” This saves a lot of hard disk space. Set the movie to Loop and hit play. If you wish to share the QuickTime movie with another person, follow these steps: Select File and choose Export…, select Movie to QuickTime Movie from the pull-down menu, click the “Options…” button, and then click on Video “Settings” and choose your preferred codec. I’d suggest Cinepak. Make sure the frame rate matches the frame rate of what you imported the frames in as. Finally, choose “Limit data rate to 90k per sec.”)

2danim05.mov Finished animation test

There you go!

It’s best not to use a scanner for general animation testing. The motion is what’s being tested, not the fine line quality of the drawing. Web cams quickly take a snap shot in 1-2 seconds, automatically append a sequential numbering system to the file and are immediately ready for the next picture. Scanners take a minimum 20-30 seconds per picture. Scanners are only useful for capturing the final cleaned-up/fine line drawing.

Final clean-up of animation

The clean-up process is when the animator cleans up the drawing by applying a fine line marker trace of the original animated drawing. Hopefully you already have a scanner at your disposal.

• Fine line each drawing
• Set the scanner to scan the drawings as “line art”. This will allow only the dark, fine line to be picked up. Line art = bitmap format.) Tape the peg bar onto the scanner and scan each drawing.
• Use Photoshop, Gimp or any other low-cost image editing tool (Sprite Editor) to color in the drawings.

I hope this sheds some light on the tools and processes of traditional hand drawn animation. When I have a little more open time, I’ll expand this article to include techniques and processes for coloring the characters in vector and raster-based applications.

low,cost,2d,animation,techniques