I need a simple way to make sprite sheets

#1 I use Flash CS4. I don't know any hard or fast rules. But I create a grid of squares that each one of my sprite images will fit into. I also make the size of each square a number that's divisible by four. It may not be necessary but it works for me. I then find the center of each square by dragging measurement lines from the ruler tool till I create cross hairs within all my squares. Then I save the project as a template so I don't have to repeat those steps for every sprite sheet I create. Every Sprite I create has a center point if the centers don't match up I change the center point of the movieclip. This way I can quickly drag the images center point to the cross hairs of my grid and everything will remain lined up. I feel your pain cause I search the internet for hours looking for a tutorial or tool that would make this process simpler. I hope this works for you. If anyone has any other solutions please share.

#2 Nathan,

Try SpriteWorks from EnvyGames and see if it meets your needs. It is for those needing to generate 2D sprites 0r sheets from 3D animations.

http://www.envygames.com/content/?p=116

Good Luck!
Jeff

#3 Hi Nathan,

I am having the same issue too. I am unable to do this with Photoshop CS4 Extended so my next step is to use GIMP.

So far I have found this webpage:
Quickman's Quick The GIMP tutorial
http://www.sprites-inc.co.uk/forum/showthread.php?t=1430

Let me know if this helped?

Where you able to get it to all work? If you did what did you do to over come this issue?

Cheers
-=Jesse=-

#4 ImageMagick has the facilities I need for now to make spritesheets (cutting and gluing together, modifying backgrounds, resizing, adding/removing borders). You'll probably want to make wrapper scripts for common operations for your work.

#5 Thanks for the reply Ronny,

I found glueit1.06 to be the tool for me as all my renders are coming out of 3Ds Max v9.

Info on GlueIt here:
http://www.garagegames.com/community/forums/viewthread/29466

I can see the need to do some editing too. Do you have any recommendation for tutorials on making & editing sprite sheets with ImageMagick? Or can you share some of your making & editing sprite sheets workflow on how you use it?

Thanks
-=Jesse=-

#6 There are some examples in the ImageMagick documents. The montage command is useful to create the sheets:
www.imagemagick.org/Usage/montage/

Example usage:

montage *.png -mode concatenate -tile 4x4 -background transparent sheet_%d.png

This reads the images in order (alphanumeric, not plain alpha - 1 comes before 10), puts them in a sheet four images wide and tall, no borders or margins, outputting to "sheet_N.png", where N is the sheet number. For each 16 images it processes, it creates a new sheet (counting from zero) and preserves transparency.

The "convert" command is possible to use to go the other way, slicing up images:
www.imagemagick.org/Usage/crop/#crop_tile

#7 Thanks Ronny for all the info :-)

#8 If you're creating them by hand, be sure to enable the "snap to grid" or "snap to guides" or similar function in your graphics app - that will do away with those little "off by two pixels" problems.

#9 Good Advice Sherman, :-)

Yep, I'm doing the sprite sheets by hand in Photoshop CS4 Extended
. Thanks for the tip on setting up the "guides".

Do you all know how to import multiple alphas form .tga or .png files? I seem to only get the 1st alpha and thats it?

Steps:
1. Launch Photoshop CS4 Extended
2. Set document size to 256X512
3. Set up a grid 32X32 pixles
4. Open Frames 1 to 35 of animation
5. place frames in order on sprite sheets
Note: open "Channels Panel" observe only the 1st frame has an alpha

#10 And my work-around is to do the same steps for the alpha by opening each frame in Photoshop and going in selecting just the alpha layer. Then copy and pasting it into new photoshop document to make the sprite sheet's alpha. Once the alpha sprite sheet is done copy and paste it into the original sprite sheet document.

This sounds like a lot of steps and it is...

#11 There is a windows tool (.NET) that can be found online that you can use to merge single frame images (png) into a spritesheet. It is called 'Sprite strip composer', It was made my someone for the Microsoft XNA framework.

It however has one flaw .. you can not specify the number of columns that you want to end up with pn your sprote sheet.

There is also an online solution for creating sprite sheets. http://www.makeyourflashgame.com has an sprite sheet generation tool in its workspace. Using this tool, you can create a sprite sheet from single frame images you upload.

#12 Mas, Thanks for the info :-)

I ended up using a free tool called GluIt. It works great! :-)

GluIt's website is - http://sysimage.250free.com/

#13 Hm.. try to use software for creating sprite animation.
As a result you will get a sprite sheet.
Check out http://spritetools.com/

#14 Those 2 are free:

http://draeton.github.io/stitches/
http://renderhjs.net/shoebox/