./Featured

Sprite Sheet Maker (Preview)

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.

A simple example of a sprite sheet

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.

Get Adobe Flash player

Discussion

32 comments for “Sprite Sheet Maker (Preview)”

  1. This looks cool, Mike. I’ve been doing a lot with spritesheets on mobile games lately. This could come in handy.

    Posted by Keith Peters | December 21, 2010, 17:48
  2. 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 :)

    Posted by FlashGen | December 21, 2010, 20:09
  3. 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.

    Posted by Juwal Bose | December 22, 2010, 08:00
  4. 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!

    Posted by bart [crookedspoon] | December 22, 2010, 10:51
  5. 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.

    Posted by derek knox | December 23, 2010, 08:26
  6. 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.

    Posted by Mike Jones | December 30, 2010, 08:55
  7. 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.

    Posted by Mike Jones | December 30, 2010, 08:58
  8. 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)

    Posted by Mike Jones | December 30, 2010, 09:02
  9. […] Another tool you might be interested in is Mike Jones’ Sprite Sheet Maker, which is more geared to making sprite sheets from a series of separate image files. Similar […]

    Posted by SWFSheet – create sprite sheets from SWFs | BIT-101 | January 11, 2011, 04:56
  10. I would like the option to have unconstrained sizes.

    Posted by Blank | January 21, 2011, 12:28
  11. The “Export Sprite Sheet” button does not seem to be functioning (nothing happens, no dialog appears).
    I am on a PC.

    Posted by dave | February 2, 2011, 01:30
  12. […] handy class for creating graphics from sprite sheets http://www.bensilvis.com/?p=317 Mike Jones’ Sprite Sheet Maker AIR App is a handy way of creating your sprite […]

    Posted by AS3 Code Libraries (APIs) | bytecoderz blog | February 2, 2011, 09:48
  13. The “export sprite sheet” button isn’t working for me. It does nothing when I click, any ideas of what may be happening?

    Posted by Diego Sato | February 4, 2011, 20:43
  14. 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/

    Posted by fermmm | February 12, 2011, 21:06
  15. 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.

    Posted by metju | May 10, 2011, 22:41
  16. the export button isnt working for me either

    Posted by storm | June 10, 2011, 10:09
  17. 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.

    Posted by Mike Jones | June 10, 2011, 19:45
  18. 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?

    Posted by Chris D. | June 18, 2011, 01:42
  19. 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).

    Posted by Mike Jones | June 18, 2011, 07:53
  20. 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

    Posted by FlashGen | July 3, 2011, 22:58
  21. 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

    Posted by Steve | July 6, 2011, 02:19
  22. 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

    Posted by Mike Jones | July 6, 2011, 11:34
  23. […] If you already have my SpriteSheetMaker app installed you won’t have to do anything as it will automatically install as soon as I push it live to the server (which may have already happened by the time you read this post). As the version info in the status bar indicates, this is still an Alpha build and as such treat any new feature as a work in progress (although I’ve not come across any serious bugs with this update). If you’ve not tried out my SpriteSheetMaker application you can read more about it, (and download a copy), from here. […]

    Posted by SpriteSheetMaker Updated – New Sprite Sheet Preview | .: Blog.FlashGen.Com :: Mike Jones - Flash Platform Evangelist :. | July 12, 2011, 09:31
  24. 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.

    Posted by Demi | July 20, 2011, 14:51
  25. Apparently my images were too big. I scaled them down and now everything works perfectly. Thanks.

    Posted by Demi | July 20, 2011, 16:54
  26. 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

    Posted by Mike Jones | July 20, 2011, 17:43
  27. 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. :(

    Posted by Sprite Sheet Maker | July 29, 2011, 05:23
  28. 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

    Posted by manodzit | October 19, 2011, 10:47
  29. 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.

    Posted by Mike Jones | October 21, 2011, 08:49
  30. 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

    Posted by spritebrite | December 16, 2011, 23:21
  31. 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.

    Posted by Brad | April 16, 2012, 19:09
  32. 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!

    Posted by Wrecker | May 25, 2012, 09:51

Post a comment