CIS 487 - Game Design I Sprite SheetsAnimationArt AssetsBasics - Sprite SheetSprite Vs. MovieClipSprite Sheet exampleImporting Sprite Sheet TutorialFlash SWF Sprite SheetSlide 9Slide 10Tutorial on Using FlashFlashDevelop Sprite SheetImporting GraphicsSlide 14Basic Animation CodeSlide 16Slide 17animLoop()Helpful LinksCIS 487 - Game Design ISprite SheetsBlake Farrugia10/10/2011Animation•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 classesArt Assets•Where does the art come from?•You can create it yourself with a program like Gimphttp://www.gimp.org/•You can find royalty free sources on the internethttp://www.widgetworx.com/widgetworx/portfolio/spritelib.htmlBasics - 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 exampleWalk CycleKid Chameleon - Sega Genesis - 1992ProjectileDeath CycleAttack CycleImporting 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 projectTutorial on Using Flash•There are series of movies that make use of this technique to create in game animations in flashhttp://www.lynda.com/ActionScript-3-tutorials/projects-game-development/366-2.htmlFlashDevelop 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 renderinganimLoop()•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-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
View Full Document