Design Lab 3: Animation and Movement

Due: Wednesday, February 12th at 11:59 pm

Animation is the representation of movement by discrete key frames. Your mind interprets the sequences of images as continuous. Each animation should be created with a good starting and ending point, so that multiple animations can blend together seamlessly. For this lab you will create a sequence of images that represent a walking character.

An Animation Tutorial

For this lab, we will assume that you are working with the most recent version of Adobe Photoshop CC, which is available in the lab and in Phillips 318. However, you can do this lab in other programs if you wish. Here is a list of other animation software:

• GIMP Spritesheet Extension: An extension for GIMP to allow the creation of spritesheets from layers.
• Adobe Photoshop CC: A collection of powerful art and animations tools.
  Some free trials are available, but this software has to be bought or paid for monthly.
• Adobe Photoshop CS 2: An older, but free version of Photoshop.
  This older version of Photoshop supports animation through the ImageReady add-on.
• Adobe Animate CC: A dedicated animation tool from Adobe.
  Some free trials are available, but this software has to be bought or paid for monthly.
• Spine: Software for rigging 2D art. Like Adobe Animate, but only a one-time cost to unlock all features.
• Stitches: A TA favorite, this website allows for the creation of filmstrips and spritesheets from images.

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 LibGDX. 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 the first week's programming lab. Please see the website Stitches as it may save time.

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 (even just a blob) 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. Open the Animation Window (Window > Timeline)

When you are ready to animate your layers, click on Window > Timeline. Make sure that the Timeline Window is visible on your screen. You should then click on the arrow next to Create Video Timeline and choose Create Frame Animation.

5. 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 --depending on how fast your computer is -- in Photoshop than in their ultimate exported form).

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

7. Test Your Walk Cycle

Test your animation by clicking the play button on your Animation window. You can set loop counts if you like.

8. Export Your Animation

Once you're satisfied with your animation, export an animated GIF by going to File > Export > Save for Web (Legacy)... Make sure you are exporting an GIF file with looping option of "Forever" and image size of 500x500 pixels.

Evaluating the Walk Cycle

In your animation, you should focus on the following elements (as you will be graded on them):

Proper Formatting:

500x500px

Smooth, Fluid Motions:

Add more frames if any segments look choppy

Natural Movement, or Obviously Intentional Unnatural Movement:

If you give your character a limp, it may develop back problems when it is older

Character Consistency:

Ensure that it looks like the same character throughout the entire animation

Definition of Volume:

We are looking for shapes/outlines, not stick figures

Simplistic Design:

Don't get bogged down in details

Cycle Accuracy:

Your character should not drift around the screen as it walks

Seamless Looping:

We should not be able to tell what frames are your first/last

---

Secondary Motion

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. If you need inspiration, please see Spriter's Resource for great filmstrips from other 2D games.

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.

---

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. In other words, the width will be 500 pixels multiplied by the number of frames in your walk cycle. While the below process is effective, please see the website Stitches as it may save time.

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:

• X: 250 px
• Y: 250 px
• Unselect the Constraint Proportions button (the little chain)
• W: 500 px
• H: 500 px
• Click the check mark or hit enter

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:

• X: 750 px
• Y: 250 px
• Unselect the Constraint Proportions button (the little chain)
• W: 500 px
• H: 500 px
• Click the check mark or hit enter

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.

---

Alpha Channels

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 a transparent "Filmstrip.png".

---

Turning It In

Create a zip file containing the following files:

• WalkCycle.gif
• Action.gif
• Filmstrip.png

Submit this zip file as "lab3design.zip" to CMS.

Due: Wednesday, February 12th at 11:59 pm