Flash Tutorial Links:
Play Games: HTML5 Tutorials:

Sprite Sheet (Part 1)

The "invention" of using sprite sheets for games is a very natural evolution at the time when computing resources such as memory and processing power is low. But, funnily, it's still very relevant now!

What is a Sprite Sheet

A sprite sheet is nothing more than a single image file which contains multiple images of the game sprites, as they will appear in your game. Take a look at this sprite sheet below.

pac-man-sprite-sheet

I'm sure you can recognise most of the artwork in this single image file that appears in the game. This is the sprite sheet of the entire Pac Man game that has been ripped from the game. Why don't we split up each image into a single file and load it into memory as and when we need it? The reason is because it is more computing-intensive to load multiple files. The easier way is to load a single image file that has the game sprites that you will be using and only selectively "draw" out the sprites that you require.

You can see that in the top row, there are multiple poses of Pac Man. In your games, it will be useful to have a sprite sheet which contains the multiple poses of your game characters.

sprite-sheet

Something that looks like this. With the new Flash CS6's ability to process sprite sheets, this will be a very handy sprite sheet which you can load once into memory, and then only display parts of the girl's animation which you need for the moment. Otherwise, you can always process them yourself and cut and slice them for putting into your movie clips.

If you are interested in the workflow of how to convert your movie clips into sprite sheets, please check out this post here. It contains a very detailed write up of how you can do your usual designs in Adobe Flash as a timeline animation, and then convert it out into a sprite sheet. Cool stuff. You can choose to generate the sprite sheet in JPEG, or various PNG formats. After you get the sprite sheet, you can incorporate it for any future use, like for the Starling framework.

But sometimes, not everyone is a great designer, or knows how to draw and animate the sprites. We may need some external help. So, how do we obtain these freely available sprite sheets? Good news is that developers and hobbyists all over the world have created wonderful sprite sheet generators, or ripped them off the classic games. Here, I've compiled the sprite sheet sites around the internet.

#1 - Charas Sprite Sheet Generator

Check it out here.

charas

Charas has got to be my best recommendation for the place where you can let your imagination go wild, and create your very own sprite sheets. The entire generator allows you to customize your character's Body, Face, Dress, Hairstyle or any other Items he/she may be carrying.

After generating, you can save it into a sprite sheet size that you require for your game, and export it as a jpg or png. Check it out. Also, with a bustling community of hobbyists who contribute to this, your imagination's the limit.

#2 - Spriters Resource

Check it out here.

My next recommendation would be the Spriters Resource website. It contains a huge library of ripped sprite sheets from classic games.

spriters resource

Besides using them to create your very own renditions of the classic games, you can of course always learn from these game designers on how to design your characters, or just pick them out, edit, and use them as your own.

super mario sprite sheet

It even contains your classic NES games like Super Mario. If you ever wanted to create a platform game yourself, why not use this as a starting template to get the poses right?

To be continued ... in Sprite Sheet (Part 2).

Flash Resources
Preloader FPS Display Sounds & Music
Keycodes Name Generator
Game Development Resources
Sprite Sheets

Flash Tutorial Links:
Play Games: HTML5 Tutorials:
gaming tools download on app store now!
Home | About Us | Contact Us
Powered by Make Flash Games. All Rights Reserved.
By Joseph Tan