精灵提取器

Drop files here or click (max 12 MB)

将图像拖放到上方开始提取精灵。

关于 在线精灵提取器

需要将精灵图或静态图像转换为单独的精灵吗？此精灵提取器自动检测精灵区域，干净地裁剪它们（可选修剪和填充），并导出即可使用的透明PNG。🚀 非常适合Scratch项目、2D游戏原型、课堂活动和独立游戏。与像素艺术、UI元素、图标和角色完美配合。

为何使用此精灵提取器？

  • 基于透明度及可配置阈值的自动精灵检测
  • 干净裁剪，可选修剪每个精灵周围的透明边框
  • 控制内边距、对齐方式（居中/底部）及可选的统一输出尺寸
  • 保留PNG导出的透明度（Alpha通道）—— 适用于瓦片地图和角色
  • 所有检测到精灵的可视化图库，便于下载前快速检查
  • 使用JSZip进行客户端ZIP导出，保持文件名和精灵顺序稳定
  • Scratch友好：快速将单个精灵图转换为多个造型或资源
  • 完美适用于跨引擎资源复用（Scratch、Godot、Unity 2D、Phaser等）

🛠️ 如何从精灵图提取精灵 for sprite-extractor

1

1. 拖入图像

将精灵图或图像拖放至投放区，或点击选择文件。为获得最佳效果，请使用带透明背景的PNG或精灵与背景高对比度的图像。

2

2. 运行自动检测

工具将图像的轻量表示发送至检测端点，该端点基于透明度和最小尺寸计算每个精灵的边界框。边界框会叠加在图像上，便于快速查看将要导出的内容。

3

3. 调整提取选项

调整内边距、透明背景与纯色背景、透明边缘修剪、对齐方式（居中或底部）及可选的统一输出宽度/高度。工具会据此重建每个精灵画布。

4

4. 预览精灵

滚动浏览生成的精灵图库。每个预览均在客户端使用离屏画布构建，可根据UI选项重命名或丢弃。

5

5. 下载PNG或ZIP

导出单个PNG精灵或下载包含所有当前预览的ZIP文件。ZIP使用JSZip在客户端构建，文件名遵循顺序模式如<code>sprite_0000.png</code>、<code>sprite_0001.png</code>等。

技术规格

检测与边界框

检测阶段在专用后端端点运行，返回客户端用于构建最终精灵的清晰边界框。

方面行为备注
检测端点POST /api/sprite-extractor/inspect接受数据URL和检测选项，返回一个精灵框数组。
检测输入容差、透明度阈值、最小宽度、最小高度在用户界面中调整这些参数以忽略微小噪点或仅捕获有意义的精灵。
框形状轴对齐矩形每个<code>SpriteBox</code>包含源图像坐标中的<code>x</code>、<code>y</code>、<code>width</code>、<code>height</code>。
透明度处理支持透明度透明像素会影响裁剪/修剪决策，但可以在输出中保留。
错误处理优雅降级如果检测失败，工具会显示可读错误信息，不会破坏用户界面。

裁剪、修剪与对齐

一旦框确定后，所有精灵渲染均在浏览器中使用HTML画布完成。

步骤实现方式详情
初始裁剪drawImage(img, box.x, box.y, w, h, 0, 0, w, h)每个精灵首先从原始图像裁剪到临时画布上。
透明修剪通过getImageData扫描Alpha通道启用修剪时，工具扫描像素以计算最小的非透明边界框。
内边距可配置0–256像素在修剪或裁剪的精灵周围应用内边距，以减少引擎中的边缘伪影。
对齐居中 / 底部对齐精灵可以居中或底部对齐（适用于站在基线上的角色）。
统一输出尺寸可选spriteWidth / spriteHeight启用后，所有精灵将渲染到固定尺寸的画布中以标准化动画。
背景透明或纯色保持完全透明或用选定的RGBA颜色填充画布。

性能与限制

专为浏览器中的交互使用设计。

参数典型行为备注
最大输入尺寸约10MB图像较大文件仍可能工作，但加载/检测速度会更慢。
精灵数量最多约400个精灵可实现更高数量，但预览渲染和ZIP创建将耗时更长。
导出格式ZIP内的PNG（Blob）ZIP完全使用JSZip在客户端生成。
画布操作逐精灵裁剪和绘制依赖浏览器的2D画布API；性能随分辨率和数量变化。

命令行替代方案

对于大型精灵图或自动化流程，您可以结合使用ImageMagick等CLI工具与脚本。

Linux / 🍎 macOS

使用ImageMagick进行均匀网格裁剪

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

将规则的64×64网格切割成单独的PNG文件。

压缩所有精灵

zip sprites.zip sprite_*.png

将所有生成的精灵打包成单个归档文件。

Windows (PowerShell + ImageMagick)

基于网格的裁剪

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

与上述相同，在Windows上使用<code>magick</code> CLI。

实际应用场景

2D游戏开发

  • 从精灵图中提取角色动画帧，用于Godot、Unity 2D、Phaser或Construct。
  • 从设计稿中分离UI元素（按钮、图标、血条）。
  • 将图块集分解为单个图块，用于关卡编辑器。
// Godot示例：加载多个帧\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch与课堂项目

  • 将单个精灵图转换为Scratch角色的多个造型。
  • 为编程工作坊准备主题资源包（动物、行星、图标）。
  • 让学生在绘图工具中设计精灵图，然后提取用于Scratch。
// Scratch风格伪代码实现简单动画\n当绿旗被点击\n重复执行\n  下一个造型\n  等待0.1秒

像素艺术与资源库

  • 将旧像素艺术图集拆分为可搜索的独立精灵库。
  • 从大型商业或开源资源包中仅提取所需素材。
  • 统一来自不同来源的精灵内边距与对齐方式。

❓ Frequently Asked Questions

❓精灵检测是否全自动？

工具基于透明度和可配置阈值（容差、Alpha阈值、最小宽/高）进行自动检测。多数情况下可“即开即用”，但处理复杂图集时可能需要调整选项或进行二次处理。

📏提取器会修改原始图像吗？

不会。原始图像保持原状。工具仅将其读入内存画布，将区域裁剪至新画布后导出为全新PNG精灵。

🎯能否控制内边距与对齐？

可以。您可配置内边距（像素单位），选择透明或纯色背景，启用透明边缘修剪，并设置精灵在输出画布中居中或底部对齐。

🔒我的图像会存储在服务器上吗？

检测步骤会将图像（以数据URL形式）发送至专用端点计算精灵区域，但精灵的构建与压缩均在浏览器内完成。服务设计为瞬时处理，非长期存储。请勿将需严格保密的素材用于第三方工具。

🧊导出精灵会保留透明度吗？

会。默认输出画布为透明背景，精灵将保留Alpha通道。若目标引擎需要不透明素材，可另选纯色背景。

Pro Tips

Best Practice

为每个精灵添加少量内边距（2–4像素），防止在引擎中缩放或旋转时出现边缘渗色。

Best Practice

统一命名精灵（如<code>hero_run_0001.png</code>、<code>hero_run_0002.png</code>）以简化动画导入与脚本编写。

Best Practice

教学场景中建议从极简精灵图集入手（大尺寸精灵、清晰背景），让学生即时看到成果。

Best Practice

将导出的ZIP文件与项目源文件共同存放，便于后续重新生成或调整动画。

Additional Resources

Scratch维基 – 精灵
Documentation
Godot文档 – 2D精灵动画
Documentation
Unity手册 – 2D精灵
Documentation

Other Tools