1 / 19

CIS 487 - Game Design I Sprite Sheets

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:

africa
Télécharger la présentation

CIS 487 - Game Design I Sprite Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related