Basket Parkour 3D
Making of di una demo 3D nel browser: parkour in terza persona, tiro a canestro, un editor di livelli e un generatore di livelli guidato da Claude.
Basket Parkour 3D è una demo tecnica: un gioco in terza persona dove si corre e si salta tra tetti e cantieri per fare canestro in ogni cesto prima che scada il tempo. È nata con un obiettivo preciso, più tecnico che di gioco: capire fin dove arriva oggi un gioco 3D nel browser, senza installare niente, costruito a piccoli passi verificabili insieme a Claude.
Lo stack
Il gioco è scritto in TypeScript con Vite. Il rendering è Three.js, senza framework di interfaccia: HUD, menu e risultati sono semplice HTML sopra il canvas. La fisica è Rapier: il giocatore è un character controller cinematico (una capsula alta 1,8 m), mentre palla, barili e casse sono corpi rigidi dinamici. L’audio usa Howler, e dietro c’è un piccolo backend PHP e MySQL per livelli, progressi e classifica.
Un formato di livello, tre autori
Ogni livello è un file JSON, e un solo validatore (LevelSchema.ts) decide cosa è valido. Lo stesso codice è usato da tre “autori” diversi:
- il gioco, che trasforma il JSON in mesh Three.js e collider Rapier;
- l’editor nel browser, che usa lo stesso motore del gioco: palette di oggetti, gizmo, proprietà, importazione di modelli 3D e un tasto “Playtest” per provare subito il livello;
- un server MCP che gira sul mio PC: scrivo a Claude «fammi un livello sui tetti con 3 canestri e 2 difensori» e lui costruisce il JSON, controlla che ogni canestro sia raggiungibile dal percorso di piattaforme, calibra le soglie delle stelle e restituisce il link per giocarlo.
Niente punteggi inventati
A fine livello il risultato non viene preso per buono: il server lo rivalida da capo (tempo minimo plausibile, punteggio massimo teorico del livello, un hash che lega tempo, punteggio e giocatore) prima di scriverlo in classifica. Le partite valide finiscono anche nella classifica comune dei giochi di portale3d; essendo una demo, non assegnano Punti Portale.
Prestazioni: da 385 a 91 draw call
Per misurare il motore c’è un livello di stress generato da uno script con seed fisso: 300 blocchi, 10 canestri, 8 difensori e 20 barili. Con un oggetto Three.js per ogni blocco servivano 385 chiamate di disegno per fotogramma; raggruppando i blocchi in un InstancedMesh per materiale si scende a 91 (−76%), lasciando invariati i collider fisici di ogni blocco.
Perché resta una demo
Il loop di gioco funziona: menu dei livelli, stelle, difensori che rubano la palla e cadono a pallonate o spallate, barili distruttibili, personaggio animato. Ma il punto della demo era l’architettura, non un gioco finito, e la domanda che ha lasciato è diventata il passo successivo: una prova dello stesso gameplay in Unreal Engine 5, per capire se dopo due minuti di gioco risulta più divertente della versione browser.