Create a spites file from multiple gifs

[deathangel908]

Hi guys. I want to create sprites file for my site from multiple gifs. Here's my stackoverflow question.
So lets imagine I have 3 gif files: ++.
I wanna create single image sprites file. Basically I can do it with

Code: Select all

montage ./*.gif  -geometry +0+0 -alpha On -background "rgba(0, 0, 0, 0.0)" -quality 100

and get such result:

So here I have 2 issues:

• I want to have single gif file per row or column. This I can easily create animation. With montage I can only specify fixed `tile` count, but gif files have different parts count. For example yellow smile has 36 images, green one 28 and red one only 6. I think I resolve this issues creating png sprite per gif file with `x1 tile` and then concatenate them into a single file. But I'd like to now if it's possible with single operation
• The most important to me. As you can see smileys parts are not fully drawn. The only changed part is drawn. I want to have a full image on each partial. As I already found it's related to disposal layers method.
  I tried created sprite with all montage -list dispose parameters
  • montage -dispose None
  • montage -dispose background
  • montage -dispose None
  • montage -dispose Previous
  The result always stills the same, like parameters doesn't affect at all. It's the image I attached above. I also tried to convert gif first. Well for some images it works. For example :
  • + "montage" = , but +"convert -layers dispose" + "montage" = . Which is perfectly ok!
  • The same iteration above applying to another smile lacks frames
    • + "montage" =.
    • + "convert -layers dispose" = .
    • +"convert -layers dispose" + "montage" =

    Code: Select all

    : identify starting.gif 
    starting.gif[0] GIF 28x20 28x20+0+0 8-bit sRGB 64c 4.66KB 0.000u 0:00.009
    starting.gif[1] GIF 9x6 28x20+11+5 8-bit sRGB 64c 4.66KB 0.000u 0:00.009
    starting.gif[2] GIF 9x6 28x20+11+5 8-bit sRGB 64c 4.66KB 0.000u 0:00.009
    starting.gif[3] GIF 9x6 28x20+11+5 8-bit sRGB 64c 4.66KB 0.010u 0:00.009
    starting.gif[4] GIF 9x6 28x20+11+5 8-bit sRGB 64c 4.66KB 0.010u 0:00.009
    starting.gif[5] GIF 9x12 28x20+11+5 8-bit sRGB 64c 4.66KB 0.010u 0:00.009
    starting.gif[6] GIF 28x20 28x20+0+0 8-bit sRGB 64c 4.66KB 0.010u 0:00.009
    starting.gif[7] GIF 28x18 28x20+0+1 8-bit sRGB 64c 4.66KB 0.010u 0:00.009
    starting.gif[8] GIF 28x18 28x20+0+1 8-bit sRGB 64c 4.66KB 0.010u 0:00.009
    starting.gif[9] GIF 28x18 28x20+0+1 8-bit sRGB 64c 4.66KB 0.010u 0:00.009
    starting.gif[10] GIF 28x18 28x20+0+1 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[11] GIF 28x18 28x20+0+1 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[12] GIF 28x18 28x20+0+2 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[13] GIF 28x18 28x20+0+0 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[14] GIF 28x18 28x20+0+2 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[15] GIF 28x18 28x20+0+0 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[16] GIF 28x18 28x20+0+2 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[17] GIF 28x18 28x20+0+0 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[18] GIF 28x18 28x20+0+2 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[19] GIF 28x18 28x20+0+0 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[20] GIF 28x18 28x20+0+1 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[21] GIF 28x18 28x20+0+1 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[22] GIF 28x18 28x20+0+1 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[23] GIF 28x18 28x20+0+1 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[24] GIF 28x18 28x20+0+1 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    starting.gif[25] GIF 11x11 28x20+10+6 8-bit sRGB 64c 4.66KB 0.010u 0:00.000
    

    Code: Select all

    : identify converted-layer-dispose.gif 
    converted-layer-dispose.gif[0] GIF 28x20 28x20+0+0 8-bit sRGB 64c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[1] GIF 28x20 28x20+0+0 8-bit sRGB 64c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[2] GIF 28x20 28x20+0+0 8-bit sRGB 64c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[3] GIF 28x20 28x20+0+0 8-bit sRGB 64c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[4] GIF 28x20 28x20+0+0 8-bit sRGB 64c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[5] GIF 28x20 28x20+0+0 8-bit sRGB 64c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[6] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[7] GIF 28x20 28x20+0+0 8-bit sRGB 64c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[8] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[9] GIF 28x20 28x20+0+0 8-bit sRGB 64c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[10] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[11] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[12] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[13] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[14] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[15] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[16] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[17] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[18] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[19] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[20] GIF 28x20 28x20+0+0 8-bit sRGB 64c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[21] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[22] GIF 28x20 28x20+0+0 8-bit sRGB 64c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[23] GIF 28x20 28x20+0+0 8-bit sRGB 2c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[24] GIF 28x20 28x20+0+0 8-bit sRGB 64c 5.61KB 0.000u 0:00.000
    converted-layer-dispose.gif[25] GIF 28x20 28x20+0+0 8-bit sRGB 64c 5.61KB 0.000u 0:00.000
    

[GeeMack]

Hi guys. I want to create sprites file for my site from multiple gifs. Here's my stackoverflow question.

Please always provide the version of ImageMagick you're using and let us know what OS you're working on. Those can be very important to steering you toward the correct solution.

It's a bit difficult to understand exactly what you're trying to do here, but this command (I'm using ImageMagick 6.9.3-9 Q16 x64 on Windows 7 64) will make a single PNG image with three horizontal rows of individual images, each row made from one of your yellow, green, or red original GIF files...

Code: Select all

convert -background none ^
   ( smilie_yellow.gif -coalesce +append ) ^
   ( smilie_green.gif -coalesce +append ) ^
   ( smilie_red.gif -coalesce +append ) ^
   -append -flatten 3_smilies.png

If you're on a *nix system you'll probably need to make those continued-line characters into backslashes "\" instead of carets "^", and you'll need to escape all the parentheses with backslashes like "\(" and "\)".

Each row of the finished PNG file has all its parts divided into the same width, but the parts in all three rows are different widths than those in the other rows, so whatever sort of operation you use to break them back apart will have to use different calculations for each color of smilie.

[deathangel908]

Code: Select all

convert -background none ^
   ( smilie_yellow.gif -coalesce +append ) ^
   ( smilie_green.gif -coalesce +append ) ^
   ( smilie_red.gif -coalesce +append ) ^
   -append -flatten 3_smilies.png

Oh man, thank you so much, that's exactly what I've been looking for. A gif per line and each frame of gif is a full image.

The question is really hard to explain though, I will end up with something like this but with multiple gifs for 1 png.