Overworld

The ask

I've always wanted a game like Zelda: A Link to the Past, but set in a cyberpunk world. So I asked Claude Opus 5.5 for the first piece of one, an overworld map that a character can walk around in. The inventory screen, weapons and bad guys can wait.

I wanted it to play the same as the Super Nintendo game, with the camera hovering over the player as he walks.

How it walks

The screen is 256 by 224 pixels, the Super Nintendo's resolution. You walk at 1.5 pixels a frame, 60 frames a second, and walls sit on an 8-pixel grid, as they did on the SNES.

The camera is locked to the player with no lag, and it stops at the edge of the area you're in. Walk off that edge and your input freezes while the screen scrolls over to the next area, and you walk in about 22 pixels on your own. Then a banner drops in with the area's name. The Areas button, or C, switches to a camera that just follows you around, with no scrolling between areas.

Walk straight into the corner of something and, if there's a gap within 7 pixels to one side, you get nudged into it. That makes doorways and gaps between posts easy to hit. If you're dead centre on a post, it nudges you neither way.

The West Hills have rock faces you can hop down but can't climb, with stairs cut through them. You keep facing the way you were going while that key is still held, so walking diagonally doesn't spin you around. Let go of it and you face whichever key you pressed last.

The city

It's Portland, where I grew up. That was Opus's idea.

The map is 128 by 128 tiles, a little over 70 screens' worth, with 55 buildings, 54 neon signs and more than 1,800 props. The Willamette runs north to south a little east of the middle, crossed by the Steel, Burnside, Hawthorne and Tilikum bridges.

01Forest Park

Trails and a creek, with glowing mushrooms, fog and fireflies. The trail north loops around the Witch's Castle. It has no roof, and there's a fire going inside.

02West Hills

Terraces climb past a corp villa that stands in for Pittock Mansion. Up on Council Crest the comms towers blink red.

03Rose Test Garden

Beds of neon roses, an amphitheater, and a Japanese garden with a koi pond and a torii gate.

04Marquam Tangle

Traffic runs on the freeway overhead, and there's a camp with fire barrels next to the ramp. OHSU sits on its hill to the west, at the top of the aerial tram.

05Pearl Arcology

The arcology, and Union Station with its clock tower and GO BY TRAIN sign. Light rail runs along Lovejoy and out over the Steel Bridge.

06Downtown

You start in Pioneer Square, by a spinning wireframe hologram and a weather machine. Old Town's gate stands over Broadway. The White Stag sign is up on a roof by the Burnside Bridge, and a night market runs under lanterns by the river.

07South Waterfront

The aerial tram rides its cable up to the hill, and the lights on the Tilikum change colour. Ross Island sits out in the river where you can't reach it.

08Albina Railyard

Freight cars on the tracks and a roundhouse between them, with signal lights blinking overhead.

09Eastside

Warehouses, and a food cart pod under string lights.

10Hawthorne

The marquee on the Bagdad scrolls NOW SHOWING NEUROMANCER.

11Oaks Park

A turning ferris wheel, a carousel, game booths and a roller rink.

Over all of it there's rain, with the odd flash of lightning. Steam comes out of the manholes, flying cars pass overhead, and the pigeons in Pioneer Square scatter when you get close.

No image files

There isn't an image file in the whole game. Every tile, building, sign and sprite is drawn by code when the page opens, which takes about two seconds. Then the city is lit once by all 454 of its lights. The light is rounded off into steps and dithered, so pools of light come out in pixel-art bands instead of smooth gradients. Lamps leave wet streaks of reflection on the pavement and the water.

The player is a runner in a hooded jacket with a cyan visor. Link wore green, and this guy wears volt, the site's yellow-green, which in its games is the colour that means you. He picks up the colour of whatever light he walks under, blending from one light to the next.

What it had to work out

The first lighting pass was washed out, with the streets nearly white. Opus turned the base light and the lamps well down.

Neon signs and video screens hung in front of lit windows let the window light shine through them. Opus fixed that by wiping out the glow behind anything solid.

The riverside walk on the east bank was laid after the streets and paved over the bridges where they land. Now streets always win, and a test checks that every bridge is road all the way across.

The torii gate in the Japanese garden blocked its whole width, so you couldn't walk through it. Opus made just the pillars solid.

In a background tab the browser slows timers to once a second, which turned the two-second load into about a minute. Opus changed the loader so it doesn't depend on those timers.

How it checked its work

Opus built it in one session, about 5,000 lines of JavaScript and 16 tests. The map tests walk the whole city with the game's own collision. They check that every area can be reached from the start, and that anywhere you can get to you can walk back from, so no ledge can trap you. They also check that the map comes out the same every time.

The movement tests cover speed, walls, the corner nudge, ledges, facing and both cameras. Opus also drove it in a browser by script, including touch controls on a phone-sized screen.

What comes next

There's no sound yet, and no people, enemies, items or inventory. Once the overworld is right, we'll start thinking about other game mechanics.

Play it

Overworld is in the arcade. Arrows or WASD walk, M brings up a map of the city with you blinking on it, R turns the rain on and off, and C switches the camera. Gamepads work. On a phone, drag anywhere to walk. Give it a couple of seconds to build the city.