Steppy Steppy
How Steppy Steppy was made
No game engine, no fancy tools, no libraries at all. Here's how the bits actually fit together, and why they were done that way.
Nobody drew the characters
There are one hundred and eighty character pictures in this game — nine characters, six things each of them can be doing, several frames apiece — plus all the stones, the cracks, the clouds and the two islands. Not one of them was drawn by hand.
They're all produced by a small program that writes the drawings out as instructions: a circle here, a curve there, this colour, that thickness. Run it and out come all one hundred and eighty pictures.
Why bother? Consistency. Nine characters needing twenty pictures each is an awful lot of chances to get something slightly wrong — a head sitting two pixels too low on one of them, feet that don't quite line up with the ground between one pose and the next. You don't consciously notice that sort of thing, but you absolutely feel it when the character starts moving. It looks sloppy.
Building them all from one shared skeleton makes that kind of mistake more or less impossible. Each character is just a short list of colours and a couple of tweaks — skin, clothes, trim, boots, hair — and the code that poses them is identical for everybody. The wizard and the ent differ in their paint job, not their bones.
The really nice part is being able to change your mind. Adjust the proportions once and all one hundred and eighty pictures update together, still perfectly lined up. By hand that's an evening's careful work. This way it takes less than a second.
Skirts, wings, and heads that aren't heads
The variety on top of that shared skeleton comes from bits that snap on rather than from separate artwork. Five characters have a skirt or a robe, described by five numbers: where it starts, how wide it is, how much it flares out, where the hem sits and how far it hangs. Princess Sparklepants' gown and Wizzle's robe are the same handful of code with different numbers.
Two have wings. Three don't have a human head at all — the unicorn, the ent and the dalmatian — which is handled by switching off the usual hair and mouth and dropping in their own shapes instead. Dalmatian Pupface's ears get drawn in two passes, one behind his head and one in front, so they still look right as he turns through the jumping frames.
The sounds are made up too
Three sounds — a jump, a crumble and a little victory jingle — written out as sound files by a second small program. No sample library, no recording, no audio software. Just numbers describing a waveform.
Why it's built out of web page bits
The obvious way to build a game like this is to draw everything onto a single canvas and manage it all yourself. This one doesn't. Every stone, every island and every character is an ordinary element on a web page, the same sort of thing a paragraph of text is.
That's because of tapping. On a canvas, working out which stone somebody just tapped means keeping track of where everything is and doing the maths yourself, correctly, at every screen size and on every device. When each stone is its own element, you just ask the browser to tell you when that stone is tapped, and it does, perfectly, for free. Given the entire game is "tap the right stone", that turned out to matter more than anything else.
It also keeps everything sharp at any size, and it means the two stones which must be indistinguishable genuinely are — they're the same kind of thing, built the same way, differing only by a design number that has no connection whatsoever to whether the stone holds.
The camera is one line of maths
The whole world is one big container with every stone and island sitting at fixed positions inside it. There isn't really a camera at all — the view slides along by shifting that one container. Following the player across the course is just a number gently changing.
The world gets laid out once in its own space and then mapped onto whatever screen you're holding, so turning your phone sideways only changes the mapping. The game itself never finds out that anything moved.
It doesn't talk to the internet
Once the page has loaded, the game never contacts anything, ever. Every picture and sound is a file sitting right next to the page. That was a deliberate rule from the start, and it buys two things: the game runs perfectly with no server at all, and it keeps working if your connection drops out mid-jump.
It also means the game has no way of collecting anything about you even if it wanted to, which is a rather pleasant side effect. No storage, no cookies, no scores being sent anywhere. The privacy page covers what that leaves.
The timings are the whole game
Those two warning windows weren't the original numbers. The first version gave you well over twice as long, and the course was half the length, and there were only three characters. It was, frankly, boring.
Those couple of numbers are the entire difficulty of the game. There's no difficulty setting, nothing that gets harder as you go, and nothing that quietly helps you out when you're struggling. Making the game good meant getting those numbers right, and almost nothing else.