I was SOOOO tired of doing sprite sheets manually. So i got fed up and wrote this library. It's neat. I'll do a full/better guide in the coming days, but this is here now to help the Ludum Dare dev's who might need some extra help!
12 Steps to setup FireSprite, make a sprite atlas, and have it pop out a sprite
1. Download FireSprite.js from FireSprite on github
2. Put FireSprite.js somewhere in your HTML5 app/websites directory
3. Add FireSprite.js to your index.html file
<script type="text/javascript" charset="UTF-8" src="FireSprite.js"></script>
Use that line if FireSprite is in the same folder as index.html, if not adjust the
src="path/FireSprite.js" part
4. Use Texture Packer to make a spritesheet, make sure to set your Output Data Format
to "JSON(Array)"
5. Move your spritesheet and json file into your HTML5 app/websites directory
6. Add the json file to your index.html in a very similar way to the FireSprite.js file
<script type="text/javascript" charset="UTF-8" src="SpriteSheet.json"></script>
7. Open up your SpriteSheet.json file, the first line looks like this
{"frames": [
You need to make it look like this
var spriteSheetName= {"frames": [
where "spriteSheetName" is a UNIQUE identifier for this specific sprite sheet (if its just
enemies, name it "enemy", ect)
8. SAVE it.
9. Make a variable to hold the atlas in your games JS file, where "SpriteSheetAtlas" is a
unique name for the atlas
var SpriteSheetAtlas;
10. Initialize the atlas (yours might have "SpriteSheetAtlas" or "spriteSheetName"
named different things)
SpriteSheetAtlas= new FireSpriteAtlas(spriteSheetName);
11. Make a sprite! "thisSprite" will be any variable name you want for that specific sprite,
and keyname.png is whatever name the sprite had before it was packed. You can
open your SpriteSheet.json file to find out the keynames if you forget!
var thisSprite = SpriteSheetAtlas.createSprite("keyname.png");
12. Draw it! YourCanvasContext is the context you want it drawn to, and you just pass in
the X and Y values to draw it at (drawX, and drawY)
thisSprite.draw(YourCanvasContext, drawX, drawY);
If you need to scale the sprite, just call
thisSprite.scale(2.0);
That sets the scale to whatever number you pass in, instead of 2.0! And you only need to call it once!
That's about it. Like I said, check it out on GitHub!
Also check out TexturePacker if you haven't!
