PIXELS ARE
BACK!
The SPROUT QUEST platformer template. The Sprout run sprite, a four-frame run cycle, is opened with Edit pixels and the editor becomes a sprite editor with the frame timeline along the bottom. The frames are stepped through with the arrow button, onion skin is turned on so the frames either side show as ghosts, and Play runs the cycle.
Your sprites, next to everything else
The request we kept getting was not dark mode. It was one sentence in a hundred phrasings: can I draw my sprites in here too? Game folks had a sprite editor in one window, a design tool for the menus and the store page in another, and a folder of exported PNGs going stale in between.
So we built a pixel studio into the editor. A pixel canvas is just another layer. Drop one on a page, set it to 16×16 for an icon or 320×180 for a title screen, and double-click. Everything else in the file keeps working around it: frames, components, comments, collaborators. Your sprite sits right next to the store banner it appears on, and when you change it, the banner has the new one.
A canvas is a layer
The rectangle group in the toolbar holds Pixel canvas. Drag one out, or grab a 32×32 from the Assets panel. Canvas in the inspector is the resolution in cells, and you can change it whenever you like.
Pick up the pencil and every stroke fills whole cells, the way pixel art is drawn. No anti-aliasing smearing your edges, no blurry scaling. Just crisp, chunky squares.
An empty canvas. A pixel canvas is placed from the Shapes panel: a 32×32 grid of cells. With the pencil, a few strokes fill whole cells, the way pixel art is drawn.
Frames, onion skin, play
This is the hero of SPROUT QUEST, a little platformer template that ships with PopCraft. His run cycle is four frames on one pixel canvas. Hit Edit pixels and the timeline opens along the bottom: one thumbnail per frame, a duration in milliseconds on each.
Turn on Onion skin and the frames either side show as ghosts, so you can see the motion you are drawing into. Choose how many frames back and forward, and how strong. Then press Play, forward, in reverse or ping-pong, or tag a range and play just that.
The SPROUT QUEST platformer template. The Sprout run sprite, a four-frame run cycle, is opened with Edit pixels and the editor becomes a sprite editor with the frame timeline along the bottom. The frames are stepped through with the arrow button, onion skin is turned on so the frames either side show as ghosts, and Play runs the cycle.
Classic colours, one click
These strips are the built-in presets, pixel for pixel. Load one onto an indexed canvas, or import your own from a .gpl or .hex file. Export your palette back out the same two ways.
Swap the palette, keep the art
In Indexed mode each cell holds a slot number, not a colour. So when the palette changes, the whole sprite recolours at once. Night level? Poison variant? Team colours? Load another palette or edit one swatch, and every pixel using it follows.
Prefer free colour? RGBA mode stores a full colour per cell. Grayscale stores a single value, which is just right for masks and height maps. Switching modes converts every frame, quantizing to the palette when you go indexed.
The SPROUT QUEST platformer template, zoomed in on the Sprout idle sprite, an indexed pixel canvas. Its palette swatches are in the inspector. Choosing a preset palette from Load preset replaces the swatches, and because every cell holds a palette index rather than a colour, the sprite recolours at once. A second preset recolours it again.
Thirteen tools, thirteen keys
When you edit pixels, the toolbar swaps for the pixel set. Every tool is one key away, the way muscle memory likes it.
- BPencil
- EEraser
- GFill
- LLine
- URectangle
- ⇧UEllipse
- DContour
- MMarquee
- QLasso
- WMagic wand
- IEyedropper
- VMove selection
- TTile stamp
DITHER
CHECKER!SYMMETRY
MIRROR!SHADING INK
RAMP!LAYERS
STACK!PIXEL TEXT
CRUNCH!Make worlds, not just sprites
Tiled preview repeats the canvas around itself, horizontally, vertically or both, which is how you check a grass texture actually tiles before you build a level out of it.
Convert splits a canvas into a de-duplicated tileset and a tile map at the tile size you give it. The Tile stamp tool (T) paints with those tiles, and the pixel tools paint into the tile itself, so every placement updates at once. Fix one brick and the whole wall is fixed.
Sprite sheets your engine can read
Select a canvas and add an export. Pick Sheet and lay the frames out by rows, by columns or packed. You get a PNG with every frame and a JSON file of the frame rectangles and durations, in the array form Aseprite writes. Hand both to your engine.
Or export PNG at any whole-number scale with nearest-neighbour sampling, so 16×16 becomes a crisp 64×64 or 256×256. Export an animated GIF of every frame, a tag, or a range. SVG is there too, for when a sprite needs to be a vector.
The SPROUT QUEST platformer template with the Sprout run sprite selected, the hero’s four-frame run cycle. In the inspector, Add export adds an export at 4×; its format is changed to Sheet and its layout to Packed, which writes a PNG of every frame and a JSON file of the frame rectangles and durations. Export downloads both.
Sprite editor + design tool = a folder of stale PNGs
| THE OLD WAY | IN POPCRAFT |
|---|---|
| Draw in one app, export, import into the mockup | The sprite is a layer in the mockup |
| Re-export every time a pixel changes | Change it once; every page that shows it updates |
| Recolour each variant by hand | Indexed palettes: swap the palette, keep the art |
| Email a .zip of sprites to the team | Share the file; they comment right on the sprite |
| Write your own sheet packer | Sheet export with JSON, by rows, columns or packed |
From sprite to something you can play
Your sprites live in the same file as the rest of your game's look: menus, HUDs and title screens from the game UI templates, and state machines that switch animations when a button is held.
The new file gallery, searched for “game”: the Game UI templates are listed, from a match-3 puzzle to a racing HUD. EMBERFALL, a fantasy RPG interface, is picked and opened on its boot screen; the layers panel lists every screen of the game, from the title and main menu to the victory screen.
The Mossy Hollow platformer in present mode. Holding RUN switches Pip from Idle to its Run loop and letting go switches back; JUMP plays the Stomp one-shot, SLASH the Slash one-shot, and the outlined pill shows which state is playing. The Gloop tab opens the slime’s own machine: the pointer entering its sight makes it spot you and chase, and a click squashes it.
Your first sprite in six moves
- 1
Drop a canvas
Pick Pixel canvas from the rectangle group in the toolbar, or from Shapes. Canvas in the inspector sets its size in cells. - 2
Choose a palette
Indexed mode with PICO-8, DB32, Endesga 32 or Game Boy, a .gpl or .hex file of your own, or full RGBA. - 3
Edit pixels
Double-click it, or hit Edit pixels. The toolbar swaps for the pixel set and the timeline opens along the bottom. - 4
Draw the first frame
Pencil with Pixel-perfect on, Fill, Line, shapes. Layers inside the canvas keep outline, fill and shine apart. - 5
Animate it
Duplicate the frame, nudge, repeat. Onion skin shows the frames either side. Give each frame its own duration. - 6
Ship it
PNG at any whole-number scale, an animated GIF, or a sprite sheet with JSON for your engine.
Open SPROUT QUEST
In PopCraft, click New file and search for Sprout Quest. The hero, the slimes, the coins, the bricks and the hills are all pixel canvases with real palettes and frames. Take them apart, redraw them, and make the game yours. The pixel art docs cover every control.
Questions, answered
Is this a separate app?
No. A pixel canvas is a layer like any other, on the same page as your vectors, type and frames. Double-click it and the editor becomes a sprite editor; press Done and you are back in your design.
Which palettes come built in?
PICO-8, DB32, Endesga 32 and Game Boy. You can also import a .gpl (GIMP) or .hex file, and export your palette the same two ways. In indexed mode, editing a swatch recolours every pixel that uses it.
Can I animate sprites?
Yes. The timeline along the bottom holds the frames: add, duplicate and reorder them, set each one's duration in milliseconds, tag ranges, and play forward, in reverse or ping-pong. Onion skin ghosts the frames either side of the one you are drawing.
What does a sprite sheet export give me?
A PNG with every frame laid out by rows, by columns or packed, plus a JSON file of each frame's rectangle and duration in the array form Aseprite writes, so game engines and tools that read that format can load it.
Can I make tilesets?
Yes. Tiled preview repeats the canvas around itself so you can check a texture tiles. Convert turns a canvas into a tilemap at the tile size you give it, and the Tile stamp tool paints with those tiles; editing a tile updates every placement.
Do onion skins or the reference image end up in my export?
Never. The reference image, the tiled copies and onion skins show only while you are editing.
BLIP! YOUR TURN.
Sprites, palettes, onion skin and sprite sheets. Free to start, in your browser or on your Mac.