← Back to PopCraft

PIXELS ARE
BACK!

A full sprite editor that lives inside your design file. Palettes, pixel-perfect lines, frames, onion skin, tilemaps and sprite sheets for your engine. Double-click a layer and start going blip.
TRY IT FREE →
Open a sprite, step its frames, turn on onion skin0:10

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.

WHY BOTHER

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.

13
pixel tools, each on a key
4
classic palettes built in
3
colour modes: indexed, RGBA, grey
3
sheet layouts, each with JSON
GET STARTED

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.

Make a pixel canvas and draw on it0:08

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.

FLIP BOOK

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.

Open a sprite, step its frames, turn on onion skin0:10

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.

PALETTES

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.

PICO-816 COLOURS
DB3232 COLOURS
Endesga 3232 COLOURS
Game Boy4 COLOURS
INDEXED

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.

Load a preset palette: the sprite recolours itself0:06

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.

THE TOOLS

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

PIXEL-PERFECT

Removes the doubled corner pixels a freehand line leaves behind. Your curves stay one pixel wide.

DITHER

Ordered dithering, 2×2, 4×4 or 8×8 Bayer, mixes your primary and secondary colours in fills and shapes.

SYMMETRY

Mirror across the vertical axis, the horizontal one, or both. Draw half a face, get the whole face.

SHADING INK

Paint over a colour to step it along its ramp in the palette. Left goes one way, right the other.

LAYERS

Layers stack inside the canvas, so outline, fill and highlights stay separable in every frame.

PIXEL TEXT

Add a text layer in a real font and it renders to the grid, snapped to your palette. Change the font and the pixels follow.
TILES

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.

SHIP IT

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.

Export a sprite sheet with Aseprite-style JSON0:08

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.

THE OLD WAY

Sprite editor + design tool = a folder of stale PNGs

THE OLD WAYIN POPCRAFT
Draw in one app, export, import into the mockupThe sprite is a layer in the mockup
Re-export every time a pixel changesChange it once; every page that shows it updates
Recolour each variant by handIndexed palettes: swap the palette, keep the art
Email a .zip of sprites to the teamShare the file; they comment right on the sprite
Write your own sheet packerSheet export with JSON, by rows, columns or packed
GAME ON

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.

Game UI templates, from puzzles to RPGs0:05

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.

Idle, run, jump: a sprite you can play0:12

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.

FROM ZERO

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.
PLAY WITH IT

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.

ASKED & ANSWERED

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.

THE MANUAL, FOR THE DETAILS

BLIP! YOUR TURN.

Sprites, palettes, onion skin and sprite sheets. Free to start, in your browser or on your Mac.

OPEN POPCRAFT →