简介图集拆分工具是一款面向白鹭引擎Egret游戏开发者的实用辅助软件用于将SpriteSheet图集还原为独立图像文件解决图集统一格式下难以单独编辑、替换或优化内存的问题。资源包共22个文件约503KB以C#源码与工程配置为主包含6个cs源文件、2个resx窗体资源、1个csproj项目文件以及编译产物exe、pdb和Newtonsoft.Json等dll依赖另有xml、settings等配置项构成基于Windows Forms的完整可编译工程。已有1709人学习下载。读者可获取主窗体界面与事件处理逻辑、程序入口、JSON图集解析与图像切割实现并借助项目文件直接编译运行或二次扩展如增加批量处理、预览与性能优化适合需要管理游戏资源、维护图集替换流程的开发者参考。1. 图集拆分工具从一张大图里把几百个小图标捞出来美术丢过来一张 4096×4096 的 PNG说“这里面是全部 UI 图标你切一下”。你打开一看几百个图标挤在一起间距还不统一有的带透明边有的互相贴边。手动用选区工具一个个框框到第 30 个眼睛就开始花框错一个后面全乱。图集拆分工具就是干这件事的把一张打包好的精灵图sprite sheet / atlas自动切成独立小图并输出每张图的坐标、尺寸、名字。它解决的不是“切图”这个动作而是“批量、可复现、带元数据地切图”。适合谁做游戏 UI 还原的前端、做 H5 动画的切图仔、做数据集预处理的人——只要你手里有一张“多合一”的图需要拆成“一图一文件”这篇就是给你写的。下面按“怎么判断该用哪种拆法 → 怎么跑通 → 参数怎么调 → 坑在哪”推一遍。2. 拆图之前先选路线连通域、网格还是透明通道2.1 三种主流拆法分别适合什么图图集拆分不是一种算法通吃。拿到图先看三个特征背景是否纯色、图标之间是否有固定间距、是否带 alpha 通道。根据这三个特征常见做法分三类。第一类是连通域法。把背景色抠掉剩下的前景像素做连通域标记每个连通域就是一个图标。它适合背景干净、图标之间不粘连的图。OpenCV 的connectedComponentsWithStats就是干这个的能直接给出每个连通域的外接矩形。缺点是图标之间只要有一个像素相连两个图标就会被合并成一个。第二类是网格切分法。图集本身是按固定格子排的比如每格 64×64行列对齐。这种直接用行列索引算坐标速度最快、结果最稳。缺点是格子尺寸不统一时直接翻车。第三类是透明通道法。PNG 带 alpha背景全透明前景不透明。直接按 alpha 阈值二值化再走连通域。它比纯色背景法稳因为不依赖背景颜色判断但要求导出时背景确实是透明的。我一般会先跑一个“诊断脚本”统计图片的 alpha 分布和前景连通域数量再决定用哪条路线。下面这段代码就是诊断用的。import cv2 import numpy as np img cv2.imread(atlas.png, cv2.IMREAD_UNCHANGED) print(shape:, img.shape) # (h, w, c) if img.shape[2] 4: alpha img[:, :, 3] # 统计透明像素占比 transparent_ratio np.mean(alpha 10) print(transparent ratio:, round(transparent_ratio, 3)) # 用 alpha 做前景掩码 mask (alpha 10).astype(np.uint8) * 255 else: # 无 alpha用背景色做掩码这里假设左上角是背景色 bg img[0, 0] diff np.abs(img.astype(int) - bg.astype(int)).sum(axis2) mask (diff 30).astype(np.uint8) * 255 num, labels, stats, centroids cv2.connectedComponentsWithStats(mask, connectivity8) print(components (excluding bg):, num - 1)逻辑说明先判断有没有 alpha 通道。有 alpha 就用 alpha10 当掩码这是最稳的没有 alpha 就取左上角像素当背景色算每个像素和背景色的差异差异大于 30 的算前景。connectedComponentsWithStats返回的stats里每一行是[x, y, w, h, area]area是连通域像素数后面过滤噪点要用。参数说明connectivity8表示八邻域比四邻域更容易把斜对角相连的像素算成一个域如果你发现图标被拆碎了改成 4 试试。alpha 10这个阈值不要设成 0因为很多导出工具会在透明区域留一点点噪声 alpha。2.2 连通域拆分的完整可跑脚本诊断完确认走连通域路线下面这段是完整拆分脚本。它做了四件事生成掩码、连通域标记、按面积过滤、按外接矩形裁剪并保存。import cv2 import numpy as np import os def split_atlas(src, out_dir, min_area64, pad2, alpha_thr10): os.makedirs(out_dir, exist_okTrue) img cv2.imread(src, cv2.IMREAD_UNCHANGED) h, w img.shape[:2] if img.shape[2] 4: mask (img[:, :, 3] alpha_thr).astype(np.uint8) * 255 else: bg img[0, 0] diff np.abs(img.astype(int) - bg.astype(int)).sum(axis2) mask (diff 30).astype(np.uint8) * 255 # 形态学闭运算把图标内部的小孔填上避免一个图标被拆成多块 kernel np.ones((3, 3), np.uint8) mask cv2.morphologyEx(mask, cv2.MORPH_CLOSE, kernel, iterations1) num, labels, stats, _ cv2.connectedComponentsWithStats(mask, connectivity8) count 0 for i in range(1, num): # 0 是背景 x, y, bw, bh, area stats[i] if area min_area: continue # 过滤噪点 x0 max(0, x - pad) y0 max(0, y - pad) x1 min(w, x bw pad) y1 min(h, y bh pad) crop img[y0:y1, x0:x1] cv2.imwrite(os.path.join(out_dir, ficon_{count:04d}.png), crop) count 1 print(fsaved {count} icons to {out_dir}) split_atlas(atlas.png, out_icons, min_area64, pad2)逻辑说明min_area64是过滤阈值小于 64 像素的连通域当噪点丢掉这个值要根据你的图标最小尺寸调。pad2是裁剪时向外扩 2 像素防止图标边缘被切掉。形态学闭运算那一步很关键很多图标内部有镂空比如字母 O 中间不闭运算的话连通域会把镂空也算进去导致外接矩形偏大。参数说明iterations1一般够用如果图标内部孔洞大加到 2 或 3但加多了会让相邻图标粘在一起。保存文件名用icon_0000.png这种四位补零格式是为了后面按文件名排序时顺序稳定。2.3 网格切分法什么时候比连通域更省事如果你的图集是美术用 TexturePacker 这类工具导出的通常附带一个.json或.plist元数据文件里面直接写了每张图的x, y, w, h。这时候根本不用图像算法直接读元数据裁剪就行速度是连通域法的几十倍而且零误差。常见做法是解析 JSON 后循环裁剪。import json import cv2 with open(atlas.json, r, encodingutf-8) as f: meta json.load(f) img cv2.imread(atlas.png, cv2.IMREAD_UNCHANGED) for name, frame in meta[frames].items(): x, y, w, h frame[frame][x], frame[frame][y], frame[frame][w], frame[frame][h] crop img[y:yh, x:xw] cv2.imwrite(fout/{name}.png, crop)逻辑说明meta[frames]的 key 就是原始文件名直接拿来当输出名省去重命名。参数说明不同工具导出的 JSON 结构不一样TexturePacker 的 frame 字段可能是{x:..,y:..,w:..,h:..}直接平铺也可能是嵌套的{frame: {...}}读之前先打印一层 key 确认。如果元数据里还有rotated: true说明这张图在图集里被旋转了 90 度裁剪后要转回来这个坑后面会细说。3. 参数调优面积阈值、padding 和命名规则怎么定3.1 面积阈值和 padding 的取值逻辑min_area和pad这两个参数直接决定输出质量。min_area设太小背景噪点会被当成图标存下来输出目录里一堆 1×1 的垃圾图设太大小图标比如 8×8 的箭头会被误杀。我的经验值是先跑一遍诊断脚本把所有连通域的 area 打印出来排序看最小真实图标和最大噪点之间有没有明显断层阈值取在断层中间。pad的作用是防止图标边缘被切。连通域算出来的外接矩形是紧贴前景像素的但有些图标边缘有半透明羽化alpha 值在 1 到 10 之间被alpha_thr10过滤掉了裁剪时就会缺一圈。pad2能补回来。但pad不能太大否则相邻图标的外扩区域会重叠输出图里带上邻居的边角。一般pad取 1 到 4图标间距小于 4 像素时取 1。命名规则也值得说一句。默认icon_0000.png这种顺序命名好处是稳定坏处是跟原始名字对不上。如果图集有元数据优先用元数据里的原始名没有元数据可以按位置命名比如icon_r0_c0.png表示第 0 行第 0 列方便人工核对。3.2 用配置文件管理参数避免每次改代码参数一多硬编码在脚本里改来改去容易出错。常见做法是抽一个 YAML 或 JSON 配置脚本读配置跑。下面是一个最小配置示例。# split_config.yaml input: atlas.png output_dir: out_icons mode: connected # connected | grid | metadata min_area: 64 pad: 2 alpha_thr: 10 bg_diff_thr: 30 morph_close: 1 name_pattern: icon_{index:04d}import yaml with open(split_config.yaml, r, encodingutf-8) as f: cfg yaml.safe_load(f) print(cfg[mode], cfg[min_area]) # 后续按 cfg 里的字段传参给 split_atlas逻辑说明mode字段决定走哪条路线脚本里用 if 分支调度。name_pattern用 Python 格式化字符串{index:04d}会被替换成四位补零序号。参数说明bg_diff_thr只在无 alpha 时生效背景色差异阈值背景越花这个值要越大。morph_close是闭运算迭代次数0 表示不闭运算。提示配置文件里的路径建议用相对路径脚本里用os.path.dirname(__file__)拼绝对路径否则换个目录跑就找不到文件。3.3 输出后怎么快速验证拆得对不对拆完不是就完了得验证。最快的办法是生成一张“拼贴预览图”把所有输出小图按网格拼回去肉眼看有没有缺、有没有多、有没有切边。下面这段代码生成预览。import cv2 import numpy as np import glob files sorted(glob.glob(out_icons/*.png)) cols 20 cell 64 rows (len(files) cols - 1) // cols canvas np.zeros((rows * cell, cols * cell, 4), dtypenp.uint8) for idx, fp in enumerate(files): im cv2.imread(fp, cv2.IMREAD_UNCHANGED) if im.shape[2] 3: im cv2.cvtColor(im, cv2.COLOR_BGR2BGRA) h, w im.shape[:2] scale min(cell / w, cell / h) im cv2.resize(im, (int(w * scale), int(h * scale))) r, c divmod(idx, cols) y0 r * cell (cell - im.shape[0]) // 2 x0 c * cell (cell - im.shape[1]) // 2 canvas[y0:y0im.shape[0], x0:x0im.shape[1]] im cv2.imwrite(preview.png, canvas) print(preview saved, icons:, len(files))逻辑说明把所有小图缩放到统一格子大小居中贴到大画布上。cols20是每行放 20 个根据图标数量调。参数说明cell64是格子边长小图会被等比缩放到不超过格子。如果预览图里发现某个位置是空的说明那张图没被拆出来如果某个格子里的图明显偏大或偏小说明外接矩形算错了。4. 避坑与排查拆图翻车的五个血泪现场4.1 图标被合并成一张大图现象输出目录里只有几张图每张都巨大明显是多个图标粘在一起。原因图标之间像素相连或者背景不是纯色导致掩码把间隙也算了进去。解决先看掩码图把mask存下来用看图软件打开确认间隙是否干净。如果间隙有噪声调大bg_diff_thr或对掩码做一次开运算cv2.MORPH_OPEN去掉细连接。开运算核用 3×3迭代 1 次能把 1 到 2 像素的连接断开。4.2 一个图标被拆成好几块现象一个完整图标被拆成两三个文件。原因图标内部有镂空或颜色断层掩码不连续。解决对掩码做闭运算把内部孔洞填上。如果闭运算后还是拆检查alpha_thr是不是太高把半透明的部分也过滤掉了适当降低到 5。还有一种情况是图标本身由多个不连通部分组成比如字母 i 的点和竖线这种本质上就是两个连通域要么接受拆开要么在业务层按位置合并。4.3 裁剪出来的图边缘缺一块现象图标边缘被切掉尤其是圆角或羽化边缘。原因pad太小或者alpha_thr太高把边缘半透明像素过滤了。解决pad加到 2 到 4alpha_thr降到 5。如果还缺检查原图是不是有预乘 alpha预乘过的图边缘颜色会偏暗裁剪后看起来像缺了一块这种要在读取时做反预乘。4.4 元数据里的 rotated 字段没处理现象用元数据裁剪出来的图有些是躺倒的。原因图集打包时为了省空间把宽高比大的图旋转了 90 度元数据里rotated: true。解决裁剪后判断rotated为 true 时用cv2.rotate(crop, cv2.ROTATE_90_CLOCKWISE)转回来。注意旋转方向要和打包工具一致TexturePacker 默认是顺时针 90 度但有些工具是逆时针转错了图是倒的试一次就知道。4.5 输出文件名顺序和原始顺序对不上现象拆出来的图按文件名排序后和美术给的顺序不一致。原因连通域标记的顺序是按扫描行来的从左到右、从上到下但美术的命名顺序可能是按功能分组。解决如果元数据里有原始名直接用原始名没有的话按外接矩形的y再x排序后重新编号这样至少保证空间顺序稳定。排序代码就一行stats[1:] sorted(stats[1:], keylambda s: (s[1] // 32, s[0]))32是行高容差同一行的图标 y 差在 32 以内算一行。5. 进阶把拆图接进自动化流水线的一个小技巧拆图这件事单次跑通不难难的是每次美术更新图集你都要重跑一遍还要保证输出目录干净、命名一致、旧图删掉。我一般会把它包成一个带“清单比对”的脚本每次拆分前先算一遍当前图集的连通域数量和总面积和上次的清单比对如果数量或面积变化超过 5%就报警让人工确认而不是直接覆盖输出。这样能挡住美术误传半成品图集的情况。具体做法是维护一个manifest.json记录每次拆分的图标数量、每个图标的(x, y, w, h, area)。下次拆分时读旧清单和新结果做 diff。import json import os def load_manifest(path): if os.path.exists(path): with open(path, r, encodingutf-8) as f: return json.load(f) return {icons: []} def diff_manifest(old, new, tol0.05): old_n, new_n len(old[icons]), len(new[icons]) if old_n 0: return True, first run if abs(new_n - old_n) / old_n tol: return False, fcount changed {old_n} - {new_n} old_area sum(i[area] for i in old[icons]) new_area sum(i[area] for i in new[icons]) if abs(new_area - old_area) / old_area tol: return False, farea changed {old_area} - {new_area} return True, ok逻辑说明tol0.05是容差数量或总面积变化超过 5% 就判定为异常。first run表示第一次跑没有旧清单直接放行。参数说明area是连通域像素数比单纯比数量更能反映图集内容变化因为美术可能只是把某个图标改大了数量没变但面积变了。这个清单机制不复杂但能省掉很多“拆完发现不对再回滚”的时间。我自己的习惯是任何批量图像处理脚本只要输出会覆盖旧文件就先加清单比对再加一个--dry-run开关只打印不写盘。这个习惯帮我挡过至少三次美术误传。希望帮到你。本文还有配套的精品资源点击获取
