Animation

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.

Table of Contents

Animation Software

For this lab, we will assume that you are working with the most recent version of Adobe Photoshop CC, which should have been made available to you by CIT. If you did not receive this software from CIT, please let us know. With that said, you can do this lab in other programs if you wish. Here is a list of other animation software:

Stitches

A TA favorite, this website allows for the creation of filmstrips and spritesheets from images. However, it can be difficult to get your images to align precisely.

Procreate

A powerful app with a one time payment on iPad. Procreate has a simple animation function with onion skins, frame rate, and easy layer grouping. Make sure that you have the most recent version. Here is a simple written explanation of the steps required to animate in procreate.

Adobe Animate CC

This is a dedicated animation tool from Adobe. We are not sure if this is part of the package CIT is offering. If not, some some free trials are available, but this software has to be bought or paid for monthly.

Spine

This is a software tool for rigging 2D art. It is created by one of the primary developers of LibGDX. It is very similar to Adobe Animate, but only a one-time cost to unlock all features.

GIMP Spritesheet Extension

This extension for GIMP allows the creation of spritesheets from layers. It is essentially a plug-in to replicate Stitches.

An Animation Tutorial

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 the illustion of life in 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

Photoshop 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. This becomes important if you have very large filmstrips/sprite sheets (for example an animated background). A strip that is not very tall but thousands of pixels wide may become an issue for your programers. In particular, many graphics cards cannot handle images more than 4096 pixels on any one side.

Task 1: 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 the Animation Frames

Open a new Photoshop document, in which you will draw your frames using a Wacom drawing tablet, mouse, or scanned images. You should make a a separate layer for each animation frame.

When designing your animation, 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. Since the frames are on top of each other you can see how they transition from one image to another. In animation the transparent previous layers are often known as an “onion skin”. These layers allow you to reference your previous frame without the need to toggle back and forth. 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. Note that in general it is better to start with a larger canvas/document and size down. Trying to size up later will result in pixelated images.

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.

photoshop-timeline

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

photoshop-frames

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.

photoshop-loop

The name of the file should be WalkCycle.gif.

Evaluating the Walk Cycle

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

  • Proper Formatting: Each frame should be 500x500px.
  • Smooth, Fluid Motions: Add more frames if any segments look choppy
  • Natural Movement: Any stutter should be intentional, like an obvious limp.
  • Character Consistency: Ensure it is the same character throughout the animation.
  • Simplistic Design: Don’t get bogged down in details
  • Seamless Looping: We should not be able to tell what frames are your first/last
  • Definition of Volume: We are looking for shapes/outlines, not stick figures
  • Cycle Accuracy: Your character should not drift around the screen as it walks.

The last two elements deserve some additional clarification. Just because we say “no stick figures” in Definition of Volume, this does not mean you cannot have stick-like figures. If you are a UX designer and can only draw stick figures, that is okay. But you should give the “sticks” volume by expanding them into rectangles, even if the rectangles are really thin.

In the case of Cycle Accuracy, sometimes it is helpful to draw a line for the “ground.” This ensures that your character is stepping at the same height throughout the cycle.

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

Task 3: The 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.

Submission

Due: Wed, Feb 14 at 11:59 PM

Create a zip file containing the following files:

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

Submit this zip file as lab3design.zip to CMS