CIS 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 You can find royalty free sources on the internet 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 Walk Cycle Kid Chameleon - Sega Genesis Projectile Death Cycle Attack Cycle

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 tutorials/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 – The-basics-of-tile-sheet-animation-or-blitting/ The-basics-of-tile-sheet-animation-or-blitting/ 8 Bit Rocket – Updated Sprite Sheet Example – how-to-blit-an-animation-from-a-tile-sheet- embedded-at-compile-time/ how-to-blit-an-animation-from-a-tile-sheet- embedded-at-compile-time/ Ben Silvis – Sprite Sheet Class Tutorial –