One process that has survived in game development is the process of ‘blitting’. In simple game terms ‘blitting’ is where you combine two or more bitmap objects into a single object to increase performance. All those cool 2D games from the mid ’80s through to the mid ’90s (like StarCraft) used this technique. However, that is only half the story. Before you can ‘blit’ bitmap data you have to have some images to work with.
In most games you have the following: a scene (or background if you like) and numerous items (commonly referred to a sprites). In most cases sprites are animated, or at least consist of an animated sequence of images. These in turn are combined in to a ‘Sprite Sheet’ in which all of the various animations are combined in to a set of uniform entries.
Take the simple sprite sheet example below.
Here I have a basic 3D cube that I exported as a sequence of separate images and then recombined into a single sprite sheet (keeping the images in the order in which they were created).
Now the sprite sequence can be created in any graphical tool. I chose Blender3D as I’ve always fancied learning to work in 3D (and with the new Molehill features in a future version of Flash Player it made sense to get to grips). A lot of the 8bit style games are created in Photoshop by hand so you can be as creative as you want to be. One thing that is a pain is the final sprite sheet creation. Mainly because there aren’t that many decent tools available to do it automatically for you. So with that in mind I decided to create one.
This is an early build so while it does work, I’m still working on the feature set and UI / UX, but I wanted to post it up for those of you who are looking to create 2D games that leverage ‘blitting’ and sprite sheets who might find it useful.
[UPDATE]
I forgot to mention that it’s currently only been tested with PNG importing. I’ll test the rest and update the application once they have been tested.
[/UPDATE]
I’d really appreciate some feedback on how I can improve it (new features etc.) as this is only a few hours work hence the ‘alpha’ release.
Below is a brief video on how to use it (although it’s not that complex :p).
FlashGen.Com – Sprite Sheet Maker.
Features I do have on my list are:
- The ability to import a SWF and extract the frames from it
- Preview screen – so you can review your sprite animations before exporting
- Various tweaks and minor enhancements
- Bug fixes (a mandatory entry :p)
If you want to download and try it out, the AIR installer is on the main page as well as below.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.115″ useexpressinstall=”true” replaceId=”ssm” movie=”http://mercury.flashgen.com/pub/ssm/AIRInstallBadge.swf” width=”180″ height=”151″ targetclass=”flashmovie” fvars=”airversion=2.5; appname=FlashGen.Com – Sprite Sheet Maker; appurl=http://mercury.flashgen.com/pub/ssm/app/spritesheetmaker.air; image=http://mercury.flashgen.com/appicon.php?app_id=ssm”]
[/kml_flashembed]
This looks cool, Mike. I’ve been doing a lot with spritesheets on mobile games lately. This could come in handy.
Thanks Keith. It’s an early build but it does the job. I’ve got a few extra bits I want to get in over the holiday period and I made sure to include an updater so people shouldn’t have to worry about having the latest version :)
Wonderful. Thanks for this great tool. I was preparing a design document for preparing this same app for our artists to create sheets. I would like to share some features in that doc and hope that you also find those useful ones to integrate into your tool.
1. swf importing – ofcourse you have it in your list. But i wish it would be much better if we can import multiple source files as a combination of swf, png etc.
2. dynamic resizing – adjusting tile width and tile height inside the app so that sheet gets adjusted. ofcourse it wont look good if we try to assign larger sizes than source, but will work perfectly if source is swf.
3. ability to duplicate a tile and place it anywhere, we may need same tile as part of many animation sequences.
4. ability to preview, loop, goto and play inside of the app (may be beyond scope of this app, but will definitely help when we are stitching together sequences)
5. ability to reverse a sequence of tiles. this helps when we need to create reverse animations easily.
6. ability to flip tile sheets – for walk sequences where we need to flip from left to right
Just wanted to share my ideas. I was working on such an app and have a bigger original list ;) But thank you for the original app, that itself is very useful. Keep up the good work.
excellent! especially the ‘The ability to import a SWF and extract the frames from it’ would be a killer feature.
Here’s a similar app, you might wanne check for feature reference: http://zwoptexapp.com/flashversion
It makes a lot of sense (especially for pushing images to GPU) to have the possibility to constrain your sheet to power-of-2 dimensions.
Stripping the whitespace around the images would greatly reduce the size of the sheet.
Generating an descriptive xml alongside the sheet is also veryvery powerful, since you can then optimize the layout of the sheet and just define the order / offset / centerpoint / rotation in the xml file.
Will be checking on the updates!
Very cool tool, great work. I can obviously use this in Flash, but recently I’ve been delving into Android development and this comes in handy in that realm as well.
Juwal, Thanks for sharing some of your ideas. I like your suggestions and will look at incorporating as many as possible as I move forward with the app. especially the duplicate, flip and reverse.
I am already working on a preview panel so you will be able to loop the sheets to make sure the sequence is in the right order.
Derek, that is exactly the reason I created the app. I realised that while the majority of game developers will likely use it for Flash based games, it can also be used as part of the game development process for any OS – be that Android, iOS or something else.
Bart, thanks for the link and suggestions – I’ll have a look through those and add them to my list. I’m toying with the idea of exporting XML with the sheet in a fairly generic format. I’m also thinking about also exporting it so it can be used in Pushbutton Engine too (or for any other engine that makes sense :p)
I would like the option to have unconstrained sizes.
The “Export Sprite Sheet” button does not seem to be functioning (nothing happens, no dialog appears).
I am on a PC.
The “export sprite sheet” button isn’t working for me. It does nothing when I click, any ideas of what may be happening?
This is another application that converts a swf into a sprite sheet, it’s very powerfull:
http://fermmm.wordpress.com/2011/02/04/swf-spritesheet-creator/
if the “export sprite sheet†button isn’t working for you, try to add more columns. Let’s say 11 and then change it back to desired column count. This should fix export button and “flash-like” bug.
the export button isnt working for me either
I’m working on an update which fixes this and add a few more features. Hopefully it won’t be too long before I push it live.
Hi, First off, I’ve been using your sprite sheet maker for a few months now and it’s simply amazing. It saves me so much time when making game sprite sheets.
However I just updated adobe Air today and all of a sudden the images in your sprite sheet makes are given extra brightness thats not in the original images I give it. Other than that it’s main functions are working properly, it’s just somehow adding brightness in both the preview and the final exported sheet.
Any idea on how I would fix this issue?
Hi Chris, I’m sorry to hear the AIR update has impacted on your use of SpriteSheetMaker. I’m doing some updates to the SpriteSheetMaker and will look in to this issue (hopefully it is something I can resolve quickly).
I’ve just posted an update (I know it’s taken a while – apologies for that). It should auto update when you launch SSM. If not please let me know and I’ll sort it out (it worked for me but local testing is never a good measure).
The main bugs fixed in this version are related to the export buttons not activating – this should now be resolved.
Thanks
I like it but unfortunately it does not work for most of the sheets I need to create. I need to have more than 10 columns (17 to be precise) for the animations that I use. Its a shame that it locks at 10.
Cheers
Hi Steve, Oops, that was meant to be removed after testing. I’ve just updated SSM with a new version that doesn’t have that restriction
The “Export Sprite Sheet” button and preview buttons don’t work for me. I can add images easily and sort there with no problem but can’t export. Windows Vista.
Apparently my images were too big. I scaled them down and now everything works perfectly. Thanks.
Hi Demi, I’m glad you’ve sorted out your issue. May I enquire how big the images you were initially trying to export were? As it still sounds like there is a bug in SSM.
Thanks
I have a problem on extracting sprites from a sprite sheet, do I need to manually cut them? I am really having a hard time importing an image with an irregular sprite sizes. :(
hi,
after i export a spritesheet, and want to make a new one from another series of images. i have to close the app and restart again. the previous frames wont go and form a fresh spritesheets with only the second series of images.
am i missing something?
thanks
manodzit
Hi manodzit, yes it’s something I should have fixed a while ago. I’ll try and fix it this weekend and post a new update once it is done.
Hello Mr. Mike Jones,
I have two questions for you on the Sprite Sheet Maker.
1. I was wondering if you ever implemented in the ability to import in swf’s?
and
2. Does the Sprite Sheet Maker retain position information when exporting files of different sizes? Meaning, If I have a character that emits a fireball does the placement of where his feet are stay the same from when he was just standing still or does the addition of the fireball shift/move the placement of him whereby making me go back and have to tweak the placement?
Any info will help,
Thank you
I noticed a size issue as well. I tried importing 72 512×512 .jpg files. The export button didn’t work. If I used fewer images it started working.
Hi,
I have been trying to run the installer but nothign happens, it asks me to try again every time. is there something i need to set in IE or firefox for it to work? I have the latest Flash installed.
Appreciate any help becuase your tool looks like it will do exactly what i need!