v5.1Draw pixel art or drop images → packed sheet + atlas
Sprites: 0
Sheet: —
Pages: —
Efficiency: —
Anims: 0
Upload
Drop PNG / JPG / WebP images
or click to browse. Batches accumulate
Advanced settings
Sprites (0)
Animations (0)
Frame 0 / 0
—
12 fps
An animation needs at least
two sprites. Draw another frame in the Studio with + Copy and send
it over, or drop in more images.
Draw a sprite, get the files your game needs
01Sprites
02Packed sheet
03PNG + atlas JSON
Loading images…
Playing——8×
Export
CSS
JSON
XML
Phaser3
Anim
/* Load sprites to generate CSS */
// Load sprites to generate JSON
// Load sprites to generate Phaser 3 atlas
// Create animations on the left to generate export
Download
Load sprites to enable downloads.
What are these two files?
spritesheet.png
Every sprite packed into one image.
atlas.json
A map telling your game where each sprite sits in that image.
Games load the pair together: the picture once, the map to find
things in it. This is the standard TexturePacker format, so
Phaser and Pixi read it as-is.
Sprite Studio
32 × 32not applied yet
← back to the sheet
Colour
Tools
Transform
Scale artwork
Enlarges the drawing, not just the canvas. Whole numbers only. A fraction would blur the pixels.
Brush
1
0
Colour
Shading ramp
Ramp is hue-shifted: shadows cool, highlights warm. [ / ] steps darker / lighter while you draw.
Palette
This canvas is wider than your screen. Turn the phone sideways for more room.
x — y —frame 1/1
Project
Actual size
1×
2×
Project
Nothing is stored in the browser. A refresh loses unsaved work. Save the project file if you want it back.
Start from
Guides land on a locked layer that is never exported, and set the symmetry that suits them.
Symmetry
Layers
100
Frames
Want it to move? Press + Copy,
change the copy a little, then ▶ Play.
Parts
Select an area, save it, then click the part to stamp it, mirrored if symmetry is on. Wheels, eyes, windows.
Tablet
Device now—
Pressure—
Tilt X / Y—
Samples / move—
Seen anywhere—
Peak pen pressurenever
Counts every pointer event anywhere in the studio, not just over the canvas. Hover the pen over this panel and watch.
1.0
Holding the nib still on the canvas opens the pen ring: tools, colours,
undo and zoom, wherever the pen already is. Q opens it from the keyboard.
That's a pen. Nice.
Have a scribble in the strip below. Nothing here touches your drawing,
it is just somewhere to check the pen before you commit a stroke.
Waiting for a stroke…
Once you're happy: hold the nib still on the canvas for a moment and the
tools come to you, wherever the pen is. Q does the same from the keyboard.