Come si crea un videogioco html5

1 anno fa

I creatori di War Games: Space Dementia ci svelano tutti i segreti per creare un gioco html5.

Un cavaliere dello spazio sulla sua navicella ti spinge e convince a giocare. All’improvviso ti ritrovi a guidare la sua nave spaziale e a scegliere il giusto proiettile da scagliare contro gli avversari (che non saranno pochi). Comincia così il nuovo gioco html5 della pagina web Spritted, intitolato War Games: Space Dementia.  “L’idea viene dalla mia intenzione di creare un gioco Arcade di azione. Adoro Robotron 2084; lo trovo semplice e divertente e così ho pensato di trarre ispirazione per la mia creazione" ha spiegato Eduardo Ortega, capo progetto di Spritted, che ha voluto svelarci tutti i segreti e, insieme al suo team, ci ha anche spiegato tutti i passaggi della realizzazione di un videogioco.

Eduardo, che si definisce “un appassionato dei videogame e della giocabilità semplice e diretta tipica dei classici”, ha avuto l’idea di creare War Games: Space Dementia e plasmarlo come un “gioco Arcade, semplice e portatile”. La prima tappa nel processo creativo di un videogioco è trovare una buona idea ed una trama (dobbiamo decidere di che cosa tratterà il gioco). Per riuscirci, il team di sviluppo deve riunirsi e stabilire un piano da seguire.

“Una volta delineata la natura del gioco ci riuniamo e ipotizziamo il suo futuro”, spiega Ortega. Lavorano al suo fianco un programmatore ed un illustratore. Quest’ultimo elabora prima di tutto uno schema dell’interfaccia utente, ovvero il menu, poi i tasti ed i passaggi tra le diverse schermate. Si incarica anche dell’esperienza-utente, che consiste nello “sviluppare tutto questo flusso di schermate ed eventi in maniera intuitiva, che dovranno essere di facile utilizzo” secondo Ortega.  E infine lo sviluppo vero e proprio del gioco, ovvero schermate, nemici, item, ecc… il tutto viene prima solo abbozzato. Una volta che l’illustratore ha completato tutto ciò lo deve presentare a Eduardo, il quale darà il suo nulla osta che metterà in marcia il progetto: le bozze del disegnatore e i primi codici del programmatore.

Passione e ispirazione, le muse degli illustratori dei videogiochi.

Daniel Peña è il responsabile che si incarica di dare una forma fisica ai personaggi e agli oggetti all’interno del gioco. Il disegnatore di Spritted aveva lavorato in precedenza con agenzie di pubblicità ma la sua grande passione per i videogiochi alla fine lo ha portato a disegnarli. Questo giovane di Valladolid ci racconta che l’idea per War Games: Space Dementia gli è venuta ascoltando una canzone degli anni ottanta: ‘Avalon’ dei Roxy Music. Grazie al titolo e una volta ottenuta l’approvazione di Eduardo Ortega, ha deciso di creare i personaggi ispirandosi alla legenda di Re Artù ed i Cavalieri della Tavola Rotonda.

Il titolo in principio doveva essere Defenders of AVA, ma pensò che avrebbe potuto far pensare al gruppo scandinavo di musica pop ABBA e cambiò quindi a Knights of Space per non creare confusione. Tuttavia, si scelse il titolo attuale per motivi prettamente economici. “Il titolo Knights of Space era un piccolo omaggio ai Guardiani della Galassia della Marvel” spiega Peña, che ha anche confessato di aver introdotto un riferimento ai Guardiani nel logo.
Le procedure del disegno sono sorprendentemente classiche. Daniel ha solo bisogno di carta e matita per creare le sue bozze, e una volta trovata un’idea precisa della quale è soddisfatto, controlla i risultati e li passa su Illustrator. È un programma di Adobe che permette di rendere digitali le illustrazioni. Illustrazioni che sono ispirate a, ridiciamolo pure, Re Artù. “K1-ARZ a bordo della sua nave XK-LIBUR deve difendere i 3 settori che circondano KM-LOT”; questa la presentazione di War Games: Space Dementia di Peña che ci spiega anche che K1-ARZ è la versione galattica di King Arthur.

Ha anche aggiunto che per lo stile si è ispirato in parte anche all’illustratore e padre del personaggio del fumetto Hellboy, Mike Mignola, con i suoi caratteristici contrasti di tonalità, la scarsezza di colore e i poligoni tipici. Oltre a vari riferimenti ad Arcade classici degli anni ottanta come Tron, Asteroids o R-Type.

La programmazione, lo scheletro di un videogioco.

Spingendo sulla sua passione per il gioco semplice, Ortega ha voluto proporre al programmatore l’idea di creare un gioco di sopravvivenza facile e ad una sola schermata. David Santín dice che crea giochi dalla tenera età di 11 anni e che ora è diventato il programmatore di tutti i videogame di Spritted. Quando il capo progetto assegnò a questo giovane madrileno il compito di creare un gioco ispirato a Robotron 2084, in men che non si dica il ragazzo pensò a Smash TV.

A David è sempre piaciuto questo Arcade classico e predecessore di Robotron 2084, e decise quindi di riprendere la dinamica di Smash TV per creare War Games: Space Dementia. Robotron uscì nel 1982 e l’obiettivo di gioco era eliminare tutti i robot che si erano ribellati agli umani nell’anno 2084 e salvare i sopravvissuti. Più avanti, nel 1990, nacque Smash TV il cui scopo era sempre la sopravvivenza: un concorrente di un programma TV del futuro deve uccidere i suoi aggressori e raccogliere ‘powerup’.

“Abbiamo optato per un gioco di navicelle perché svilupparlo risultava più semplice”, confessa David. Visto che si tratta di un gioco con visuale dall’alto, creare una nave spaziale vista dall’alto è nettamente più facile che creare un uomo. David spiega che creare un videogioco è come “disegnare una figura sui bordi di un libro e sfogliarlo velocemente per dare vita al disegno; ogni pagina sarà uno sprite”. Quello che viene chiamato ‘sprite’ è l’equivalente dei fotogrammi nel mondo del cinema.

Nel caso di War Games: Space Dementia si decise dall’inizio che avrebbe avuto una visuale dall’alto, motivo per cui si scelsero le navicelle, onde evitare la creazione delle otto posture che richiede il movimento di una persona: di fronte, di dietro, di lato, ecc. “Se si realizza un carrarmato o un aereo, visto dall’alto, e dato che non ha né testa né nulla di tutto ciò, sarà sufficiente solo uno sprite”, conclude David. Le otto posture richiedono tempi otto volte più lunghi, sia per la programmazione –visto che ogni movimento necessita un codice- sia per l’illustrazione.

David programma a seconda dei disegni che giungono a Daniel. Lavorano sempre l’uno a fianco dell’altro e prendono decisioni insieme, anche se David si occupa di attribuire un’intelligenza artificiale a tutti gli oggetti del gioco, ovvero li offre un comportamento specifico. "Ogni tipo di nave ha la propria intelligenza ed il proprio comportamento. Nei primi livelli sembreranno lente e dai movimenti confusi, le ultime invece non ti concederanno il minimo errore e saranno capaci di seguirti in massa ed anticipare i tuoi movimenti”, spiega Santín.

Tutti gli oggetti del gioco possono essere dotati di movimento e comportamento unici grazie al controllo delle variabili che formano l’Universo, e secondo Santín “alcune di queste variabili sono la velocità, la gravità, la capacità di reazione, l’abilità di tiro, le vite e l’abilità di manovra”.

Senza dubbio una delle difficoltà più grandi che ha affrontato David durante la creazione di War Games: Space Dementia è stato il riuscire ad ottenere una fluidità nonostante tutto il movimento presente di navi proiettili, personaggi, ecc. "È difficile trovare giochi html5 sul mercato capaci di muovere così tanti oggetti allo stesso tempo è con un rendimento così alto ", chiosa David.

Html5, una lingua universale?

Santín spiega che “programmare in html5 è abbastanza complesso specialmente a livello di performance, visto che non ha la potenza di un codice nativo ma ha il vantaggio di essere multipiattaforma”. Ogni processore ha il proprio codice nativo; Apple, Android, ecc. “Programmare un’applicazione nel suo codice nativo equivale a crearla nella ‘lingua’ di quel dispositivo, il che ti dispenserà da ogni tipo di ‘traduzione’ e renderà tutto più veloce”.

Possiamo paragonare l’html a una linguaggio comprensibile da tutti ma che purtroppo non gode dell’efficacia e della precisione di una lingua madre. “È quello che succede quando si usa una lingua comune ma non la propria, ovvero che in seguito ognuno dovrà interpretarla a suo modo”, afferma David.

Per questo motivo, il programmatore deve mettercela tutta a generare un codice molto efficace, visto che il gioco sarà disponibile su tutti i tipi di dispositivi, da computer molto potenti fino a cellulari vecchi con connessioni lente. L’html5 si comporterà diversamente a seconda del dispositivo, il che richiede molte prove per renderlo perfettamente funzionante su tutti.

A dire il vero quando si gioca con uno Smartphone sembra di stare proprio al comando di queste navicelle grazie alla dinamica del dual joystick, caratteristica di Robotron 2084 e Smash TV. E grazie a Phaser, il Framework che utilizza David per programmare i giochi, che ha appena sfornato il plug-in del dual joystick, inserendolo nel gioco senza doverlo creare da zero.

Phaser è un Framework, un insieme di strutture di programmazione dedicate a vari problemi. Concretamente Phaser è fatto per la creazione di videogiochi”, spiega Santín. Deve controllare gli sprite, inserire i suoni, creare i giochi e conferirli un rendimento molto alto.

Nonostante l’idea iniziale di Eduardo Ortega fosse quella di creare un gioco di sopravvivenza semplice e ad una sola schermata –che permettesse di divertirsi all’infinito fino a quando non si perdeva- il risultato è stato parecchio diverso. Dopo aver visto il suo potenziale e averci dedicato molto tempo (confessano che l’idea giunse proprio a fagiolo con l’arrivo dell’estate), i suoi creatori si spinsero più in là creando un gioco html5 molto più sviluppato e completo. In definitiva, un gioco di navicelle diviso in tre zone, nel quale il protagonista deve affrontare cinque tipi di nemici, ognuno con un certo tipo di attacco, e sconfiggere il tipico mostro finale. È la magia dei videogiochi e la meccanica della sua creazione.

Articolo scritto da Paula Gil Alonso.

Commenti

Ti è piaciuto questo gioco? Sei il migliore? Faccelo sapere!