Objective: Refine the outlined figure from Lab 2 to make a convincing walk cycle.
Let’s get right into it!
This is something that normally comes way before animating anything, but for the art lab series it comes in here. You probably have an idea of what your character will look like in your head, but you need to have a tangible example on paper or in the computer. You must sketch your character both head on and to the side. Measure your proportions from Lab 2 to make sure your sketched character will fit nicely over your walking outline. Scan your character and save it as an 8x11 in, 150 dpi TIFF document. You must submit one file of your character from the front and one from the side. These sketches can be simple black and white pencil sketches, but must show your character in full detail.
Now that you have a clear concept of your character, draw one of the key frames. You can do it straight on the computer with a stylus, a mouse (not suggested), Illustrator and some clever copying/pasting, or good old-fashioned drawing. If you are going to draw it by hand, consider printing out a key frame and placing a clean sheet of paper over it and using that as a guide as you draw. Especially if you have a light box, this method of drawing will probably be the easiest and most natural.
I suggest drawing your frame as a new layer in your .psd file from lab 2, but if you make a new file, use the same dimensions from lab 2 (500x500px, 150dpi).
A light box is a simple frame (usually made out of wood) with a glass/plastic top and a light on the inside. The light illuminates the top face, allowing you to trace just about anything. Special animation light boxes have pegs in them so you can swap sheets and ensure that they are always in the same place.
You can purchase light boxes of many shapes and sizes, but they’re also really easy to make. http://www.cartoonsupplies.com has a nice selection, or if you want to make one you can find many online tutorials, http://www.characteranimationin3d.com/lightbox.htm. I suggest browsing some designs first and then building one that suits your needs. Caution: if you build a light box, make sure your choice of bulb is not too hot and provide proper ventilation. If it overheats, you could burn yourself or even have the box or its surroundings ignite. I suggest using a fluorescent tube or similar narrow light (like this one) http://www.homedepot.com/prel80/HDUS/EN_US/diy_main/pg_diy.jsp?prod_id=162788&cm_mmc=1hd.com2msn-_-product_feed-_-D27X-_-162788.
PC case fans are also a good solution for high-temperature boxes.
Now detail the remaining key frames. As I have stated before, do not draw your frames in chronological order. Use your character sketch as a reference; your character may show different details between each frame.
Secondary motion describes the effects created by primary motion. Walking, for example, may cause a person’s hair to bounce or clothes to sway back and forth. If walking is the primary motion, then hair bouncing and clothes swaying are both secondary motions.
Consider secondary motion as you animate. Hair that stays straight down can ruin a walk cycle. Other sources of secondary motion can include: head bobbing (think of a character walking while listening to headphones), canes, jewelry, capes, and just about anything that is not rigidly attached to the primary object.
Now you no doubt have a beautiful walking animation. Save it as a .gif and submit it through CMS. Although GIF is a good file format for animations on the web, it is not as useful for programmers making games. The programmers in your group will need random access to each frame in your animation. There are two common ways to provide this access. One way is to save each frame as a separate file. This is easy to do, but creates a lot of files that can get messy and hard to organize. A cleaner method is to make filmstrips. Your walk cycle can be saved as a filmstrip with the first frame on the left, the second frame directly to its right, the next frame to the last frame’s right, etc. You may choose to save a filmstrip in multiple rows with the first X frames in row 1, the second X frames in row 2, and so on.
For this lab, you will produce a single row filmstrip. You must first create a new document, (frames*500)x500 px, 150 dpi. The width will be 500 multiplied by the number of frames in your walk cycle.
Now let’s make a layer that will serve as a guide for each frame. Create a new layer called “boxes.” Select the Rectangular Marquee Tool (or just press M). Draw a small, arbitrary box on the work area. Go to Select->Transform Selection. This brings up the transformation options at the top of the screen underneath the menu bar. Enter the following options:
Now you have a 500x500 selection in the exact position of the first frame. Fill this with a dull color. Pick a foreground color by double-clicking the upper-left square of the big overlapping squares in the bottom of the toolbar. Go to Edit->Fill and use Foreground Color.
To create the next frame guide, go to Select->Transform Selection again. If you have accidentally cleared your selection, make a new one by dragging a rectangle onto the work area with the Marquee Tool and then transform your selection. Enter the following options:
Select a background color and fill this square with it. Continue this process with the same 2 colors for the rest of your frames.
Now you can start moving your frames into this document. Copy your first frame from your previous document. Go to the filmstrip document and select the Magic Wand Tool (W). At the top under the menu bar, set its Tolerance to 1 and uncheck anti-aliased. Now click on your first rectangle. Go to Edit->Paste Into. This pastes the first layer directly into your selection. It also creates a layer mask which can be seen in the Layers tab. A Layer Mask is essentially an Alpha Channel for an individual layer. You can edit it by clicking on it in the Layers Tab. To resume normal editing, click on the Layer preview picture in the Layers Tab. For this lab, you can ignore the Layer Masks.
Repeat this process until all frames have been pasted into the document.
Creating an alpha channel for the filmstrip is a bit trickier with all these frames. One easy way to create it is to hold ctrl and click on the layer preview in the Layers Tab for the first frame. Now hold shift+ctrl and click on every other frame’s preview. You should now have everything selected that you want to be opaque. Select the Channels Tab, and click “Save Selection as a Channel.” This is a little icon near the trash can that is a gray square with a white circle inside of it. Voila! Your alpha channel has magically appeared.
Now zoom in and carefully examine the alpha channel around each frame. You can draw on the alpha channel as if it were a regular grayscale layer. To edit it at the pixel level, select the Pencil Tool. It is in the same place in the toolbar as the Brush Tool. Just click and hold on the Brush, and select Pencil from the pop-out menu. The Pencil Tool differs from the Brush in that it has a precise edge. There is not anti-aliasing when you make a dot. This allows you to edit a pixel without affecting any of the surrounding pixels.
GameX can read TIFFs in RGB format (as well as non-compressed BMPs, JPGs, etc.). Go to Image->Mode->RGB Color to ensure that it will be readable by GameX. Now save it as a TIFF. Do not save layers and make sure to include alpha channels.
A few notes about the filmstrip, from Colin C.: There is a practical limit on the size of the images your games will be able to handle. The final filmstrip image should not be bigger than 1024 in either direction, and it's good to plan ahead: the size of an image in memory will be stored as a power of 2 pixels in a direction, like 64, 128, 256, 512, or 1024. So if your total filmstrip size is 600x600, that will be stored as 1024x1024, and will be a big waste of memory. Make sure you think about that when determining exactly how you're going to be storing things. This limit is only for GameX and future consideration, not for this lab, so don't worry if you have a huge image of around 8000x500 for now.
Also, you may want to limit the frames of animation you use for each character to a particular number. See the images in Guys!, for example "fguy_walk_draw". We determined ahead of time that the walking animations would cosist of 30 frames, in a 3x10 grid (with a few special cases). You can also put different types of animation (like different character facings) in the same file, as long as you're consistent. See the Sprite Demo images for examples of that. Again, this is just thinking ahead about making images for your games, not for this lab.
Submit through CMS the following documents:
This lab project is due Monday, March 28th by 11:59pm (midnight).