将 sprite sheet 转换为 gif 动画

Question

帧按从左到右、从上到下的顺序排列，动画按顺序排列，所有帧的大小相同。

1234
5612
345

我需要一个命令，它将帧大小、第一帧的坐标和帧数作为输入，并给出动画 gif 作为输出。最好不生成中间文件。

我可以使用编程语言来完成此操作，但有没有一种方法可以使用 ImageMagick 或 GraphicsMagick 等命令行工具更轻松地完成此操作？我觉得这应该是一项常见的任务，但我发现只有关于如何将 gif 转换为 sprite sheet 的问题，而不是相反的问题。

Answer 1

使用 ImageMagick，您可以使用 -crop WxH +adjoin +repage 提取每个帧 sub-image，然后将这些帧一起制作动画。

例如，给定 300x289 sub-image 个精灵，如下所示...

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

有关其他示例，请参阅 Animation Basics, and Animation Modifications。

Answer 2

如果您在 shell 中为单个精灵的宽度和高度、起始精灵的 X 和 Y 偏移量以及要使用的精灵数量设置变量，像这样的 ImageMagick 命令将从 sheet 中提取请求的精灵并将它们转换为动画 GIF。

这是 Windows CMD 语法...

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

变量 %WIDE% 和 %HIGH% 是单个精灵的尺寸。

变量 %XCOORD% 和 %YCOORD% 是您需要的第一个精灵相对于 sheet.

左侧和顶部的偏移量

变量 %FRAMES% 是要提取的精灵总数。

命令从读取输入 sheet 开始。它使用输入图像尺寸和您提供的变量来定义一些设置供 IM 稍后使用。首先是隔离所请求数量的精灵所需的视口尺寸。其次，它计算第一个精灵在之后 sheet 被裁剪成单个精灵并附加到一个水平行中的偏移量。

接下来“-crop"s the image into individual sprites and "+append”将它们合并成一个水平行。

然后它使用“-distort affine”将整行 sprite 向左滑动所需的距离——“%[slider]”——如果需要的话，一些量超出视口，并将视口缩小到刚好显示正确数量的精灵。

之后，它再次将该图像裁剪成单独的精灵，为动画设置延迟，并写入输出 GIF。

对于 Windows BAT 脚本，您需要将 IM 变量和 FX 表达式上的百分号“%%”加倍，而不是像 %WIDE% 这样的 shell 变量。

对于 *nix shell 或脚本，您需要设置这些变量并以不同方式访问它们。此外，您还需要将续行插入符“^”替换为反斜杠“\”。

对于 ImageMagick 版本 7，使用 "magick" 而不是 "convert" 启动命令。

在编写输出 GIF 之前，您需要设置所需的处理方法、延迟，可能还有“-loop 0”。

将 sprite sheet 转换为 gif 动画

Convert sprite sheet to gif animation

imagemagick

animated-gif

graphicsmagick

sprite-sheet