next »

[jjs]

In the Assemblee compo forum, Zaratustra pointed out some tools for Windows to convert animated GIFs to sprite sheets.

Here's some love for Mac and Linux people.   

Always keep a backup directory of your source images.  These commands won't poop on your source images, but a typo might!


Thanks to mr. podunkian for letting me use this animation for the tutorial:

  (If you're following along at home, the frames in this image are 64x96, not 32x32 like in the examples).

If you're on Linux or Mac, and have ImageMagick installed, you can open up a terminal and type the following commands.


   Animated GIF --> PNG sprite strip:

montage input.gif -tile x1 -geometry '1x1+0+0<' -alpha On -background "rgba(0,0,0,0.0)" -quality 100  output.png

--> 

   All animated GIFs in the current directory --> sprite strips:    (type it all in one line)

for x in *.gif ; do montage "$x".gif -tile x1 -geometry '1x1+0+0<' -alpha On -background "rgba(0,0,0,0.0)" -quality 100  "$(basename $x .gif)-strip".png ; done

This will batch convert all of your foo.gif into sprite strips names foo-strip.png

-->
anim01.gif                                                               anim01-strip.png
--> 
anim02.gif                                                               anim02-strip.png
-->
lolfuzz.gif                                                               lolfuzz-strip.png

Note that there will be zero spacing between the frames.  To add a 1-pixel border between them, change the geometry option to read -geometry '1x1+1+1<'



   Remove Pink Death (#FF00FF)

convert input.png -transparent "rgb(255,0,255)" -alpha On -background "rgba(0,0,0,0.0)" -quality 100 output.png



          |
          |
          V




Remove Pink Death from an animated GIF:

convert input.gif -transparent "rgb(255, 0, 255)" output.gif

-->

  Add Pink Death:

convert input.png -background "rgb(255,0,255)" -alpha Background -layers flatten -quality 100 output.png


          |
          |
          V



If the source image has any semi-transparent pixels, then this will look bad.


   Sprite strip --> animation test  (GIF)

convert input-strip.png -crop 32x32 +repage -set dispose background -loop 0 -set delay 6 output-test.gif

-->


Change the 32x32 after crop to match the dimensions of your frames, and change the delay 6 to be whatever you want it to be.  The delay is in 100ths of a second, so 6 is 16.6 fps, 5 is 20 fps, 4 is 25 fps, 3 is 33.3 fps, 2 is 50 fps, and 1 is 100 fps.



  PINK DEATH sprite strip --> TRANSPARENT animation test

convert pink-death-strip.png -transparent "rgb(255,0,255)" -alpha On -background "rgb(0,0,0,0.0)" -crop 32x32 +repage -set dispose background -loop 0 -set delay 6 awesome-test.gif

-->

   Individual frames (frame00.png frame01.png, ...)  --> sprite sheet:

convert frame??.png +append -quality 100 output-sheet.png


          |
          |
          V

[partymetroid]

Wow, NICE!  I'm sure that this will especially be useful for people using the likes of flixel and FlashPunk.

I'm sure that this would also be a good base for using ImageMagick in web scripts!

... maybe someone could write one for Assemblee?

[r.kachowski]

this is great!

I've used these commands a lot in the past few days, thanks!

[r.kachowski]

Could you perhaps add the command to remove spacing from a tileset?

i.e. i have a .png of tiles with a 1px space between them on the x and y axis and I wish to get rid of the space

I can't decipher the code that the imagemagick documentation is written in

[Slash - Santiago Zapata]

This may be useful if your animated gif is combined for blank space, use it before the other command:

convert -layers dispose optimized.gif plain.gif