Creating aHand-Drawn

Animated Sprite

Sketch and Scan

Create the initial image of your animated character by sketching in (possibly blue) pencil.

Outline with bold pen or marker.

Overlay with image with a blank sheet and trace and/or redraw in new position character parts for the second frame of the animation. Similar method used to make a flip-book.

Repeat for each frame of the animation.

In this example I am using the second image also as the 4 th image.

Produce a digital scan of your images.

frame 1frame 2 & 4frame 3

Editing Scanned Images

Use any paint (bit-level) editing program to color and clean-up your scanned images.

Creating the Sprite-sheet

Use a vector-drawing tool such as Power Point to create a cell for the sprite-sheet. The color of the cell should be the transparency color (Magenta 255,0,255 in this case).

Place a fiducial mark (placeholder) on the cell for aligning the sprite image.

Duplicate the cell for as many frames as you want for your sprite sheet.

Place your character images into the cells in a manner to ensure smooth motion of the character during animation.

For the inchworm, the back section of the the worm will remain stationary as the worm stretches forward, so I will align the back section of the first two images on the fiducial mark as shown.

150

194

25 25 35 4570 80 90 90

Character Alignment

head of inchworm moving forward

tail of inchworm moving forward

x pixels

In the first 3 frames the head of the inchworm is moving forward relative to the left side of the sprite cell.

In the last 2 frames the tail begins to move forward.

At the end of the animation cycle the position of the sprite-sheet is advanced 20 pixels. (see the move_right( ) method in the worm class)

public void move_right(int deltime){ Time += deltime; if (Time >= animTime) { if (animcount > 3) { pos.X += 30; animcount = 0; } Time = 0; blit.X = blit.Width * animcount; animcount += 1; }}

The Move_Right( ) Method

The update method in an XNA game generates a time called gameTime which is the elapsed time since the last time the update method was called.

The time is passed into the move_right method and used to control the animation rate. The total elapsed time Time since the last time the animation frame was changed. When the elapsed time exceeds animTime (50 milliseconds) the animcount is incremented.

When animcount exceeds the value 3 it is reset to 0 and the position of the inchworm is advanced 20 pixels.