I browser games, dagli arbori ad oggi

Usare il browser web per giocare è una cosa sempre più normale. L'evoluzione è stata tanto rapida quanto rivoluzionaria, con un continuo crescendo di funzionalità e possibilità. Chi sviluppa giochi ha oggi la possibilità di mettere a disposizione dei giocatori dei giochi visivamente appaganti senza dover far installare nulla e coprendo praticamente senza sforzo tutti i dispositivi in grado di navigare sulla rete. Sembra incredibile? Cominciamo con una breve introduzione storica delle tecnologie. Nei capitoli successivi andiamo invece a vedere cosa è ragionevolmente possibile realizzare.

Un po' di storia del web, dal punto di vista tecnico

Il web, quando nacque, non sapeva fare molte cose. Era semplicemente un protocollo per traferire e rappresentare dei testi con un po' di formattazione. I primi browser, come Mosaic, erano estremamente semplici se confrontati con quelli odierni. Quindi, col tempo, si sono aggiunte moltissime funzionalità. A volte si è trattato di soluzioni adottate da un singolo browser che poi sono state abbandonate o che poi invece sono state adottate anche dai concorrenti. Negli ultimi anni, con il processo di standardizzazione condiviso tra i maggiori rappresentanti del settore - parlo di Google, Apple, Microsoft e Mozilla - sono state aggiunte al web una valanga di funzionalità che hanno anche reso possibili cose che prima richiedevano l'uso di applicazioni classiche.

Data l'iniziale semplicità dei browser per molto tempo la maggior parte delle funzionalità venivano offerte sfruttavano le possibilità dei vari linguaggi di programmazione che potevano girare sui server. Con PHP, Perl, Python (o anche C) il meccanismo prevede che il browser invii una richiesta ad un server, che provvedeva a fare le elaborazioni del caso e a restituire una pagina web in HTML. È un meccanismo ampiamente utilizzato anche ora, ma con il progressivo sviluppo dei browser si è potuti spostare parte della logica dal server al browser, con lo scopo principale di rendere il web più veloce e interattivo, quando si tratta di un aspetto importante.

Elemento cardine di ogni interattività sul web è il linguaggio di programmazione Javascript. Questo linguaggio è più vecchio di quello che sembra, ma negli ultimi anni ha avuto uno sviluppo notevole che lo ha reso più pratico e soprattutto ha ora la possibilità di fare molte più cose all'interno di un browser. Gli sviluppatori di oggi possono risolvere con poche righe problemi che prima richiedevano ore di lavoro.
Uno dei risultati che si è potuti ottenere è che è possibile realizzare dei siti web che caricano dinamicamente i contenuti, senza che tutta la pagina venga mai riscaricata. Ciò si traduce in interazioni più rapide per gli utenti e generalmente in un'esperienza più soddisfacente. Quindi non più un sito web composto da pagine, ma una Single-Page Application.

Altri passi da gigante sono stati fatti dal punto di vista dell'opportunità grafiche dei siti. Si è passati dal poter decidere solo il colore del testo e poco più alla possibilità di inserire sfumature, ombre, trasformazioni 2D/3D e animazioni. Lo sviluppo dei Cascading Style Sheet (CSS) ha permesso di far risparmiare mesi di lavoro agli sviluppatori per semplici effetti grafici. E agli utenti di dover scaricare pesanti grafiche prerenderizzate.

La combinazione di HTML, Javascript e CSS rappresenta il web moderno. E con la combinazione di questi elementi si possono realizzare giochi di notevole complessità.

Avventure testuali,punta-e-clicca e play-by-chat

Il web è composto principalmente da testo e immagini. Esiste quindi tutta una categoria di giochi che può essere realizzata senza particolari sforze e con delle conoscenze anche minime usando questi semplici elementi.

Ai tempi in cui cominciarono a diffondersi i personal computer ebbe un discreto successo una tipologia di giochi che possiamo tranquillamente definire avventure testuali. Si tratta di giochi, limitati ad alcuni generi come i GDR e di esplorazione, in cui non esiste una grafica vera e propria, ma tutta l'azione passa attraverso dei testi. È come un libro interattivo in cui quello che leggiamo cambia in base alle nostre decisioni. Questo tipo di gioco è relativamente semplice da realizzare sul web perché non richiede appunto la realizzazione e il funzionamento di elementi grafici.

Dato che un PC e sempre dotato di un mouse (e i dipositivi mobili di uno schermo tattile), con un po' di CSS possiamo invece realizzare dei semplici giochi punta-e-clicca, ovvero dove delle semplici scene grafiche offrono la possibilità di interagire con alcuni elementi toccandoli (o cliccandoci sopra). Dal punto di vista del giocatore è sicuramente più appagante e si possono raccontare delle belle storie.

Nel punto di incontro tra le avventure testuali e i punta-e-clicca si vanno a posizionare i play-by-chat. Per certi versi assimilabili ai moderni MMORPG, sono giochi in tutta l'azione passa da una serie di chat in cui i giocatori raccontano a parole le azioni che il proprio personaggio compie. Il resto del gioco può avere una grafica più o meno ricercata e permette ai giocatori di eseguire altri tipi di operazioni legate sempre al personaggio.

Giochi 2D e 3D

Fin qui ho elencato quello che si può fare con le tecnologie web "tradizionali". Ma cosa si può fare se si vuole fare un videogame che sia più linea con quello che siamo abituati a vedere?

Se ci si limita all'ambito 2D probabilmente ce la si può ancora cavare. Come detto con Javascript e CSS si possono ottenere un sacco di effetti ed è possibile guidare i nostri sprite per lo schermo con relativa facilità. Saremo però vincolati agli effetti a disposizione, che non sono pochi, ma che possono offrire qualche limitazione. Inoltre ad un certo punto, se la complessità sale, le cose rischiano di sfuggire un po' di mano. Per cui conviene cambiare approccio.

Bisognerà quindi passare all'utilizzo dell'elemento HTML canvas. Si stratta di un contenitore di pixel, introdotto per la prima volta da Apple in Safari e ormai supportato da tempo da tutti i browser, in cui è possibile disegnare figure arbitrarie. Utilizzare direttamente il canvas non è comodissimo, per cui nel corso del tempo sono state realizzate delle librerie software che semplificano molto le operazioni di base.
In questo modo è possibile realizzare un qualsiasi gioco 2D. Javascript continuerà ad esserci per ricevere l'input del giocatore, eseguire gli effetti sonori e per la logica del gioco, ma la parte visiva sarà delegata al canvas che si occuperà di visualizzare gli elementi grafici in piena libertà.

Lo step finale è rappresentato dalla grafica 3D che utilizza la libreria WebGL. Si tratta di una versione ridotta della libreria OpenGL che permette di visualizzare poligoni e tutto quello che normalmente li accompagna (luci, texture...), all'interno di un canvas HTML. E lo fa sfruttando le capacità della scheda video di sistema, quindi con tutte le accelerazioni grafiche del caso. Come per il 2D continuerà a esserci Javascript per molte funzioni, ma le possibilià grafiche aumentano a dismisura.

Mettersi all'opera

Questo articolo voleva essere solo una breve introduzione a tutto quello che seguirà. A seconda di quello che si va a realizzare si andrà quindi a scegliere la soluzione migliore, che nel mio caso vuol dire quasi sempre utilizzare quella più rapida. Se un gioco è più simile ad un'applicazione web, come può essere un play-by-chat, sicuramente conviene utilizzare un approccio più tradizionale andando a realizzare una Single-Page Application. Se vogliamo fare uno sparattutto in prospettiva ovviamente sarà indispensabile usare WebGL. La scelta dello strumento corretto è un aspetto fondamentale e ora che ci siamo fatti un'idea possiamo andare più nel dettaglio.