Pixel Art Exporter

像素艺术导出器

概述

像素艺术导出器 Skill 可将 Aseprite 中的像素艺术精灵导出为多种格式，满足不同使用场景的需求。支持导出单张图像（PNG）、动画 GIF、精灵表，以及适用于游戏引擎的 JSON 元数据。

核心功能：

• 将单帧或完整动画导出为 PNG 图像
• 生成可自定义时长和循环方式的动画 GIF
• 以多种布局（水平、垂直、网格、紧凑）创建精灵表
• 生成适用于游戏引擎（Unity、Godot、Phaser、通用）的 JSON 元数据
• 以像素完美的方式放大导出内容（1x、2x、4x 等）
• 处理透明度、背景颜色和特定帧的导出

支持的导出格式：

• PNG：带透明度的单张图像或帧序列
• GIF：支持帧时长和循环控制的动画 GIF
• 精灵表：采用多种打包算法的纹理图集
• JSON：帧元数据、动画标签、图层信息

此 Skill 会使用 pixel-mcp 服务工具，生成可用于生产环境的 Web、游戏和应用资源。

适用场景

用户遇到以下情况时，调用此 Skill：

• 想要导出或保存：“导出这个精灵”“另存为 PNG”“生成精灵表”
• 提到文件格式：“PNG”“GIF”“精灵表”“精灵图集”“纹理图集”“JSON”
• 准备在游戏引擎中使用：“为 Unity 导出”“Godot 精灵表”“Phaser 动画”
• 需要特定输出：“只导出第 3 帧”“创建图块集”“分别保存每个图层”
• 要求调整缩放：“以 2x 尺寸导出”“放大 4x”“为视网膜显示屏放大”
• 想要导出动画：“把这个做成 GIF”“导出动画”“保存所有帧”
• 需要元数据：“附带 JSON 数据”“导出时包含坐标”“帧信息”

触发示例：

• “你能把这个角色精灵导出为 PNG 吗？”
• “我需要一张用于游戏引擎的精灵表”
• “将这个动画保存为动画 GIF”
• “以 4x 比例导出，以适配高分辨率显示屏”
• “生成包含 JSON 元数据的纹理图集”
• “只导出‘run’动画标签”

操作说明

1. 导出单张图像（PNG）

适用于静态精灵或单帧：

1. 先获取精灵信息

   Use mcp__aseprite__get_sprite_info to understand:
   - Current dimensions
   - Number of frames
   - Available layers
   - Color mode and transparency settings
   

2. 导出带透明度的 PNG

   Use mcp__aseprite__export_png:
   - file_path: Absolute path (e.g., "/path/to/output/sprite.png")
   - frame_number: Specific frame (0-indexed) or omit for current frame
   - layer: Specific layer name or omit for merged output
   - scale: Scaling factor (1, 2, 4, etc.) - default is 1
   

3. 导出选项

   • 透明背景：默认行为，保留 Alpha 通道
   • 指定背景：使用图层可见性设置，或在导出前合并图层
   • 导出动画中的单帧：指定 frame_number 参数
   • 仅导出指定图层：提供图层名称，以便仅导出该图层

工作流示例：

1. Get sprite info to verify dimensions and frame count
2. Export PNG: mcp__aseprite__export_png with desired frame and scale
3. Confirm file creation and report dimensions to user

2. 导出动画 GIF

适用于 Web 或演示用途的动画：

1. 检查动画设置

   Use mcp__aseprite__get_sprite_info to check:
   - Frame count (needs 2+ frames)
   - Frame durations (timing information)
   - Animation tags (if specific tag requested)
   - Sprite dimensions
   

2. 导出 GIF

   Use mcp__aseprite__export_gif:
   - file_path: Output path (e.g., "/path/to/animation.gif")
   - animation_tag: Optional - specific tag name to export
   - loop: true (infinite loop) or false (play once)
   - scale: Upscaling factor if needed
   

3. GIF 优化注意事项

   • GIF 格式最多支持 256 种颜色，请确保调色板已优化
   • 帧时长会沿用 Aseprite 中设置的时长
   • 支持透明度，但边缘处可能会出现伪影
   • 图像尺寸和帧数增加时，文件体积也会增大

工作流示例：

1. Verify sprite has multiple frames
2. Export GIF with appropriate loop setting
3. Report file size and frame count to user
4. Suggest optimization if file is large (>1MB)

3. 创建精灵图集

用于游戏引擎和纹理图集：

1. 了解布局要求

   布局类型：

   • 水平：所有帧排列在同一行（适合滚动动画）
   • 垂直：所有帧排列在同一列（适合 CSS 动画）
   • 网格：帧排列成行和列（尺寸均衡）
   • 紧密排列：优化排列方式以尽可能减小纹理尺寸（因引擎而异）

2. 导出精灵图集

   Use mcp__aseprite__export_spritesheet:
   - file_path: Output PNG path (e.g., "/path/to/spritesheet.png")
   - layout: "horizontal", "vertical", "grid", or "packed"
   - animation_tag: Optional - export specific animation only
   - scale: Upscaling factor
   - padding: Pixels between frames (default 0, common: 1-2)
   - include_json: true to generate metadata file
   

3. JSON 元数据结构

   设置 include_json: true 时，会创建一个 .json 文件，其中包含：

   {
     "frames": [
       {
         "filename": "frame_0.png",
         "frame": {"x": 0, "y": 0, "w": 32, "h": 32},
         "spriteSourceSize": {"x": 0, "y": 0, "w": 32, "h": 32},
         "sourceSize": {"w": 32, "h": 32},
         "duration": 100
       }
     ],
     "meta": {
       "app": "Aseprite",
       "version": "1.3.x",
       "format": "RGBA8888",
       "size": {"w": 256, "h": 32},
       "scale": "1"
     }
   }
   

4. 布局选择指南

   • 水平：最适合 Web/CSS 精灵动画和简单滚动
   • 垂直：适合移动设备和垂直滚动动画
   • 网格：适用于 Unity、Godot，可使纹理尺寸均衡（2 的幂）
   • 紧密排列：适用于支持图集的高级引擎（Phaser、LibGDX）

示例工作流：

1. Ask user about target platform if not specified
2. Recommend layout based on use case
3. Export spritesheet with JSON metadata
4. Report texture dimensions and frame count
5. Provide integration code sample for their engine

4. 生成 JSON 元数据

用于集成游戏引擎：

1. 各引擎的元数据格式

   Unity：

   • 使用“grid”布局以适配 Unity 的 Sprite Editor
   • JSON 提供用于切片的帧坐标
   • 添加内边距以防止纹理渗色

   Godot：

   • 使用“horizontal”或“grid”布局
   • JSON 映射到 AnimatedSprite 帧
   • 帧时长可转换为 FPS

   Phaser：

   • 使用“packed”布局以获得最佳性能
   • JSON 遵循 Texture Packer 格式
   • 支持修剪精灵和旋转

   通用/自定义：

   • 使用包含 x、y、w、h 坐标的标准帧数组
   • 每帧时长以毫秒为单位
   • 按动画标签分组

2. 导出并包含元数据

   Always include JSON when exporting for game engines:
   - Set include_json: true in export_spritesheet
   - JSON file created with same name as PNG (different extension)
   - Contains frame positions, durations, and sprite metadata
   

3. 元数据使用示例

   在 JavaScript 中解析（Phaser）：

   this.load.atlas('sprite', 'spritesheet.png', 'spritesheet.json');
   this.add.sprite(x, y, 'sprite', 'frame_0.png');
   

   在 C# 中解析（Unity）：

   // Import spritesheet.png with Multiple sprite mode
   // Use JSON to set sprite rectangles in Sprite Editor
   

5. 缩放导出内容

针对高分辨率显示屏进行像素级精准放大：

1. 何时缩放

   • Retina/HiDPI 显示屏：使用 2x 或 4x
   • 现代游戏引擎：按原始尺寸导出，由引擎缩放
   • Web：导出为 2x，并使用 CSS 缩小（渲染更清晰）
   • 印刷/营销：使用 4x 或更高倍数

2. 缩放最佳实践

   • 始终使用整数倍缩放（1x、2x、3x、4x，而非 1.5x）
   • 使用最近邻插值保持像素级清晰度
   • 在导出前缩放，而非导出后（避免模糊）
   • 权衡文件大小与质量

3. 应用缩放

   Add scale parameter to any export:
   - mcp__aseprite__export_png: scale: 2
   - mcp__aseprite__export_gif: scale: 4
   - mcp__aseprite__export_spritesheet: scale: 2
   

4. 分辨率建议

   • 1x：原始像素艺术尺寸，复古风格
   • 2x：现代显示屏的标准选择，平衡性好
   • 4x：高分辨率，适用于营销素材
   • 8x+：超高分辨率，适用于印刷和大尺寸显示屏

不同使用场景的导出工作流

Web 静态精灵

1. Get sprite info to verify single frame
2. Export PNG at 2x scale with transparency
3. Optimize PNG with compression tools if needed
4. Provide HTML/CSS example for display

游戏角色动画

1. Verify animation has multiple frames and tags
2. Export spritesheet with "grid" layout
3. Include JSON metadata (include_json: true)
4. Set appropriate padding (1-2 pixels)
5. Scale if needed (typically 1x for engines)
6. Provide code snippet for target engine

图标集导出

1. If multiple layers, export each separately
2. Use PNG format with transparency
3. Scale to multiple sizes (16x16, 32x32, 64x64)
4. Batch export all sizes
5. Organize in output directory structure

社交媒体 GIF

1. Verify frame timing is appropriate (100-200ms typical)
2. Export GIF with loop: true
3. Scale to 2x or 4x for visibility
4. Check file size (optimize if >2MB)
5. Suggest hosting platforms if needed

游戏引擎瓦片集

1. Verify tiles are uniform size (e.g., 16x16, 32x32)
2. Export as grid spritesheet
3. Set padding to 0 or 1 (depends on engine)
4. Include JSON for tile coordinates
5. Provide tile size and grid dimensions

游戏引擎集成

Unity 集成

导出设置：

• 布局：“grid”
• 包含 JSON：true
• 内边距：1-2 像素（防止渗色）
• 缩放：1x（由 Unity 处理缩放）

导入步骤：

1. 将 spritesheet.png 导入 Assets
2. 将 Texture Type 设为“Sprite (2D and UI)”
3. 将 Sprite Mode 设为“Multiple”
4. 打开 Sprite Editor 并使用 JSON 坐标进行切片
5. 使用精灵动画创建 Animator Controller

代码示例：

SpriteRenderer renderer = GetComponent<SpriteRenderer>();
renderer.sprite = sprites[frameIndex];

Godot 集成

导出设置：

• 布局：“horizontal”或“grid”
• 包含 JSON：true
• 缩放：1x
• 内边距：0-1 像素

导入步骤：

1. 将 spritesheet.png 导入项目
2. 创建 AnimatedSprite 节点
3. 创建 SpriteFrames 资源
4. 从精灵图集中添加帧
5. 使用 JSON 中的时长设置 FPS

代码示例：

$AnimatedSprite.play("run")
$AnimatedSprite.speed_scale = 1.0

Phaser 集成

导出设置：

• 布局："packed" 或 "horizontal"
• 包含 JSON：true（Texture Packer 格式）
• 缩放：根据游戏分辨率选择 1x 或 2x

导入步骤：

1. 将 spritesheet.png 和 .json 放入 assets
2. 在 preload() 中作为 atlas 加载
3. 使用 atlas 键创建精灵
4. 根据帧名称创建动画

代码示例：

this.load.atlas('player', 'spritesheet.png', 'spritesheet.json');

this.anims.create({
  key: 'run',
  frames: this.anims.generateFrameNames('player', {
    prefix: 'frame_',
    suffix: '.png',
    start: 0,
    end: 7
  }),
  frameRate: 10,
  repeat: -1
});

通用／自定义引擎

导出设置：

• 布局：根据引擎功能选择
• 包含 JSON：true
• 提供简单的帧数组格式

JSON 结构：

{
  "frames": [
    {"x": 0, "y": 0, "w": 32, "h": 32, "duration": 100}
  ],
  "meta": {
    "frameWidth": 32,
    "frameHeight": 32,
    "frameCount": 8
  }
}

集成模式：

1. 加载 PNG 纹理
2. 解析 JSON 以获取帧矩形
3. 根据坐标创建子纹理／精灵
4. 使用 duration 设置动画时长

技术详情

PNG 导出格式

规格：

• 颜色模式：RGBA（每通道 8 位）
• 透明度：完整支持 Alpha 通道
• 压缩：PNG 无损压缩
• 色彩空间：sRGB
• 位深：32 位（RGBA 每通道 8 位）

适用场景：

• 带透明度的静态精灵
• 动画中的单帧
• 高质量源文件
• 特定图层导出

GIF 导出格式

规格：

• 调色板：最多 256 种颜色
• 透明度：二值（开／关），不支持部分 Alpha
• 动画：基于帧，可为每帧设置时长
• 循环控制：无限循环或播放一次
• 压缩：LZW 压缩

限制：

• 颜色数量限制可能需要优化调色板
• 不支持部分透明度（Alpha 为二值）
• 文件大小大于视频格式
• 限制为 8 位色深

适用场景：

• 无需视频播放器的网页动画
• 社交媒体帖子
• 兼容电子邮件的动画
• 简单的循环动画

精灵图集布局

水平布局：

[Frame0][Frame1][Frame2][Frame3]...

• 尺寸：宽度 = frameWidth * frameCount，高度 = frameHeight
• 适用于：CSS 动画、简单滚动

垂直布局：

[Frame0]
[Frame1]
[Frame2]
[Frame3]
...

• 尺寸：宽度 = frameWidth，高度 = frameHeight * frameCount
• 适用于：针对移动设备优化、垂直滚动

网格布局：

[Frame0][Frame1][Frame2][Frame3]
[Frame4][Frame5][Frame6][Frame7]
[Frame8][Frame9][Frame10][Frame11]

• 尺寸：经过平衡调整，以生成近似正方形的纹理
• 适用于：游戏引擎、2 的幂次方纹理、Unity、Godot

紧凑布局：

[Frame0][Frame2][Frame5]
[Frame1][Frame3][Frame6]
    [Frame4][Frame7]

• 尺寸：经过最佳排列，以尽量减少空间浪费
• 适用于：支持图集的高级引擎（Phaser、LibGDX）
• 需要 JSON 元数据来记录帧位置

元数据结构

标准帧格式：

{
  "filename": "frame_0.png",
  "frame": {"x": 0, "y": 0, "w": 32, "h": 32},
  "rotated": false,
  "trimmed": false,
  "spriteSourceSize": {"x": 0, "y": 0, "w": 32, "h": 32},
  "sourceSize": {"w": 32, "h": 32},
  "duration": 100
}

字段说明：

• filename：逻辑帧标识符
• frame：精灵图集中的位置和尺寸（像素）
• rotated：帧是否旋转了 90°（紧凑布局）
• trimmed：是否移除了透明像素
• spriteSourceSize：裁剪后帧在原始画布内的位置
• sourceSize：裁剪前的原始画布尺寸
• duration：帧时长，单位为毫秒

元信息：

{
  "app": "Aseprite",
  "version": "1.3.x",
  "format": "RGBA8888",
  "size": {"w": 256, "h": 128},
  "scale": "1",
  "frameTags": [
    {"name": "idle", "from": 0, "to": 3, "direction": "forward"},
    {"name": "run", "from": 4, "to": 11, "direction": "forward"}
  ]
}

常见导出模式

模式 1：导出单帧

场景： 用户只想将一帧导出为 PNG

1. mcp__aseprite__get_sprite_info (verify frame exists)
2. mcp__aseprite__export_png:
   - file_path: "/output/frame.png"
   - frame_number: 0 (or user-specified)
   - scale: 1 (or user-specified)
3. Confirm export with dimensions

模式 2：完整动画 GIF

场景： 用户想要整个精灵的动画 GIF

1. mcp__aseprite__get_sprite_info (verify frames > 1)
2. mcp__aseprite__export_gif:
   - file_path: "/output/animation.gif"
   - loop: true
   - scale: 2
3. Report frame count and file size

模式 3：适用于游戏的精灵图集

场景： 用户想要用于 Unity／Godot 的精灵图集

1. mcp__aseprite__get_sprite_info (check dimensions and frames)
2. Ask about target engine if not specified
3. mcp__aseprite__export_spritesheet:
   - file_path: "/output/spritesheet.png"
   - layout: "grid"
   - include_json: true
   - padding: 1
   - scale: 1
4. Provide integration instructions for target engine

模式 4：指定动画标签

场景： 用户只想导出一个动画（例如 "run"）

1. mcp__aseprite__get_sprite_info (verify tag exists)
2. mcp__aseprite__export_spritesheet or export_gif:
   - animation_tag: "run"
   - Other settings as appropriate
3. Confirm only tagged frames exported

模式 5：多分辨率导出

场景： 用户想要多个缩放比例（1x、2x、4x）

1. Export PNG/spritesheet at scale: 1
2. Export PNG/spritesheet at scale: 2
3. Export PNG/spritesheet at scale: 4
4. Organize files: sprite_1x.png, sprite_2x.png, sprite_4x.png
5. Report all outputs with dimensions

模式 6：特定图层导出

场景： 用户想要将各图层分别导出为独立文件

1. mcp__aseprite__get_sprite_info (get layer names)
2. For each layer:
   - mcp__aseprite__export_png:
     - layer: "LayerName"
     - file_path: "/output/layerName.png"
3. Report all exported layers

与其他技能集成

像素艺术创建器集成

工作流： 创建 → 导出

1. User creates sprite with Pixel Art Creator Skill
2. Automatically offer export options when creation complete
3. Suggest appropriate format based on sprite type (static vs animated)
4. Use this Skill to handle export

像素艺术动画器集成

工作流： 动画 → 导出

1. User creates animation with Pixel Art Animator Skill
2. When animation complete, offer export formats:
   - GIF for web/social
   - Spritesheet for games
3. Use this Skill for export with animation metadata

像素艺术专业版集成

工作流： 优化 → 导出

1. User applies professional techniques (dithering, palette optimization)
2. Export with optimized settings:
   - Preserve palette for GIF export
   - Use appropriate compression for PNG
3. This Skill handles format-specific optimization

错误处理

文件路径问题

问题： 输出路径无效或无法访问

解决方案：

1. Verify directory exists (create if needed using Bash)
2. Check write permissions
3. Use absolute paths, not relative
4. Suggest valid path if user provides invalid one

缺少帧或标签

问题： 用户请求的帧／标签不存在

解决方案：

1. Use get_sprite_info to verify available frames and tags
2. List available options to user
3. Ask user to clarify which frame/tag they want
4. Don't attempt export until valid selection made

大文件警告

问题： 导出会生成非常大的文件（GIF >5MB，PNG >10MB）

解决方案：

1. Calculate approximate size based on dimensions and frame count
2. Warn user before export if size exceeds thresholds
3. Suggest alternatives:
   - Reduce scale factor
   - Export fewer frames
   - Use spritesheet instead of GIF
   - Optimize palette

格式限制

问题： 用户请求的功能不受该格式支持（例如，GIF 透明度）

解决方案：

1. Explain format limitation clearly
2. Suggest alternative format or approach
3. Proceed with export noting the limitation
4. Examples:
   - GIF binary transparency → suggest PNG for partial alpha
   - GIF 256-color limit → suggest palette optimization first

缩放比例问题

问题： 缩放比例不是整数或缩放过度

解决方案：

1. Only accept integer scale factors (1, 2, 3, 4, etc.)
2. Warn if scale >4 (may create very large files)
3. Explain pixel-perfect scaling benefits
4. Suggest appropriate scale for user's use case

成功指标

满足以下条件时，导出即表示成功：

1. 已创建文件：输出文件存在于指定路径
2. 格式正确：文件扩展名与请求的格式（.png、.gif）匹配
3. 尺寸符合预期：缩放后的尺寸正确（原始尺寸 * 缩放比例）
4. 帧数匹配：精灵表或 GIF 包含预期数量的帧
5. 已生成 JSON：如果 include_json 为 true，则已创建元数据文件
6. 用户确认：用户能够打开并验证导出的文件

向用户报告：

✓ Export complete: /path/to/output.png
  - Format: PNG with transparency
  - Dimensions: 64x64 (2x scale from 32x32 original)
  - Frames: 1 (static image)
  - File size: ~8KB

[For spritesheets, also include:]
  - Layout: Grid (4x2)
  - Frame dimensions: 32x32 each
  - Total frames: 8
  - JSON metadata: /path/to/output.json
  - Integration: Ready for Unity/Godot import

[Provide relevant integration code snippet if applicable]

导出后指引：

• 建议后续步骤（导入到引擎、优化文件大小、创建其他缩放版本）
• 提供目标平台的集成代码
• 说明如何使用 JSON 元数据
• 建议在目标环境中进行测试