Zapping into nodes | Indigo Nights

Hex can now jump off a tower, fly down a link to the next one, land on its roof and teleport inside. What happens inside is a panel that says hack battles are coming soon.

Where it started

The hacking mode went into the idea backlog on October 5 as two pieces. One was a mix of turn-based and real-time play, with “guitar hero style” key sequences that boost a skill. The other was a picture of the player: “a cyberspace avatar moving through a network, encountering hackable obstacles and enemies to achieve a certain objective.” The engine decision of the day before had already put Three.js next to PixiJS for it, and the backlog says the design and gameplay come later.

The test scene

On October 13 that test scene ran inside the real game, a blocky robot between a pink polyhedron and a yellow cube on a neon grid, and it plays itself since it has no input.

The first 3D hack scene: a blue outlined robot between a pink polyhedron and a yellow cube on a neon grid, with ICE and TRACE readouts top left and NODE 07 top right

The part I cared about was the jump between the two modes. I’d said “What’s important is a seamless, styled transition between the two game modes,” so Claude built three styles and I picked the glitch one from GIFs on the 12th. On the 13th I asked for it to last “2 seconds both ways.”

Sketches

Then it stayed a test scene for two weeks, until I sketched the design by hand on October 28 as a notes page and three storyboard boards. The notes say one character, the hacker, with every node locked at the start. Combat unlocks a node, and there’s a box that says “No direct movement”, with the loop inside it: select node, then combat. Combat is turn-based, with each skill boosted by a timed run of key presses.

My notes page, titled Shadow Jog, Hack game design: mission types, enemies and combat on the left, gameplay on the right, and a box that says No direct movement: select node, combat

Two frames from my storyboard: a top-down map mostly under gray fog, then a close view of a tower labeled target node with a blue connection to it, captioned “Player selects node, camera zooms and tilts to the player zapping to that node”

In chat that day I settled the loop and the first mission. The hack is a node map only, with no lane to run down and no steering. The first hack in Chapter 1 replaces a relay puzzle in the K-M Annex.

Towers

Claude’s first build merged on the 29th: eight nodes, fog over everything not connected to an unlocked node, a reticle you move with the arrow keys, and the zap. Then I wrote notes. I wanted the nodes to feel bigger, “more like city towers of varying heights and designs”, with Hex zapping into them “like a digital teleport” and the fight happening inside. The spacing doubled (“by about 2x”) and grew by a quarter that evening. The lines between nodes vanished against the floor grid, so they became ribbons. One of my notes that day was “resolution looks much better. MVP sound effects are great.”

The first top-down view: a small dark patch of neon grid cut out of gray fog, three tower nodes joined by two bright cyan links, and a HUD that reads ROUTER LOCKED and NODES 1/8

The camera at the foot of a tower washed out in white light as Hex zaps in, with ZAPPING TO THE TOWER and HOLD X JACK OUT at the bottom left

A body for Hex

Claude’s first body for Hex was a low-poly base mesh (Bitgem), with a hand-made skeleton and clips from a Blender script. On October 29 I judged the deformation and poses poor. That day I downloaded Mixamo’s stock Y Bot and picked it from stills of three bodies, and it replaced the mesh and the rig. A script cuts it down to 2,448 triangles, and Claude retargeted the Mixamo clips onto it. The Mixamo terms still need a careful read before a release.

The tools

Claude built the Hack Editor over the 30th and 31st. It’s a page where every look value of the hack (camera, timing, glow, fog) lives in one checked data file, with a timeline I can scrub. On the 31st it was renamed the Hack Designer and gained a Network maps mode for laying out nodes and links. I chose layout only, with no enemies at nodes until there’s a combat design. Each step gets checked by a second agent, and the first round on the map mode failed with six Important findings.

On November 1 I edited the Annex map myself and it went from 8 nodes to 14. Then I asked: “If I drop a node on a line, that should automatically create the corresponding links.” Claude built it, and it split one link in my map that ran under a node. The same day I set the order of the zap: the camera drops to just behind Hex, Hex jumps into flight, flies the link and lands, and then the warp starts. Claude used two more Mixamo clips for the jump and the landing.

The timeline is the part of the Designer I think is pretty impressive. It works like a motion design timeline. Each sequence gets rows for its beats, the camera and Hex’s animation clip, plus a Look row for the glow and fog preset and a row for one-off events like take-off and touch-down. Most of the bars are worked out from the hack’s data file, so when I change a timing value they move with it, and clicking a bar takes me to its values in the panel on the right. Dragging the playhead scrubs the real 3D scene, so I can stop Hex partway down a link and check the camera from there. All seven sequences work this way, from picking a node to coming back to the map.

The Hack Designer on the 3-second Fly sequence, paused at 1.50 seconds: Hex in flight toward a locked pink tower in the center, camera and timing sliders on the right, and a timeline below with rows for Beats, Camera, Hex clip, Look and Events

Where it stands

The Annex hack works from start to finish, but a node only lets you in when you press Z and there is no combat inside. Browsers with no WebGL 2 will get a short chain of timed rings instead of the 3D mode, which I decided on October 31. No hack combat design exists yet beyond the notes on my page.