How lipp learned to fly

The old character at the top was a single image, cut into head, torso and legs, and each part swung a little to pretend he was flying. It worked, but he was a paper doll.

Now he has a real sprite sheet: one row hovering, one flying left and one flying right. And he no longer lives only at the top: he flies across the whole site.

Cutting without a grid

The original sheet had no regular grid. Every frame had its own size, spacing and position, and the edges were semi-transparent.

Instead of cutting it by hand, I wrote a script that reads the PNG directly, with no dependencies, just Node's zlib:

1. Every semi-transparent edge becomes a full or an empty pixel. Pixel art has no in-between.
2. Each sprite is found by transparency, like an island of pixels. Small specks are dropped.
3. The islands are grouped into rows: hovering, left and right.
4. Every frame is aligned on its centre of mass and copied into a cell of the same size.

No pixel is ever resampled. If the art changes, just run it again:

node tools/build-sprites.mjs

Flying, not sticking

The first version was too fast and glued itself to the cursor. It looked like a pointer wearing clothes.

Now the cursor is only a destination. He speeds up gradually, has a top speed, feels drag and brakes as he arrives. And he never quite arrives: he stops a fixed distance away and floats there. If the mouse comes at him, he backs off.

The physics runs in fixed steps, whatever the screen's refresh rate. The animation also runs on the clock, between 6 and 8 frames per second, to keep that old-game feel.

Turning without teleporting

When you switch sides mid-flight, only the sprite flips. The body keeps its momentum, brakes and makes the turn. It is a small detail, but it is what makes him feel like he has weight.

The details

• He never blocks a click. Everything under him keeps working.
• At the top, he passes behind the dialog box, not over it.
• With reduced motion turned on in your system, he stays still at the top of the page.
• Open the site with ?debug at the end of the URL to see his target, position, speed and state in real time.

Oh, and the site has secrets now. If you get stuck, the terminal in the footer gives hints.

* You read to the end. That counts for something.