Pixel Editor
Sprites and tilemaps, pixel by pixel: frames, onion skinning, palettes, per-tile collisions, normal maps, 9-slice, and GIF or Aseprite export.
In one line#
A sprite and tilemap editor built for working at 32×32 as comfortably as at 1024×1024, with animation frames and colour tooling that understands palettes.
The layout#
| Menu bar | File · Edit · View · Plugins |
| Mode tabs | Sprite and Tilemap |
| Toolbar | New, undo/redo, canvas size, crop, layer flatten, flip horizontal and vertical, grid, import, export, Save |
| Options row | brush size, brush shape, opacity, split view, and presets |
| Left rail | pencil, shapes, fill, gradient, text, selection, eyedropper, colour pair, palette |
| Centre | the canvas, with a small read-out of the current tool and colours, and a Preview at 1:1 |
| Right | Layers, then Effects, Normal map, Reference and Modes |
| Bottom | the frame timeline, then the palette bar |
| Status bar | canvas size, active layer, zoom |
What you do here#
Draw#
Space + drag pans, the scroll wheel zooms, 0 resets the view. The brush has a
size and a shape (square by default), and an opacity. The preview panel shows the
sprite at 1:1 while you work zoomed in, which is the only honest view of a
pixel sprite.
Layers#
Named, reorderable, with a blend mode and an opacity each, plus a colour tag and a filter box for when there are a lot of them. Effects applies non-destructively.
Animate#
The timeline along the bottom is a strip of frames. Add, duplicate, delete, reorder; set a duration in milliseconds per frame; play forwards, backwards or ping-pong. The read-out tells you what that adds up to, 1 frame • 100 ms • ~10 fps.
Onion shows the neighbouring frames faintly under the current one, which is how you keep a walk cycle from drifting.
Colour#
The palette bar is the part that repays learning:
| Palette | the working set, with a count and + Add |
| Recent | what you have picked lately |
| Shades | a light-to-dark ramp generated from the current colour |
| Harmony | complementary, triadic and analogous suggestions |
| Ramp | a ramp you build and keep |
The current colour is editable as hex.
Tilemaps#
The Tilemap tab switches from drawing a sprite to laying one out as tiles. The result goes to Engine, which has its own tilemap editor for the level itself.
Normal maps#
The Normal map section derives a normal map from the sprite, so a 2D sprite can be lit in the Engine rather than staying flat.
Reference#
Drop an image into the Reference section and it sits behind the canvas while you draw over it.
The panels#
Nine of them, and the last four are what turn a sprite into a game asset:
| Tool Palette | the tools |
| Layers | the stack |
| Timeline | the animation frames |
| Reference | an image behind the canvas |
| Effects | non-destructive effects on a layer |
| Tileset | build a tileset out of the canvas, at a chosen tile size |
| Tilemap | lay those tiles out into a map |
| Collisions | per-tile collision shapes |
| Normal Map | derive and edit a normal map |
Tilesets and tilemaps#
The Tileset panel cuts the canvas into tiles (16 px by default); the Tilemap panel lays them out into a map with layers, and can resize it.
Tilemaps save as .tilemap, and export two ways: as one file, or
separately: the map as JSON and each tileset as its own image, which is what
an external engine usually wants.
Collisions#
Each tile carries a collision shape, drawn on top of the tileset rather than declared in code:
| Full | the whole tile collides |
| None | passable |
| Top / Bottom / Left / Right half | partial collision |
| Slope up / Slope down | angled collision |
Show Collisions overlays them, and the whole set exports as JSON. Doing this here means Engine receives a tilemap that already knows what the player can walk on.
Normal maps#
Generate Normal Map derives one from the sprite, with a strength; the
Normal Map Editor then lets you paint the normal direction by hand (P),
which is the only way to fix the places the automatic pass gets wrong.
9-slice and pivot#
9-Slice guides mark the stretchable regions of a UI sprite, and Pivot / Origin sets the point the sprite rotates and anchors around. Both travel with the sprite into the Engine.
Symmetry#
Mirror X and Mirror Y paint both sides at once: horizontal, vertical, both, or radial.
Colour ramps and palettes#
The Color Ramp modal builds a ramp properly rather than by eye, and palettes
import from .gpl (the GIMP palette format most pixel-art palettes ship in).
Exporting#
| Format | For |
|---|---|
| PNG | a single frame |
| GIF | an animation, everywhere |
| APNG | an animation, with real alpha |
| Aseprite | back into Aseprite, layers intact |
| Atlas / sprite sheet | a game engine |
.tilemap | the map, together or split into JSON + images |
Files it reads and writes#
| Native format | .editor |
| Imports | .png, .jpg, .aseprite, .tilemap, .gpl (palettes) |
| Exports | .png, .gif, APNG, .aseprite, sprite atlas, .tilemap (together or split), collision JSON |
Sending work to other studios#
Produces pixel art. Accepts pixel art and images.
Pixel art is accepted by Inkwell, Composer, Animator, Matter and Engine: a sprite sheet can go straight into a game without a round trip through a file.
Working with someone else#
The Pixel Editor syncs operation by operation: scene data, assets, animations and scripts.
Limits and common snags#
- Zoom is not resolution. The status bar shows the real canvas size; the Preview shows it at 1:1.
- A soft brush is not a pixel brush. Opacity below 100% will anti-alias your edges, usually not what you want on a sprite.
- Frame duration is per frame, not per animation. A 12-frame cycle at 100 ms each runs at ~10 fps, whatever the others do.