Starforge
By
@lacorte
- 4 Devlogs
- 29 Total hours
A multiplayer pixel art & animation studio that runs entirely in the browser
Ship #1
Pending review
⭐ Starforge is a pixel art studio that runs entirely in your browser. Open starforge.lacorte.city and draw.
This first ship is the whole editor core, built from scratch in TypeScript with zero dependencies in the core.
Draw: pencil, eraser, line, rectangle and ellipse (outline or filled), and a bucket fill with per-channel tolerance and a contiguous/global switch. Rectangular selection that lifts the pixels and lets you drag them anywhere.
Layers: add, duplicate, reorder, rename. Per-layer opacity, seven blend modes, visibility and lock.
Keep your work: undo/redo across pixel strokes and structural edits alike, autosave in the browser, and PNG export If the editor ever crashes, the error screen still exports your drawing.
Under the hood: 208 tests, including property tests that throw hundreds of random actions at the history and require a byte-identical document back. The renderer composites once per change, not once per layer: the cache key is two integers, and panning triggers zero recompositions. Flood fill, Bresenham lines, ellipse rasterizer, composito, all hand-rolled, no graphics libraries.
Where it’s going: the “multiplayer” in the tagline is the arc: a hand-rolled CRDT (last-writer-wins per cell with Lamport clocks) and shareable rooms are the next major ships.
Works on your phone. Shortcuts follow Aseprite. Press ? in the editor.
⭐ Starforge is a pixel art editor that runs in your browser. No engine work today, since I focused on a more important point: Whoever opens starforge.lacorte.city from a feed post, leaves in about two minutes, with no instructions and usually a phone in their hand, so the whole day went into that first visit. You can start your own document now insted of only erasing the star, your drawings survives a reload, and on a phone the layer panel became a drawer.
How it works
Most web editors take your drawing with them when they break. This one doesn’t. When a component throws, an error boundary renders a screen where Export PNG still works, if the editor dies, you get the PNG out before you reload.
Two reasons that’s possible. The document never lived inside the component that broke: it belongs to the DocumentSession, outside the render tree. And the export never goes through the editor, it composites the frame straight from the document. The thing that holds your art and the thing that failed are not the same thing.
Receipts:
- 208 green tests
- draw, reload, auto-save
- a keys help menu for shortcuts and gestures
- zoom by button, fit in one click
Tomorrow morning the first real ship goes out :D
⭐ Starforge is a pixel art editor that runs in your browser. Yesterday it could only draw in a single surface. Today the same old star is five stacked layers, carrying its own opacity, visibility and lock, plus a rule for how its colors blend with the layers below.
How it works
Compositing every layer on every frame can’t hold 60fps. At 256x256 with eight layers at 800% zoom that’s eight blits of 2048×2048 per frame, about 33 megapixels of work to show a picture that didn’t change. So the editor composites once per change into an offscreen canvas, and the screen just draws that one image. Rendering with no cost since that nothing changed.
All with 169 green tests.
⭐ Starfoge: A multiplayer pixel art & animation studio that runs in your browser.
Day three, and it finally draws! The whole toolbox landed with six drawing tools and keyboard shortcuts already known by pixel artists. Yesterday’s 37 green tests are 117 today.
Today i want to deep dive in one of the questions i had: why fast strokes come out dotted. The browser only tells the page where the mouse is once per screen frame (~60fps), but a hand can cross half the canvas between two of those reports and a quick zigzag would become a trail of separated dots.
The fix comes in two layers:
First, the browser actually keeps the positions it skipped and hands them back in a bundle with each event, so I ask for those in-between samples.
Second, even those have gaps when the gesture is really fast, so between every pair of samples I draw a tiny line using Bresenham algorithm, the same grid walker my line tool uses, it steps from one pixel to a touching neighbor and can’t skip a cell by construction. So every stroke you see is secretly dozens of tiny straight lines, stitched end to end.
Tomorrow i will start landing Layers to our studio. Thanks for reading and see you on the next devlog :D
⭐ Starforge is alive in the browser! This is day two building a multiplayer pixel art studio. So far the editor opens with a little star, and every pixel stays razor sharp at any zoom. With 37 green tests I already started coding the first drawing tools (pencil, eraser, bucket).
The sharpness comes from a two stage blit with shared memory. A sprite’s pixels live in one Uint8Array wrapped in an ImageData view, using only one buffer for model and image bytes. Stage one pushes just the changed rectangle onto an offscreen canvas (1:1) which ignores scaling and smoothing so it never blurs. Stage two is a single draw image that stretches the offscreen canvas to the current zoom with the GPU doing the nearest-neighbor upscaling for free. When the pencil lands next ship, the bytes it writes are already the bytes the renderer reads.
