CIS 487 - Game Design I Sprite Sheets

1. CIS 487 - Game Design ISprite Sheets Blake Farrugia 10/10/2011

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

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

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

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

6. Sprite Sheet example Kid Chameleon - Sega Genesis - 1992 Walk Cycle Death Cycle Attack Cycle Projectile

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

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

9. Flash SWF Sprite Sheet • Go to File->Export->Export Movie… This will save a .

10. Flash SWF Sprite Sheet • SWF file that you may then add to your FlashDevelop project

11. 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-3-tutorials/projects-game-development/366-2.html

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

13. Importing Graphics • Add your sprite sheet image to your project’s asset folder. • Right click and embed it in your animation class.

14. Importing Graphics • Set as a Class. To use this as the Bitmap it is, set to an actual Bitmap variable.

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

16. Basic Animation Code • Here’s some code adapted from 8 Bit Rocket.

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

18. animLoop() • Each frame, the canvas is redrawn with sprite.

19. Helpful Links • 8 Bit Rocket – Sprite Sheet Animation Basics • http://www.8bitrocket.com/2008/7/2/Tutorial-AS3-The-basics-of-tile-sheet-animation-or-blitting/ • 8 Bit Rocket – Updated Sprite Sheet Example • http://www.8bitrocket.com/2010/03/03/tutorial-as3-how-to-blit-an-animation-from-a-tile-sheet-embedded-at-compile-time/ • Ben Silvis – Sprite Sheet Class Tutorial • http://www.bensilvis.com/?p=229