About this tool
Pixel Art Sprite Studio is a grid-based pixel editor purpose-built for game sprites: a square canvas from 8x8 up to 64x64, five curated retro palettes (PICO-8, Game Boy, NES, C64, Endesga-32) with their canonical hex values, and a pencil/eraser/flood-fill/ordered-dither/eyedropper toolset with horizontal, vertical and quad symmetry for fast, mirrored character and tile work.
Each frame supports multiple layers with per-layer visibility and opacity, composited with standard Porter-Duff alpha blending, so you can sketch a silhouette on one layer and shade or add an outline on another without disturbing the base art.
The frame timeline turns a single sprite into an animation: add, duplicate and reorder frames, set a per-frame duration, and toggle onion skinning to see the previous frame ghosted behind the one you're editing.
Export covers both static and animated use: a single-frame PNG, a full animated PNG (APNG), an animated GIF, a horizontal sprite-sheet PNG with matching atlas JSON (Pixi/Phaser's native TexturePacker format, plus documented region lists for Godot and Unity import scripts), or a CSS steps() snippet for background-position sprite animation.
Projects can be saved and reloaded as JSON (run-length encoded per layer) so you can pick up an in-progress sprite later without re-drawing it.
How to use
Pick a size and palette
Choose a grid size (creates a fresh sprite) and a retro palette from the toolbar; click a swatch to set the primary color, right-click to set the secondary.
Draw
Select Pencil, Eraser, Fill, Dither or Eyedropper, optionally turn on symmetry, then click or drag on the canvas.
Dither a gradient
Pick the Dither tool, set primary/secondary colors and density, then click a region to flood-fill it with an ordered Bayer dither blend.
Layer your art
Add layers in the Layers panel, adjust each layer's opacity or visibility, and reorder them to control what's on top.
Animate
Add frames in the timeline, set each frame's duration, enable onion skinning to trace the previous frame, and press Play to preview.
Export
Download a PNG, APNG, GIF, sprite-sheet PNG, atlas JSON for your engine, or a CSS steps() snippet from the Export panel.
Use cases
Game jam sprites
Draw and animate character or item sprites in the browser, then export a sheet + atlas JSON straight into Pixi, Phaser, Godot or Unity.
Retro-style icons and avatars
Use a locked palette like PICO-8 or Game Boy to keep icon sets visually consistent with a project's retro art direction.
Sprite sheet prototyping
Block out an animation's frame count and timing quickly, preview it with Play, and iterate before committing to final art.
CSS sprite animations
Export the steps() snippet to drive a lightweight background-position animation for web UI without a GIF or video file.
Common mistakes
Mistake:Expecting the grid-size selector to resize the current sprite
Fix:Changing the size starts a brand-new blank sprite rather than scaling existing art — pick your size before you start drawing, or export/save first.
Mistake:Using Fill on a layer with semi-transparent pixels expecting it to blend
Fix:Flood fill and dither fill both match the exact source color at the clicked pixel (including null/transparent) and replace it outright — they don't blend into existing colors.
Mistake:Assuming Godot or Unity load the atlas JSON natively
Fix:Only the Pixi/Phaser export is a format either engine loads directly (TexturePacker JSON Hash); the Godot and Unity exports are documented region lists meant to drive a short import script.
Mistake:Forgetting a hidden layer still exists in Save/Load
Fix:Hidden layers are skipped when compositing exports (PNG/GIF/APNG/atlas) but are preserved in the saved project JSON, so toggling visibility back on later still works.
Frequently asked questions
Related guides
Your Font Has Axes: A Field Guide to Variable Fonts and OpenType Features
One font file, infinite weights. How the fvar and gvar tables actually work, why a font inspector can show you the axes but not animate between them, and the metric-override trick that kills fallback-font layout shift.
Symmetry, Dithering and the Sprite Sheet: A Pixel Artist's Toolkit
Why PICO-8 has exactly 16 colors, how a Bayer matrix fakes a gradient with none, and what actually happens when you export a walk cycle to Pixi, Phaser or Godot.
References & standards
Related tools
Distributed Systems & Network Topology Simulator
Build a network topology from load balancers, API gateways, microservices, message queues, distributed databases and caches, then inject chaos — kill nodes, partition the network, packet loss, latency spikes, circuit breaker trips — and watch Raft leader election, split-brain and Hystrix-style breaker state react live. Export the topology as Docker Compose, Kubernetes manifests, Mermaid or PlantUML. Entirely client-side, educational simulation.
Typography Anatomy & Variable Font Lab
Load a TTF/OTF/WOFF/WOFF2 font and inspect glyph Bézier outlines, baseline/x-height/cap-height guides, kerning pairs, OpenType features and live variable-font axis sliders — export CSS @font-face, font-variation-settings and fallback metric overrides.
Digital Logic Gate & Circuit Simulator
Build digital circuits from AND/OR/NOT/NAND/NOR/XOR/XNOR gates, tri-state buffers, switches, clocks and 7-segment displays; wire flip-flops, latches and multiplexers into adders and counters. Runs an event-driven propagation-delay simulation with High-Z and driver-conflict detection, packages sub-circuits into reusable ICs, and exports a truth table, K-Map minimization, Verilog, VHDL, and a documented JSON+SVG schematic. Everything runs client-side; circuits never leave the browser.
2D Fluid Dynamics & Particle Physics Sandbox
A physics playground with two engines sharing one canvas. The fluid mode runs a real Eulerian Navier-Stokes solver — semi-Lagrangian advection, explicit diffusion, Jacobi pressure projection and vorticity confinement — that you paint with dye and velocity using mouse or touch. The particle mode is a damped Verlet N-body engine with gravity wells, Coulomb attractors and repulsors, spring links, wall restitution and elastic circle collisions. Particle counts adapt to the device (100k target on WebGL2 desktop, 2k-5k on CPU fallback), and every configuration exports as runnable code: a Matter.js world, a PixiJS ticker setup, or a standalone vanilla Canvas engine.
GLSL Shader Art & Visual FX Playground
A live GLSL fragment-shader laboratory running on WebGL2 with the full Shadertoy uniform set (iResolution, iTime, iTimeDelta, iFrame, iMouse, iChannel0..3). Write shaders with syntax highlighting and see them recompile on every keystroke, with compiler errors mapped back to your line numbers and highlighted in the editor, plus a live FPS counter. The gallery ships raymarched spheres, tori and a Mandelbulb fractal, Voronoi and FBM procedural noise, cyberpunk grids, plasma waves, a neon audio visualizer and matrix rain. Export any shader as Three.js ShaderMaterial code, a React Three Fiber component, a standalone single-file WebGL2 HTML page or plain GLSL — or record the canvas straight to WebM video. A Canvas2D plasma fallback keeps the tool usable where WebGL2 is unavailable.
Web Audio Modular Synthesizer & Sound FX Generator
A full synth voice designer running entirely in your browser: seven oscillator flavors (sine, saw, triangle, square with real PWM duty control, white/pink/brown noise), a visual ADSR envelope, resonant biquad filtering, an LFO routed to pitch, filter or gain, and an effects chain of tanh overdrive, stereo ping-pong delay and Schroeder reverb. Play the two-octave keyboard with your mouse, the printed computer keys (A W S E D…) or a Web MIDI controller, watch the live FFT spectrum and scrolling waterfall spectrogram, fire retro game SFX one-shots (jump, laser, coin, powerup, explosion, click), then export your sound as 8/16/24-bit WAV or as dependency-free Web Audio code you can paste into any project.