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.

Today’s lab is somewhat of a review for students coming from INFO 3152. If you did not take that class, this is a good tutorial to get you started on the basics of animation. If you did take INFO 3152, you are allowed to use animation assets from that class provided that they still me the new requirements of this lab.

We realize that not everyone working on this assignment is a character artist. For the purposes of this assignment, stick figures are okay so long as they have volume (so rectangles instead of lines). We are not grading you on artistic ability. We are more concerned about the technical aspects of creating asset files for your programmers, specifically the sprite sheet and the traversal step. That is the criteria upon which you will be graded.

Table of Contents

• Animation Software
• An Animation Tutorial
• The Animation Tool
• Task 1: The Walk Cycle
• Task 2: The Sprite Sheet
• Task 3: CUGL Integration
• Task 4: Layered Animation
• Submission

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. There are two other programs that we recommend:

Adobe Character Animator 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.

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). But in this assignment we are going to ask for a minimum of twelve. That is to keep you from simply copying our provided example.

We will not say much more than this tutorial, so you should go read it. However, we will use the images from this tutorial for illustrating the rest of this assignment.

Part II: The Traversal Step

Photoshop is capable of creating animated GIFs, but this format is not useful to your programmers, as it cannot be used by CUGL. 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. While this is not an ideal way to handle animation, it is helpful in getting you to understand the concept of the traversal step.

When a game animates your walk cycle, it is not simply flipping between the animation frames. It will also be sliding (or translating) your images across the screen. One of the pieces of information that you need to convey to the programmers is how far they can slide your character before moving to the next animation frame. If they slide too little, it looks like your character is marching in place. If they slide too much, it looks like your character is moonwalking. The number of pixels that it is safe to slide your image before the next frame is the traversal step.

One way to solve this problem is to look at the points of contact. When a character places a foot down, that foot should stay in place as they move forward. So aligning the points of contact between images gives you some idea about the traversal step.

For example, suppose we take the images from the walk tutorial above. While they are different sizes, we need to put them in image files all of the same size. We determine that 160x292 pixels is large enough to hold the widest and tallest images. So we place each image in a file whose boundaries are shown by the box below.

When placing your images in the box, you need to make sure the feet are all the same distance from the bottom, for the same reason the walk cycle tutorial told you to draw lines for the points of contact. This allows us to line up the points of contact as follows.

The distance between boxes gives us the traversal step. But we can see a problem here. This distance is not uniform. Some images are close together and some are far apart. That is because we naively centered each character in the image file. We need to be a little more sophisticated with how we place the characters. We need to shift them left of right in the image files to guarantee that the traversal is uniform.

One strategy we have found to be useful is to compute the average traversal and try to target that. Next start with the widest character, as that character does not have much room to shift left or right. In our example, that is the image below.

Now shift each image before and after this one so that it aligns with the previous one at the traversal step. Your instructor has found Adobe Illustrator CC to be very helpful here. Import each of your images into Illustrator and surround them with a box the size of your image file. Separate the boxes horizontally by the traversal step. Then shift the images inside of the boxes to align the points of contact. The result is something like the image below.

In doing this process, repeat the first frame at the end so that you have a perfect loop. Otherwise, the character may “drift” during the sequence. Now go back to all of your individual images and shift them left or right by the amount you had to shift them in Illustrator. You may want to reimport the results into Illustrator to check your work.

In our example, we have discovered that our 160x292 pixel images have a traversal step of 27 pixels.

Part III: The Sprite Sheet

While CUGL can process your animation as individual images, this is not the preferred way to represent your animation. Graphics cards like to minimize the number of images they must store, so most animations are stored in a single image file called a sprite sheet (known to some students as a filmstrip). For example, below is an example of a sprite sheet of a banking spaceship used in the first week’s programming lab.

Sprite sheets can be in many different formats. You can save the images in a single row, or in multiple rows. If you use multiple rows, typically first X frames go in row 1, with the second X frames in row 2, and so on. This means that the last row might have some blank spaces, as is the case with ship sprite sheet above. We refer to the number of images in the sprite sheet as the span. So if we fix the span and the number of columns, this tells us how to arrange our sprite sheet.

In general, we prefer multiple rows because graphics cards like images that are as square as possible. Long, thin sprite sheets are bad for graphics cards. This is particularly true because, as we mention in class, most mobile devices cannot process image files larger than 4096 pixels along a single edge.

To create the sprite sheet, you will need to take your images and arrange them in boxes of size equal to the original image files. For example, if we take the tutorial walk animation with eight frames each 160x292 and arrange them into four columns, we get a 640x584 sprite sheet like the one shown below.

Once again, your instructor likes to use Illustrator to do this. But another TA favorite for creating sprite sheets is Stitches. Whichever tool you decide to use, we want you to make a sprite sheet with at least three rows.

The Animation Tool

While we are not expecting you to compile code for this lab, we do want you to integrate your sprite sheet into a CUGL application. The animation tool is a simple CUGL game that allows you to test your sprite sheet and traversal step. We have provided you with the sprite sheet from the walk cycle tutorial to get you started, but you will replace this with your own sprite sheet (which has more frames and more rows).

When you start the application, you will get the start up screen and the CUGL logo. It will display a play button when it has finished loading all assets. Click the play button and you will see the Basic Alignment scene below.

This is to test the traversal step. As you can see, we currently have a traversal step of 27 pixels. To increase the traversal step, press the right arrow key. Press the left arrow key to reduce it.

Pressing the up arrow take you to the next scene, the Basic Animation scene. This will place your character near the left edge of the screen. To move your character right, hold down the right arrow. To move your character left, hold down the left arrow. Your character will never go off screen. You will also notice that sometimes the character keeps moving when you release the arrow key. That is because the character is always guaranteed to move through a full walk cycle, and will not stop mid-animation.

Pressing the up arrow again will take you to two more scenes. These scenes are relevant for the final task in this assignment.

When downloading the tool, you should pick the right tool for you desktop platform.

macOS: AnimationToolMac.zip

To run the Macintosh scene tool, you should download the file above. You should not need to have XCode installed, but it would not hurt for future activities. Extract the tool folder and put it somewhere easy to find on your computer.

The animation tool is not a double clickable application. When something goes wrong, you want to be able to see the error messages. For that reason, you will need to run this application from the command line. Open up the Terminal application. You can find this in Applications > Utilities. In fact, it would be a good idea to put this in your dock.

If you have never run the Terminal before, this is a text based interface to your computer. You run applications by typing their names. But just like the normal graphical interface, if you want to run an application, you need to make sure that the window is in the correct folder. To put the Terminal in the correct folder, take the folder you want (in this case AnimationTool) and drag it on to the Terminal icon. This should open up a new Terminal window in the correct folder. To make sure you are in the correct window, type ls (for “list files”). You should see

Animation.exe*	animation/	loading/

If you do not see this, you are not in the correct folder. Come to office hours to get some help.

Once you have confirmed you are in the right folder, you will need to validate the application. Most applications that you download for macOS are already validated, so you do not usually need to worry about this step. But this application is not a commercial piece of software, so you will need to validate it yourself. You do that by typing

xattr -cr Animation.exe

Once you have done that, you can now run the application by simply typing Animation.exe and hitting return. This will launch the application. If the application crashes, error messages will be displayed in the terminal window.

Windows: AnimationToolWin.zip

Using the scene tool on Windows is a bit more involved because you must have Visual Studio involved to get it to run. Not because you need to compile the software. But instead because you need some of the software that comes with Visual Studio to run it.

Get a copy of Visual Studio from the downloads page. When you install it, make sure you include the following individual components:

• Windows 10 SDK (10.0.18362.0)
• C++ Clang Compiler for Windows (10.0.0)
• Windows 10 SDK (10.0.19041.0)

Newer versions are okay if the number do not match up.

Download and unzip the application above. By this we do not mean simply click on the zip file. Windows allows you to look at the contents of the zip without actually extracting it. You need to drag the folder AnimationTool out of the zippered folder and put it somewhere else on your computer (like your desktop).

To verify the scene tool is working, double click on the file Animation.exe. If you see a window with the CUGL logo, everything is working. If it is not working, you might be prompted to do a “repair install”. Try this and launch the application again. If it is still not working, come to office hours.

While you can run the animation tool by double clicking on the file, we do not want you to do that. We want you to actually see the error messages when things go wrong. To do that you will need to run the application from the PowerShell. Look for the PowerShell on your computer. This is a text-based interface for interacting with programs and files. Indeed you can run any application from the PowerShell.

But to run an application from the PowerShell, it needs to be in the correct folder. To do that, type cd (that is a cd followed by a space). Then drag the folder AnimationTool on top of the PowerShell. This will add more text after the cd. Hit return and it should change to the correct folder. To verify, type ls (for “list files”). You should see Animation.exe in the list. If not, then you should come to office hours for help.

Once the PowerShell is in the correct folder, run the tool by typing Animation.exe and hitting return. This will launch the window as before. But the advantage now is that, if and when it crashes, the error messages will be displayed on the PowerShell.

Task 1: The Walk Cycle

Go through the following steps to construct a walk cycle like the one showed in the online tutorial. Again, we do not care about the quality of the art. Always begin with the general shapes, focusing on the movements alone. Any details you want to add 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. You should make a separate layer for each animation frame. We do not care about the resolution. However we recommend something between 128 pixels and 256 pixels on a side to get the same scale as our example.

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 12 frames.

2. Take Advantage of Transparency

While working with your individual layers, it helps to compare with others by toggling their visibility/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. Again, look at the images in the online tutorial to see what we mean by this.

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

Note that this will create just one frame with all of your layers.

4. 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 it into individual image files. Click on each frame individually and choose File > Export > Quick Export as PNG. Save each frame as a separate file, so that you can combine them together as a sprite sheet later. You can name the files whatever you want (as we only care about the sprite sheet).

IMPORTANT: When saving your frames make sure the background layer is not visible (by clicking its eye). You want a transparent background to each frame. Otherwise your animation will appear as a blocky white rectangle.

Task 2: The Sprite Sheet

You now need to pull your images together into a single sprite sheet. You are welcome to use Stitches to do this. But you first need to determine the traversal step. While you may use whatever too you wish, again we find illustrator very useful here. It allows us to nudge images to align them for the traversal step. And then, by putting boxes around the images, we can arrange them in rows and columns like the image below

Just remember to remove the boxes before you export the sprite sheet. Again, export to PNG, as we need to preserve the background transparency.

You can arrange the sprite sheet however you want, but we want a minimum of three rows. Take note of the number of columns and the span. You will need that, together with the traversal step, in the next part.

Task 3: CUGL Integration

It is now time to integrate your animation to CUGL. You should have downloaded the correct Animation Tool for your platform. In side that animation tool you should see a folder called animation. That is where your assets go.

Rename your sprite sheet as walk.png and replace the existing sprite sheet of that name. Next, you will need to edit two JSON files. We will talk about JSON files in more detail at a later lab, but the files are assets.json and animaton.json. Let’s look at the latter first. If you open this file with a text editor, you will see the following:

{
    "step" : 27,
    "time" : 0.5
}

The value after "step" is the traversal step in pixels. Change that to match your animation. The value "time" is the number of seconds for a single walk cycle. You can change this to speed up or slow down the animation however you want.

The file assets.json has a lot more information in it. But the thing that is most important to us is setting the columns and span of the sprite sheet. On lines 23-30, you should see

	"basic" : {
		"type"  : "Sprite",
		"data" : {
			"texture": "basic-strip",
			"span":    8,
			"cols":    4
		}
	},

Change "span" and "cols" to match your sprite sheet. You should now be able to start the animation tool and test out your animation.

IMPORTANT: As we will discover in a later lab, JSON files are very particular about commas. If you delete a comma where one once was, or add a new comma, you can cause the animation tool to crash. You should always keep a backup of the JSON files just in case.

Task 4: Layered Animation

Now that we have the basics, it is time to do something a little more advanced. If our game has items, then our character may need to be holding an item while they walk. In our example below, we have given our character a dagger (it is stabbin’ time).

We do not want to have to create a new walk cycle for each item. So we are going to split our animation into two layers: one with the character and one with the item. In our example, we are actually going to pull off the hand as well, so that it looks like the hand is gripping the item. The result is two different sprite sheets like the ones shown below.

Our game engine will take these two sprite sheets and layer them on top of each other, producing the following composite animation.

We want you to do something similar. You will have a background walk animation, but then you will have some form of item in another animation. It can be an item in the hand (but not a dagger). Or it can be a piece of clothing like a hat. You will need to figure out which one goes on top. Our dagger went underneath the animation, because it uses the hand behind the character. But a hat is likely to go on top.

When you construct the sprite sheets for the animation, make sure that they are the same size and share the same traversal (an advanced technique would use a smaller sprite sheet for the item, but that is beyond the scope of this activity). Name the upper layer walk-upper.png and the lower layer walk-lower.png. Put them both in the folder animation. You may also need to update the "span" and "cols" for "upper-strip" and "lower-strip" in assets.json.

Once you have done that you should be able to test out your animation in the Animation Tool. The scene Composite Alignment shows off the traversal step, while the scene Composite Animation shows off the resulting animation.

As one final step we want you to make an additional item/hat which can be swapped out for the first one. If the item/item is the lower layer, call this sprite sheet walk-lower2.pg. If it is the upper layer, call it walk-upper2.png. You can swap this with the original files to try out the animation in the animation tool.

Submission

Due: Thu, Feb 02 at 11:59 PM

Everything that you created or modified should be in the folder animation that is part of the animation tool. We want you to ZIP up that folder and submit it as lab1design.zip to CMS. If you do not know how to create a ZIP file, come to office hours to get some help.

Once again, we are not grading this assignment on art. We are grading it how well the animation turns out. We will grade on the smoothness of the animation and the alignment of the traversal step. Nothing more.