Playground · Flappy Bird
Per far volare un uccello, ho dovuto costruire gravità, collisioni e un mondo intero.
Un esperimento con HTML Canvas diventato il mio primo piccolo motore di gioco: niente framework, niente fisica pronta, soltanto JavaScript e parecchi tentativi.
01 · Il punto di partenza
Il gioco era conosciuto. Il modo per farlo esistere, per me, era tutto nuovo.
Volevo capire davvero Canvas. Flappy Bird aveva abbastanza poche regole da lasciarmi sperimentare, ma abbastanza movimento da obbligarmi a ragionare su spazio, tempo, gravità e collisioni.
- Canvas
- Un mondo ridisegnato a ogni frame.Lo scenario veniva composto e aggiornato continuamente, livello dopo livello.
- JavaScript
- Movimento, regole e collisioni.Ogni salto e ogni ostacolo dipendevano da coordinate, intervalli e controlli scritti a mano.
- Illustrator
- La foresta era interamente mia.Ho disegnato paesaggio, alberi, montagne, tubi e interfaccia. Soltanto lo sprite dell’uccello era esterno.
02 · Una copia che non voleva sembrare una copia
Dal Flappy Bird originale ho preso le regole. Il resto è diventato una foresta mezza innevata.
Partendo da alcune reference boschive ho costruito una direzione più scura, silenziosa e quasi cinematografica. Ogni elemento visivo è stato disegnato in Illustrator per appartenere allo stesso paesaggio.
03 · L’esperimento dentro l’esperimento
Se tutto scorre alla stessa velocità, non è un mondo. È una fotografia.
Ho separato il paesaggio in sei livelli e assegnato a ciascuno una velocità diversa. Gli elementi lontani si muovono lentamente, quelli vicini corrono: il parallasse crea la profondità che la scena non possiede davvero.
04 · La prima fisica
Il primo salto non era un’animazione. Era una trattativa continua tra click e gravità.
A ogni click l’uccello riceveva una spinta verso l’alto. Quando quella spinta terminava, un intervallo lo riportava verso il basso. Era semplice, numerico e sorprendentemente difficile da far sembrare naturale.
Intervallo · gravità- 01
Il primo click avvia il gioco, gli ostacoli e il conteggio.
Start - 02
Ogni click successivo sposta progressivamente l’uccello verso l’alto.
Jump - 03
Quando la spinta finisce, la gravità riprende a trascinarlo verso il terreno.
Fall - 04
Su mobile cambiano dimensioni e intensità per conservare una giocabilità simile.
Adapt
Non c’era un motore fisico a decidere cosa fosse credibile. C’erano valori scelti, provati e corretti finché il movimento non iniziava a sembrare vivo.
05 · La parte che non si vede
Volare era soltanto metà del problema. L’altra metà era capire esattamente quando smettere.
A ogni aggiornamento confrontavo manualmente il rettangolo dell’uccello con quelli dei due ostacoli e con il terreno. Una sovrapposizione bastava a fermare ogni intervallo e mostrare il risultato.
Player boxTube boxesGround limit- Controllo 01L’uccello ha toccato il terreno?
- Controllo 02La sua area si sovrappone al tubo superiore?
- Controllo 03Oppure è entrata nel tubo inferiore?
- Se sìFerma gravità, ostacoli e punteggio. Mostra il game over.
06 · La cosa di cui vado più fiero
Non avevo un motore di gioco. Quindi, senza chiamarlo così, ne ho costruito uno piccolo.
Canvas disegnava il mondo, CSS faceva scorrere gli ostacoli e JavaScript teneva insieme input, gravità, collisioni, punteggio e stato della partita.
- Render
- Sei livelli ridisegnati e riposizionati continuamente.Due copie per livello creavano un ambiente infinito senza interrompere lo scorrimento.
- Game loop
- Intervalli diversi governavano fisica, ostacoli e punteggio.Il gioco nasceva dalla sincronizzazione di sistemi semplici, non da un’unica libreria.
- State
- Un click avvia tutto. Una collisione ferma tutto.L’intero ciclo di vita della partita veniva gestito direttamente nel browser.
07 · Il risultato
Giocabile, responsive e abbastanza completo. Il best score un po’ meno.
Il gioco aveva schermata iniziale, caricamento, partita, ostacoli casuali, punteggio, game over e adattamento mobile. Il salvataggio del record tramite cookie funzionava, ma non era esattamente la parte più solida del progetto.
- Completo
- Un ciclo di gioco intero, dall’avvio al replay.
- Responsive
- Dimensioni e movimento adattati anche agli schermi piccoli.
- Onestamente
- Il best score c’era. La sua implementazione oggi durerebbe pochissimo.
- Eredità
- Il primo passo concreto verso fisica, scene e successivi esperimenti 3D.
Oggi
Rifarei la grafica e tutta la fisica. Ma non cancellerei il progetto che mi ha portato verso il 3D.
Non era un engine nel senso professionale del termine. Era però la prima volta in cui ho dovuto ragionare come se lo fosse: disegnare una scena, aggiornarla, applicare forze, rilevare collisioni e conservare lo stato.