ImageMagick实现图集图片拆分

一、起因

有一个序列帧动画的图集和一个TexturePacker的json描述文件,需要将每一帧图片从图集中拆分下来。

二、下载安装ImageMagick

先去ImageMagick官网下载对应系统中的版本安装

三、使用

打开图集的json文件,能发现有类似的frames

{"frames": [
{
    "filename": "chicken_1_0.png",
    "frame": {"x":744,"y":79,"w":75,"h":93},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":11,"y":3,"w":75,"h":93},
    "sourceSize": {"w":99,"h":99}
}
...
],
}

从信息中可以读到单个图片信息:

  • 图片名:chicken_1_0.png
  • 在图集中的位置大小: {“x”:744,”y”:79,”w”:75,”h”:93},
  • 是否旋转90度(rotated): 是
  • 单张图片中的位置大小: {“x”:11,”y”:3,”w”:75,”h”:93},
  • 单张图片的原始尺寸: {“w”:99,”h”:99}

使用ImageMagick命令直接将子图片裁剪出来,放到一张99x99的新图片中,做-90度旋转和11,3的位移就可以了。

magick chicken.png -crop 93x75+744+79 -rotate -90 -background none -gravity center -geometry +3+11 -extent 99x99 chicken_1_0.png

参数解析:

  • 源图片文件:chicken.png
  • -crop:裁剪。参数格式为: 宽x长{+-x}{+-y}。参数取frame值93x75+744,因为旋转-90度,所以,这里长和宽是对调的。
  • -rotate:旋转,顺时针为正,逆时针为负。rotated为true所以旋转-90度
  • -background:填充背景色,默认为白色,这里使用none不填充,png的话就是纯透明色
  • -gravity:参照点,会影响通过geometry、annotate、region等来定义坐标点,center为中心点
  • -geometry:移动,格式{+-x}{+-y},将图片移动(x,y)个像素。取spriteSourceSize的(x、y)值国为旋转了-90度,所以x、y值对调(+3+11)
  • -extent:填充,将图片填充到多大。宽x高。取sourceSize的w、h值(99x99)
  • 最后输出文件:chicken_1_0.png

注:默认是按参数的顺序执行的,如果参数顺序反了输出的结果可能不是你想要的了

0%