Lab

Nighthog-Skate: Liniengrafik auf Rollen

Das Maskottchen der Site fährt Skateboard durch eine gezeichnete Fußgängerzone, und der Roboter stellt die Hindernisse auf.

Die Motive dieser Site sind Strichzeichnungen: der Nighthog und sein Blechroboter, weiße Tusche auf Schwarz, immer zu zweit, immer mit derselben Arbeitsteilung. Der Roboter arbeitet die Menge ab, der Hog urteilt. Dieses Spiel macht daraus einen Sidescroller: Der Hog fährt Skateboard durch eine Fußgängerzone, der Roboter schleppt die Hindernisse heran, und das Urteilen übernimmst du. Springen oder ducken, mehr Entscheidungen gibt es nicht.

NIGHTHOG-SKATE — FUSSGÄNGERZONE

BESTWEITE 0 m

Der Roboter stellt die Hindernisse, der Hog weicht aus.

Pfeil hoch oder Leertaste springt (länger halten springt höher), Pfeil runter duckt; vorher das Spielfeld anklicken. Auf dem Telefon übernehmen die Tasten unter dem Feld. Wer erst zuschauen will, wählt Automatik: Dann spielt eine Zwei-Regeln-Maschine, und jede eigene Eingabe übernimmt.

Die Szene ist Code

Anders als bei den Figuren gibt es für die Fußgängerzone keine Bilddateien. Ladenfronten, Laternen, Bäume und das Pflaster sind Canvas-Pfade, in drei Parallax-Ebenen, die unterschiedlich schnell ziehen. Damit die Linien gezeichnet wirken statt konstruiert, bekommt jedes Segment ein kleines Zittern. Der naive Weg wäre Math.random(), aber dann wackelt die Szene in jedem Frame. Stattdessen kommt der Versatz aus einem winzigen Hash über Weltposition und Segmentnummer:

// Deterministischer Pseudo-Zufall (±1) für das Handzitter der Linien:
// gleiche (seed, i) → gleicher Offset. Kleine Hash-Mischung, kein RNG-State.
export function zitter(seed: number, i: number): number {
  let h = (seed * 374761393 + i * 668265263) | 0;
  h = Math.imul(h ^ (h >>> 13), 1274126177);
  return (((h ^ (h >>> 16)) >>> 0) % 200) / 100 - 1;
}

Gleiche Eingabe, gleicher Offset: Die Linie ist krakelig, aber sie steht. Beim ersten Wurf hatten die Hindernisse ihren Seed trotzdem aus der Bildschirmkoordinate, die sich mit der Kamera ändert. Ergebnis: Die Welt stand still, nur die Mülleimer kochten. Seitdem kommt der Seed überall aus der Weltposition.

Vorne und hinten

Die erste spielbare Fassung hatte ein Problem, das im Code unsichtbar ist und am Bildschirm sofort auffällt: Alle Ebenen zeichneten mit derselben Linienstärke im selben Weiß. Ladenfront, Laterne und Mülleimer hatten exakt dasselbe Gewicht, und niemand konnte sagen, was Kulisse ist und was gleich wehtut. In einer einfarbigen Strichzeichnung gibt es keine Farben und keine Schatten, die das klären. Es bleibt genau ein Werkzeug: Luftperspektive. Hinten zeichnet die Szene jetzt mit einem Pixel Strichstärke in Dunkelgrau, die Mitte etwas kräftiger in Mittelgrau, und die Spielebene voll weiß, die Hindernisse sogar mit 2,5 Pixeln. Dazu flog Deko raus: keine Zickzack-Schilder mehr, keine Regalbretter in den Schaufenstern, mehr Lücke zwischen den Läden. Was man treffen kann, leuchtet. Alles andere hält den Mund.

Der Roboter stellt die Hindernisse

Hindernisse, die aus dem Nichts am Bildrand erscheinen, erzählen nichts. Hier bringt sie der Roboter: Er flitzt schneller als das Welttempo von rechts herein, holt die Stelle ein, an der das nächste Hindernis geplant ist, beugt sich kurz zum Abstellen und verschwindet wieder. Die Arbeitsteilung der beiden Figuren als Spielmechanik.

Die erste Version dieser Inszenierung hatte einen Fehler, den kein Unit-Test findet: Der Roboter startete am rechten Bildrand, sein Ziel lag aber noch weiter rechts davon. Die Ankunftsbedingung war sofort erfüllt, der komplette Auftritt spielte rechnerisch korrekt ab, nur eben komplett außerhalb des Bildes. Aufgefallen ist es erst, als eine Sichtprüfung über neunzehn Frames keinen einzigen Roboter fand. Seitdem startet er neunzig Einheiten rechts vom Ziel und holt es sichtbar im Bild ein.

Ein Igel ohne Brille

Die Figuren sind generierte Strichzeichnungen im Stil der Site-Motive, vier Posen für den Hog, zwei für den Roboter, freigestellt auf Transparenz. Beim ersten Durchgang trug der Hog plötzlich eine runde Brille. Sah harmlos aus, war aber doppelt falsch: Der Nighthog hat nie eine getragen, und Bildgeneratoren setzen Brillen chronisch daneben, der Bügel endet gern unter dem Ohr. Das Merkmal stand noch in einer alten Prompt-Vorlage. Es ist jetzt überall gestrichen, und jeder Figuren-Prompt sagt ausdrücklich: keine Brille.

Automatik als Erklärung

Der Automatik-Modus ist keine KI, sondern zwei Regeln: Hängt vor dem Hog etwas (Markise, Schild, Wäscheleine), ducken, bis es vorbei ist. Steht etwas auf dem Pflaster, springen, sobald es den tempoabhängigen Absprungpunkt erreicht. Das genügt, um endlos zu fahren, denn die Spawn-Abstände sind in Sekunden Fahrzeit definiert und die Sprungdauer hängt nicht vom Tempo ab. Wer dem Automaten zusieht, sieht also keine Kunststücke, sondern die Spielbalance beim Arbeiten: Jede Lücke ist per Konstruktion schaffbar. Das ist dasselbe Muster wie beim Lunar-Lander-Autopiloten, der auch nur ein Thermostat war.

Das Tempo beginnt bei 140 Einheiten pro Sekunde und steigt alle fünfzehn Sekunden um zwölf Prozent, gedeckelt beim 2,2-Fachen. Ab da hilft nur noch Präzision. Die Bestweite bleibt im localStorage, Cookies gibt es hier keine.

Die Schwester-Spiele im Labor-Journal: Block Invaders rechnet in Zeichen statt Pixeln, der Lunar Lander regelt mit dem Thermostat.

Gebaut aus Tokens, nicht aus Stock-Fotos. Keine Cookies an Bord.