Convert sprite sheet to gif animation

Question

The frames go in the order left to right, top to bottom, the animations go sequentially, all frames are of the same size.

1234
5612
345

I need a command that would take frame size, coordinates of the first frame and frame count as input and give an animated gif as output. Preferably without generating intermediate files.

I could do this using a programming language, but isn't there a way to do it easier with a command line tool like ImageMagick or GraphicsMagick? It feels to me like it should be a common task, yet I've found only questions about how to convert gif to sprite sheet, not the other way around.

score 4 · Answer 1 · answered May 08 '19 at 12:56

4

With ImageMagick you would extract each frame sub-image with -crop WxH +adjoin +repage, and then animate the frames together.

For example, given a sprite of 300x289 sub-images like the following...

convert sprite.png -crop 300x289 +adjoin +repage -adjoin -loop 0 -delay 1 output.gif

See Animation Basics, and Animation Modifications for other examples.

answered May 08 '19 at 12:56

emcconville

23,800
4
50
66

Thanks. But I have [issues with transperency](https://stackoverflow.com/questions/14676119/imagemagick-and-transparent-background-for-animated-gif) with this answer, using `-dispose` does not help. Also it's still not clear to me how to specify the starting frame position and the number of frames to extract multiple animations from the same sprite sheet. – user May 08 '19 at 14:43
Try `-layers optimize` – emcconville May 08 '19 at 14:46
The issue with transparency has been resolved by specifying `-dispose` before the input file (`-layers optimize` doesn't work though). The other questions are still open. – user May 08 '19 at 14:51

GeeMack · Accepted Answer · 2019-05-09T04:53:54.490

If you set variables in your shell for the width and height of an individual sprite, the X and Y offsets for the starting sprite, and the number of sprites to use, an ImageMagick command like this will extract the requested sprites from the sheet and turn them into an animated GIF.

This is in Windows CMD syntax...

set WIDE=100
set HIGH=100

set XCOORD=100
set YCOORD=300

set FRAMES=5

convert spritesheet.png ^
   -set option:distort:viewport %[fx:%FRAMES%*%WIDE%]x%HIGH% ^
   -set option:slider %[fx:%YCOORD%*(w/%WIDE%)+%XCOORD%] ^
   -crop %WIDE%x%HIGH% +append +repage ^
   -distort affine "%[slider],0 0,0" ^
   -crop %WIDE%x%HIGH% +repage ^
   -set delay 50 -loop 0 result.gif

The variables %WIDE% and %HIGH% are the dimensions of an individual sprite.

The variables %XCOORD% and %YCOORD% are the offsets of the first sprite you need from left and top of the sheet.

The variable %FRAMES% is the total number of sprites to extract.

The command starts by reading the input sheet. It uses the input image dimensions and your provided variables to define some settings for IM to use later. First is the dimensions of the viewport needed to isolate the requested number of sprites. Second, it calculates the offset where the first sprite will be after the sheet has been cropped into single sprites and appended into one horizontal row.

Next it "-crop"s the image into individual sprites and "+append"s them into a single horizontal row.

Then it uses "-distort affine" to slide the whole row of sprites the required distance – "%[slider]" – to the left, some amount out of the viewport if needed, and reduces the viewport to just show the proper number of sprites.

After that it crops that image into individual sprites again, sets a delay for the animation, and writes the output GIF.

For a Windows BAT script you'll need to double the percent signs "%%" on the IM variables and FX expressions, but not the shell variables like %WIDE%.

For a *nix shell or script you'll need to set those variables and access them differently. Also you'll need to replace the continued line carets "^" with backslashes "\".

For ImageMagick version 7 start the command with "magick" instead of "convert".

Before writing the output GIF you'll want to set your required dispose method, the delay, and probably "-loop 0".

Thank you very much. This turned out to be more complex than I expected, but you've made it! Although `%` in `%[` have to be escaped as `%%` for it to work. And I've added `-dispose previous` before `spritesheet.png` to fix the transparency issue. — user, May 09 '19 at 05:04

Convert sprite sheet to gif animation

2 Answers2