Tools for 2D Game Artists and Animators
by Casey Gatti


A little disclaimer: There are pieces of this article more geared to an artist who has formidable amount of knowledge of the animation field

Overview

Programmers, have you wondered what kind of tools professional independent animators use? Or are you an aspiring 2-D animator and need some direction to the best and least-expensive tools for capturing and testing your animation? Well, this article provides information on the tools and techniques to bring any hand-drawn animation to the computer.

Technical aspects of hand-drawn animation

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 technical skills 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
  1. I'd recommend purchasing the 3-hole peg bar system.

    Just think of 3-hole punched paper on top of a peg bar. To 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.
  2. 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 3-hole peg bars. (Your paper will slide around way too much.)
  3. You'll of course also need a light table to see through the paper in order to look at the progression of drawings. Portable light tables run between ($35-$60). Just tape the peg bar on top of the light table.

For more information on the general processes and materials needed for animation, please refer to the book title "The Animator's Workbook." It is an excellent resource for anyone pursuing animation.
The Animator's Workbook
by Tony White
Cartoon Animation
by Preston Blair

The electronic tools needed for testing

So, you've drawn up 10 pictures which shows 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 old system specs: iMac 500MHz DV, 20GB, 768RAM, System 10.1.5, 1024x768 resolution. I would recommend the following tools based on their quality and modest costs:

  1. iBot by Orange Micro
    Web cam captures very high-quality 640x480 imagery with outstanding screen refresh rates of 30fps. (Firewire model - $90)
  2. 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.
  3. 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)
  4. QuickTime Player Pro by Apple
    Any multimedia content creator should already have this purchased. It is needed for importing an Image Sequence ($29)
The last thing you'll need to do is rig the camera so it can face down and shoot the drawings. Final cost should be around $150-$170 for a good animation testing system.

Testing/capturing the animation

The instructions assume that you'll be using the same software as me, however, the principals provided within these steps should be applicable to other alternate tools. Make sure the iBot is plugged-in and start-up the BTV software. It is best to capture animation tests at 320x240. 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.
  1. After you capture each file, quit out of the program.

  2. 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 ($300).

  3. Open QuickTime, select File and choose Open Image Sequence…

  4. Navigate to within the folder and select the image numbered 001.

  5. 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.
    (If you have a 10 drawing run cycle, have the frames imported at 15 fps. 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.

  6. 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, you must select File and choose Export...
    Select Movie to QuickTime Movie from the pull-down menu.
    Click the "Options..." button.
    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. Choose "Limit data rate to 90k per sec.")
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.
  1. Fine line each drawing.

  2. 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.

  3. 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.

If you are a seasoned traditional animator and are looking for a new process of bringing your drawings into a video game, please check out my presentation on vectorizing your hand drawings.

Welcome to Adobe GoLive 6

Tools for 2D Game Artists and Animators
by Casey Gatti


A little disclaimer: There are pieces of this article more geared to an artist who has formidable amount of knowledge of the animation field

Overview

Programmers, have you wondered what kind of tools professional independent animators use? Or are you an aspiring 2-D animator and need some direction to the best and least-expensive tools for capturing and testing your animation? Well, this article provides information on the tools and techniques to bring any hand-drawn animation to the computer.

Technical aspects of hand-drawn animation

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 technical skills 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
  1. I'd recommend purchasing the 3-hole peg bar system.

    Just think of 3-hole punched paper on top of a peg bar. To 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.
  2. 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 3-hole peg bars. (Your paper will slide around way too much.)
  3. You'll of course also need a light table to see through the paper in order to look at the progression of drawings. Portable light tables run between ($35-$60). Just tape the peg bar on top of the light table.

For more information on the general processes and materials needed for animation, please refer to the book title "The Animator's Workbook." It is an excellent resource for anyone pursuing animation.
The Animator's Workbook
by Tony White
Cartoon Animation
by Preston Blair

The electronic tools needed for testing

So, you've drawn up 10 pictures which shows 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 old system specs: iMac 500MHz DV, 20GB, 768RAM, System 10.1.5, 1024x768 resolution. I would recommend the following tools based on their quality and modest costs:

  1. iBot by Orange Micro
    Web cam captures very high-quality 640x480 imagery with outstanding screen refresh rates of 30fps. (Firewire model - $90)
  2. 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.
  3. 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)
  4. QuickTime Player Pro by Apple
    Any multimedia content creator should already have this purchased. It is needed for importing an Image Sequence ($29)
The last thing you'll need to do is rig the camera so it can face down and shoot the drawings. Final cost should be around $150-$170 for a good animation testing system.

Testing/capturing the animation

The instructions assume that you'll be using the same software as me, however, the principals provided within these steps should be applicable to other alternate tools. Make sure the iBot is plugged-in and start-up the BTV software. It is best to capture animation tests at 320x240. 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.
  1. After you capture each file, quit out of the program.

  2. 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 ($300).

  3. Open QuickTime, select File and choose Open Image Sequence…

  4. Navigate to within the folder and select the image numbered 001.

  5. 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.
    (If you have a 10 drawing run cycle, have the frames imported at 15 fps. 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.

  6. 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, you must select File and choose Export...
    Select Movie to QuickTime Movie from the pull-down menu.
    Click the "Options..." button.
    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. Choose "Limit data rate to 90k per sec.")
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.
  1. Fine line each drawing.

  2. 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.

  3. 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.

If you are a seasoned traditional animator and are looking for a new process of bringing your drawings into a video game, please check out my presentation on vectorizing your hand drawings.