CIS 487 - Game Design I
Sprite Sheets
Blake Farrugia
10/10/2011
Animation
• You may be wondering how to animate
objects in your flash games.
• A basic, cheap (memory-wise) way to render is
Sprite Sheets. Rendering is the same for both.
• Two main ways of getting resources:
– Embed actual picture file
– Embed SWF file and using MovieClip classes
Art Assets
• Where does the art come from?
• You can create it yourself with a program like
Gimp
http://www.gimp.org/
• You can find royalty free sources on the
internet
http://www.widgetworx.com/widgetworx/portfolio/spritelib.
html
Basics - Sprite Sheet
• It is an image (preferably X x Y where X and Y
are divisible by 2) that holds sequences.
• Each sequence is made of separate images
that play an animation.
• Each individual image of a sequence is called a
sprite and represents frames of the animation.
• A sprite is usually a pixilated, highly stylized
image used in games. Not always, though.
Sprite Vs. MovieClip
• A sprite is a small picture that is part of a
sequence of images that make up an
animation. Low memory usage, unable to be
“tweened” and has no timeline.
• A flash Movieclip has a timeline and can be
animated by tweening. Display is usually less
hassle, but multiple movieclips take a lot
memory to produce.
Sprite Sheet example
Kid Chameleon - Sega Genesis - 1992
Walk Cycle
Death Cycle
Attack Cycle
Projectile
Importing Sprite Sheet Tutorial
• If using Flash CS2 or greater w/ FlashDevelop:
– Create a new Flex AS3 file. Click File->Import>Import to Library.
–;
– Choose image to import.
– Right click image in Library pane on right side.
Choose Properties and check Export to
Actionscript ON.
Flash SWF Sprite Sheet
• Name your symbol. Two more items:
– Naming class to import as
– Deriving base class which it inherits from
• If you are importing an image, your base case will be
flash.display.BitmapData, else MovieClip.
Flash SWF Sprite Sheet
• Go to File->Export->Export Movie… This will
save a .
Flash SWF Sprite Sheet
• SWF file that you may then add to your
FlashDevelop project
Tutorial on Using Flash
• There are series of movies that make use of
this technique to create in game animations in
flash
http://www.lynda.com/ActionScript-3tutorials/projects-game-development/366-2.html
FlashDevelop Sprite Sheet
• You can certainly use the above method for
creating .SWF MovieClip classes for use in
your FlashDevelop projects
• If you don’t want to, there is a more manual
way of importing pictures.
Importing Graphics
• Add your sprite sheet image to your project’s
asset folder.
• Right click and embed it in your animation
class.
Importing Graphics
• Set as a Class.
To use this as the Bitmap it is, set to an actual
Bitmap variable.
Basic Animation Code
• This is the strip we will animate.
• Each tile is 46x46. The image dimensions are
276x46. Note: Normal sprite sizes usually
divide better by 32, but this is just a test.
• There are 6 tiles and our basic code will cycle
through all of them.
Basic Animation Code
• Here’s some code adapted from 8 Bit Rocket.
Basic Animation Code
• What’s happening?
– After each frame, event runs animLoop()
– A basic canvas, 200x200, is being created
– A rectangle to display part of a bitmap is made
– tileCount and tileWait set up basic timer actions
for pausing tile animations
– tileSheet is loaded and display points are created
– tilesPerRow programmatically found
– Canvas is added as child for rendering
animLoop()
• Each frame, the canvas is redrawn with sprite.
Helpful Links
• 8 Bit Rocket – Sprite Sheet Animation Basics
– http://www.8bitrocket.com/2008/7/2/Tutorial-AS3The-basics-of-tile-sheet-animation-or-blitting/
• 8 Bit Rocket – Updated Sprite Sheet Example
– http://www.8bitrocket.com/2010/03/03/tutorial-as3how-to-blit-an-animation-from-a-tile-sheetembedded-at-compile-time/
• Ben Silvis – Sprite Sheet Class Tutorial
– http://www.bensilvis.com/?p=229