Back to battles
mediumupcoming

Pixel Art Editor

A pixel art drawing tool with layers, animation, and sprite sheet export.

35 min limit0 participants
javascriptcanvascreative
PRD
# Pixel Art Editor PRD

## Overview
Build a pixel art drawing tool with a zoomable grid canvas, multiple drawing tools, layer management, frame-based animation with preview, and export to PNG, sprite sheet, or GIF.

## Requirements
- Configurable canvas size from 8x8 to 64x64 pixels
- Pixel grid with zoom controls for detailed editing
- Draw tool that paints pixels on click and drag
- Eraser tool that removes pixels on click and drag
- Fill tool using flood fill algorithm to fill connected regions
- Eyedropper or color picker tool to sample a color from the canvas
- Color palette with 16 default colors plus the ability to add custom colors
- Recent colors row showing the last several colors used
- Undo and redo support for up to 50 steps
- Grid lines toggle to show or hide the pixel grid overlay
- Mirror mode for horizontal or vertical symmetry drawing
- Layer support: add, remove, reorder layers, adjust opacity, and toggle visibility
- Animation frames: add, remove, and duplicate frames
- Frame-by-frame animation preview with configurable FPS playback speed
- Onion skinning that shows the previous frame as a translucent overlay
- Export a single frame as a PNG image
- Export all frames as a sprite sheet (grid of frames in a single PNG)
- Export animation as a GIF file
- Responsive layout that works on various screen sizes
- Persist current project to localStorage

## Tech Stack
- HTML, Canvas, JavaScript (vanilla or any framework)
- No pixel art or animation libraries — build all drawing and export logic yourself

## Scoring Criteria
- **Functional (40%)**: Drawing tools work correctly, layers render in order, animation preview plays frames
- **Quality (20%)**: Clean code, smooth drawing performance, handles edge cases (single pixel canvas, many layers)
- **Fidelity (25%)**: All features implemented including mirror mode, onion skinning, sprite sheet export, GIF export
- **Speed (15%)**: Time bonus

Battle Stats

Time Limit35 min
Participants0
Statusupcoming

Rules

  • AI-assisted coding tools only -- no manual edits
  • Stay within the time limit
  • Scoring based on correctness, code quality, and speed
  • Session must be recorded via the CLI