Basket Parkour 3D
Making-of einer 3D-Browser-Demo: Parkour in der dritten Person, Korbwürfe, ein Level-Editor und ein von Claude gesteuerter Level-Generator.
Basket Parkour 3D ist eine Tech-Demo: ein Spiel in der dritten Person, in dem man über Dächer und Baustellen läuft und springt, um vor Ablauf der Zeit jeden Korb zu treffen. Das Ziel war eher technisch als spielerisch: herausfinden, wie weit ein 3D-Spiel heute im Browser kommt, ohne Installation, gebaut in kleinen, überprüfbaren Schritten zusammen mit Claude.
Der Stack
Das Spiel ist in TypeScript mit Vite geschrieben. Gerendert wird mit Three.js, ohne UI-Framework: HUD, Menüs und Ergebnisse sind einfaches HTML über dem Canvas. Die Physik übernimmt Rapier: Die Spielfigur ist ein kinematischer Character Controller (eine 1,8 m hohe Kapsel), Ball, Fässer und Kisten sind dynamische Starrkörper. Für den Ton sorgt Howler, dahinter steht ein kleines PHP- und MySQL-Backend für Level, Fortschritt und Bestenlisten.
Ein Level-Format, drei Autoren
Jedes Level ist eine JSON-Datei, und ein einziger Validator (LevelSchema.ts) entscheidet, was gültig ist. Derselbe Code wird von drei verschiedenen „Autoren“ genutzt:
- dem Spiel, das das JSON in Three.js-Meshes und Rapier-Collider verwandelt;
- dem Browser-Editor, der dieselbe Engine wie das Spiel nutzt: Objektpalette, Gizmo, Eigenschaften, Import von 3D-Modellen und eine „Playtest“-Taste, um das Level sofort auszuprobieren;
- einem MCP-Server auf meinem PC: Ich schreibe Claude „mach mir ein Dächer-Level mit 3 Körben und 2 Verteidigern“, und er baut das JSON, prüft, dass jeder Korb über den Plattformweg erreichbar ist, kalibriert die Sterne-Schwellen und gibt einen Link zum Spielen zurück.
Keine erfundenen Punktzahlen
Am Ende eines Levels wird das Ergebnis nicht einfach übernommen: Der Server prüft es von Grund auf neu (plausible Mindestzeit, theoretische Höchstpunktzahl des Levels, ein Hash, der Zeit, Punktzahl und Spieler verbindet), bevor er es in die Bestenliste schreibt. Gültige Läufe landen auch in der gemeinsamen Bestenliste der portale3d-Spiele; als Demo vergeben sie keine Portalpunkte.
Performance: von 385 auf 91 Draw Calls
Um die Engine zu messen, gibt es ein Stress-Level, das ein Skript mit festem Seed erzeugt: 300 Blöcke, 10 Körbe, 8 Verteidiger und 20 Fässer. Mit einem Three.js-Objekt pro Block waren 385 Draw Calls pro Frame nötig; fasst man die Blöcke zu einem InstancedMesh pro Material zusammen, sind es nur noch 91 (−76 %), während jeder Block seinen eigenen Physik-Collider behält.
Warum es eine Demo bleibt
Der Spielablauf funktioniert: Levelmenü, Sterne, Verteidiger, die den Ball stehlen und durch Ballwürfe oder Schulterstöße umfallen, zerstörbare Fässer, eine animierte Figur. Doch der Sinn der Demo war die Architektur, nicht ein fertiges Spiel, und die Frage, die sie hinterlassen hat, wurde zum nächsten Schritt: ein Test desselben Gameplays in der Unreal Engine 5, um herauszufinden, ob es nach zwei Minuten mehr Spaß macht als die Browserversion.