Art Lab 2: 2D Animation
Due: Wednesday, February 9th at 11:59 pm
Animation is the representation of movement by discrete key frames. Your mind interprets the sequences of images as continuous. For this lab you will create a sequence of images that represent a walking character.
An Animation Tutorial
For this lab, you will use a the program ImageReady. This is a program that is linked to Photoshop and has a timeline in which, frame by frame, you may alter the position and opacity of individual layers. PSD documents are easily bounced back and forth between ImageReady and Photoshop for editing images and testing their movements.
In creating your animation, you will go through three steps.
Part I: The Walk Cycle
Cycles are sequences of drawings that, when looped, exact a complete continual motion. A Walk Cycle is perhaps the most important movement a game artist can learn to animate. Even if your character is not a human, or a two-legged creature for that matter, learning to animate a walk cycle will help you to recreate the illusion of life in all arenas.
There is an excellent tutorial online on how to create images for a walk cycle. Note the four distinct poses: contact, recoil, passing and high-point. For a two legged creature, this means that you need at least eight images for your animation (the four poses for each leg). Thus eight frames is the bare minimum for this assignment.
Part II: Secondary Motion
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. The means for doing this are less cut-and-dried than for the walk cycle, so this is a place for your creativity to shine.
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.
Part III: Filmstrips
ImageReady is capable of creating animated GIFs, but this format is not useful to your programmers, as it cannot be used in XNA. There are two ways to save your animation in a usable format for your team’s programmers. The first way is to save each frame as a separate file. A cleaner method is to make filmstrips. A filmstrip is a single graphics file with all of the frames arranged together. For example, below is an example of a filmstrip of a banking spaceship used in last week's programming lab.
In creating a filmstrip, you may either save the images in a single row, or in multiple rows. If you use multiple rows, typically the first X frames in row 1, the second X frames in row 2, and so on.
The Walk Cycle
Go through the following steps to construct a walk cycle like the one showed in the online tutorial. As a word of advice, it is extremely easy to get bogged down in the details of your individual drawings. Always begin with the general shapes, focusing on the movements alone. The details always, always, always come last. A simple drawing which moves correctly is infinitely better than beautifully rendered drawing which staggers and twitches unnaturally. For this assignment, stick to basic primitive shapes to represent body parts (ie, circular head, rectangular limbs).
1. Create a Single Document and Fill Its Layers with Animation Frames
Open a new Photoshop document, in which you will draw your frames using a Wacom drawing tablet, mouse, or scanned images. Do not start with the first frame and draw them sequentially! Start with the four key frames mentioned in the online tutorial and then start drawing the in-between frames. You must draw a minimum of 8 frames. If your animation is not smooth, you must have more frames. A choppy animation with 8 frames will receive a lower score than a smooth animation with 12 frames.
2. Take Advantage of Transparency
While working with your individual layers, it helps to compare with others by toggling their opacity in the Layers palette. Again, look at the images in the online tutorial to see what we mean by this.
3. Resize your document to 500x500 pixels
This step should be self-explanatory.
4. Jump to ImageReady
When you are ready to animate your layers, click the very lowest button on your Tools palette. This will open your document into ImageReady. For later versions of Photoshop (CS3 and onward), ImageReady is incorporated into Photoshop instead of being a linked separate program. The steps to use it are largely the same, the biggest difference is accessing it. Instead of a button at the bototm of the toolbar, the animation window is accessed through Window --> Animation.
5. Open the Animation Window (timeline)
Make sure that your Animation window is visible at the bottom of the screen. If not, choose Animation from the Window drop menu.
6. Understand Your Timeline
You should see a thumbnail icon of your image labeled "1". This is your first frame. Directly beneath the thumbnail it should read "0 sec". This is the time your individual frames will last when played in succession. This duration is easily changed by clicking on the number and scrolling through the available times or typing a custom duration (keep in mind that animations may run slower in ImageReady than in their ultimate exported form).
7. Create and Edit New Frames
Create a new frame by clicking the Duplicate Current Frame button on the Animation window. Now simply click the eye beside a layer in the Layers palette to turn it off/on, or adjust opacity if you wish for a more gradual change. If you've arranged your layers in sequential order, animating them is as simple as creating new frames one by one and toggling each following layer along the way.
8. Test Your Walk Cycle
Test your animation by clicking the play button on your Animation window, or for a speedier playback, choose Preview from the File menu.
9, Export Your Animation
Once you're satisfied with your animation, export an animated GIF by going to File->Save Optimized As and choose "Images Only (.gif)" from the Save as type drop down box. Save it as "WalkCycle.gif". Make sure that your GIF is 500x500 pixels at 150 dpi.
Evaluating the Walk Cycle
In your animation, you should focus on the following elements (as you will be graded on them):
Here is the point when your creativity comes in. It is important that your character has its unique trait such as a behavior or facial expression that represents him/her. (think that it will also represent your game that you will create with your team soon). That means this is the point when you need to think about the secondary motion.
For this part, you will be creating one of your character’s unique behaviors (such as throwing, running, attacking, jumping, etc). It can be from the drawing that you did for pose.psd in the previous lab. You decide how many frames you need for your character to be animated smoothly.
You should save this animation as "Action.gif". The same requirements used to evaluate the Walk Cycle will be used to evaluate this animation as well. In particular, the GIF animation must have a resolution of 500x500 pixels at 150 dpi.
Creating a Filmstrip
For this lab, you will produce a single row filmstrip. You must first create a new document, of size (frames*500)x500 pixels, at 150 dpi. In other words, the width will be 500 pixels multiplied by the number of frames in your walk cycle.
In addition, you should 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. This time, 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.
When you are done, you should save the file as "Filmstrip.tif" (recall that TIF supports alpha channels).
Turning It In
Create a zip file containing the following files:
Submit this zip file as "lab2art.zip" to CMS.
Due Wednesday, February 9th at 11:59 pm