Pixel Art Exporter

What this skill does

# Pixel Art Exporter

## Overview

The Pixel Art Exporter Skill enables exporting pixel art sprites from Aseprite to various formats optimized for different use cases. This includes single images (PNG), animated GIFs, spritesheets, and JSON metadata for game engines.

**Core Capabilities:**
- Export single frames or entire animations as PNG images
- Generate animated GIFs with customizable timing and looping
- Create spritesheets in multiple layouts (horizontal, vertical, grid, packed)
- Generate JSON metadata for game engines (Unity, Godot, Phaser, generic)
- Scale exports with pixel-perfect upscaling (1x, 2x, 4x, etc.)
- Handle transparency, background colors, and frame-specific exports

**Export Formats Supported:**
- **PNG**: Single images or frame sequences with transparency
- **GIF**: Animated GIFs with frame timing and loop control
- **Spritesheet**: Texture atlases with various packing algorithms
- **JSON**: Frame metadata, animation tags, layer information

This Skill works with the pixel-mcp server tools to produce production-ready assets for web, games, and applications.

## When to Use

Invoke this Skill when the user:

- **Wants to export or save**: "export this sprite", "save as PNG", "generate a spritesheet"
- **Mentions file formats**: "PNG", "GIF", "spritesheet", "sprite sheet", "texture atlas", "JSON"
- **Prepares for game engines**: "export for Unity", "Godot spritesheet", "Phaser animation"
- **Needs specific outputs**: "export just frame 3", "create a tileset", "save each layer separately"
- **Requests scaling**: "export at 2x size", "scale up 4x", "upscale for retina displays"
- **Wants animation exports**: "make this into a GIF", "export the animation", "save all frames"
- **Needs metadata**: "include JSON data", "export with coordinates", "frame information"

**Example Triggers:**
- "Can you export this character sprite as a PNG?"
- "I need a spritesheet for my game engine"
- "Save this animation as an animated GIF"
- "Export at 4x scale for high-resolution displays"
- "Generate a texture atlas with JSON metadata"
- "Export just the 'run' animation tag"

## Instructions

### 1. Exporting Single Images (PNG)

**For static sprites or single frames:**

1. **Get Sprite Information First**
   ```
   Use mcp__aseprite__get_sprite_info to understand:
   - Current dimensions
   - Number of frames
   - Available layers
   - Color mode and transparency settings
   ```

2. **Export PNG with Transparency**
   ```
   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. **Export Options**
   - **Transparent background**: Default behavior, preserves alpha channel
   - **Specific background**: Use layer visibility or flatten before export
   - **Single frame from animation**: Specify frame_number parameter
   - **Specific layer only**: Provide layer name to export just that layer

**Example Workflow:**
```
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. Exporting Animated GIFs

**For animations intended for web or presentations:**

1. **Verify Animation Setup**
   ```
   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. **Export 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 Optimization Considerations**
   - GIF format has 256-color limit - ensure palette is optimized
   - Frame timing is preserved from Aseprite frame durations
   - Transparency is supported but may have edge artifacts
   - File size increases with dimensions and frame count

**Example Workflow:**
```
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. Creating Spritesheets

**For game engines and texture atlases:**

1. **Understand Layout Requirements**

   **Layout Types:**
   - **Horizontal**: All frames in a single row (good for scrolling animations)
   - **Vertical**: All frames in a single column (good for CSS animations)
   - **Grid**: Frames arranged in rows and columns (balanced dimensions)
   - **Packed**: Optimized packing to minimize texture size (engine-specific)

2. **Export Spritesheet**
   ```
   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 Metadata Structure**

   When `include_json: true`, creates a .json file with:
   ```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. **Layout Selection Guidelines**
   - **Horizontal**: Best for web/CSS sprite animations, simple scrolling
   - **Vertical**: Mobile-friendly, vertical scrolling animations
   - **Grid**: Unity, Godot - balanced texture dimensions (power-of-2)
   - **Packed**: Advanced engines with atlas support (Phaser, LibGDX)

**Example Workflow:**
```
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. Generating JSON Metadata

**For game engine integration:**

1. **Metadata Formats by Engine**

   **Unity:**
   - Use "grid" layout for Unity's Sprite Editor
   - JSON provides frame coordinates for slicing
   - Include padding to prevent texture bleeding

   **Godot:**
   - Use "horizontal" or "grid" layout
   - JSON maps to AnimatedSprite frames
   - Frame duration converts to FPS

   **Phaser:**
   - Use "packed" layout for optimal performance
   - JSON follows Texture Packer format
   - Supports trimmed sprites and rotation

   **Generic/Custom:**
   - Standard frame array with x, y, w, h coordinates
   - Duration in milliseconds per frame
   - Animation tag groupings

2. **Export with Metadata**
   ```
   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. **Metadata Usage Examples**

   **Parsing in JavaScript (Phaser):**
   ```javascript
   this.load.atlas('sprite', 'spritesheet.png', 'spritesheet.json');
   this.add.sprite(x, y, 'sprite', 'frame_0.png');
   ```

   **Parsing in C# (Unity):**
   ```csharp
   // Import spritesheet.png with Multiple sprite mode
   // Use JSON to set sprite rectangles in Sprite Editor
   ```

### 5. Scaling Exports

**Pixel-perfect upscaling for high-resolution displays:**

1. **When to Scale**
   - Retina/HiDPI displays: Use 2x or 4x
   - Modern game engines: Export at native size, let engine scale
   - Web: Export 2x and use CSS to scale down (sharper rendering)
   - Print/marke