Basic Workflow
Convert
- Once both files are loaded, click the "Convert" button
- Wait for the conversion process to complete
- View the organized sprite sheet in the preview section
Sprite Sheet Conversion
The main conversion process organizes sprites into a grid layout:
- Final Size: The dimensions of the output sprite sheet
- Grid: Number of rows and columns in the organized layout
- Sprite: Individual sprite dimensions
The conversion automatically:
- Arranges sprites in an optimal grid layout
- Maintains sprite quality and transparency
- Updates JSON coordinates to match the new layout
- Preserves all sprite metadata
Export Options
PNG
Downloads the organized sprite sheet as a PNG file
JSON
Downloads the updated JSON atlas with corrected frame positions and coordinates in SpeedRunners format.
Overlays
Downloads two visualization files:
- Grid Boundaries: Shows the grid structure with labels and sprite limits
- Bounding Boxes: Overlay showing current sprite boundaries
Individual Sprites (ZIP)
Downloads a ZIP archive containing:
- Each sprite as a separate cropped PNG file
- Filenames matching the JSON frame names
GIF
Generates an animated GIF of the sprite sheet:
- 12 FPS: Standard animation speed
- 24 FPS: Smooth animation speed
Packed
Creates an optimized sprite sheet with advanced features:
- Duplicate Detection: Automatically removes duplicate sprites
- Trimming: Removes unnecessary transparent pixels
- Multiple Algorithms:
- Auto (Recommended): Automatically selects the best packing algorithm
- Best Long Side Fit: Optimizes for minimal long side dimension
- Best Area Fit: Optimizes for minimal total area
- Bottom Left: Simple bottom-left packing strategy
- Downloads both the packed PNG and converted JSON automatically
Atlas Converter
Convert JSON texture atlases between different formats:
- Click "Upload JSON array or hash"
- Select your JSON file
- View the original and converted JSON side-by-side
- Download or copy the converted JSON
Supported Formats:
- Array format:
[{frame: {...}, ...}, ...]
- Hash format:
{frameName: {frame: {...}, ...}, ...}
- Output: SpeedRunners format with proper frame naming and structure
Frame Editor
Customize your sprite animations by editing individual frames, originally designed to create countdown and idle animations.
Features
- Delete Frames: Remove unwanted frames from animations
- Duplicate Frames: Create copies of frames to extend animations
- Restore Frames: Undo deletions and restore removed frames
- Visual Feedback: Color-coded frame groups for easy identification
- Statistics: Real-time display of total cells, removed frames, and active frames
Limitations
- Maximum 500 frames per sprite sheet
- Each color group must maintain at least 1 frame
- Large sprite sheets (>4096px) may have performance considerations