Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411275 Posts in 69323 Topics- by 58380 Members - Latest Member: bob1029

March 28, 2024, 07:42:46 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityTownhallForum IssuesArchived subforums (read only)TutorialsMac/Linux: animated GIFs to sprite strips, add/remove PINK DEATH, and more
Pages: [1]
Print
Author Topic: Mac/Linux: animated GIFs to sprite strips, add/remove PINK DEATH, and more  (Read 21404 times)
jjs
Level 0
***


Lean like a Chozo!


View Profile
« on: November 02, 2009, 06:06:45 AM »

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.    Gentleman


Shocked 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.


 Pixel 0F  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

--> 

 Pixel 0F  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<'



 Pixel 0F  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




Pixel 0F Remove Pink Death from an animated GIF:

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

-->

 Pixel 0F 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.


 Pixel 0F  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.



Pixel 0F  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

-->

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

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


          |
          |
          V

« Last Edit: November 02, 2009, 06:21:04 AM by jjs » Logged
partymetroid
Level 1
*



View Profile
« Reply #1 on: November 24, 2009, 02:19:25 PM »

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

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

... maybe someone could write one for Assemblee? Grin
Logged
r.kachowski
Level 5
*****

and certainly no love below


View Profile WWW
« Reply #2 on: November 28, 2009, 11:50:00 AM »

this is great!

I've used these commands a lot in the past few days, thanks!
Logged
r.kachowski
Level 5
*****

and certainly no love below


View Profile WWW
« Reply #3 on: December 10, 2009, 09:13:54 AM »

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
Logged
Slash - Santiago Zapata
The White Knight
Level 4
*


Java/Javascript Game Dev


View Profile WWW
« Reply #4 on: December 11, 2014, 12:59:37 PM »

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
Logged

Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic