Come è noto, HTML5 non è solo l'acronimo della quinta versione del linguaggio di markup per gli ipertesti, ma un insieme di tecnologie introdotte negli ultimi anni per lo sviluppo di applicazioni Web. Tecnologie così potenti che consentono anche di creare applicazioni complesse come i videogame.
In questa guida esamineremo molti aspetti della programmazione di un videogioco con HTML5 e iniziamo col definire a grandi linee gli elementi di base che sfruttiamo per comporne uno:
- markup HTML (parte statica), che fornisce il contenitore del gioco e in cui definiamo quali API utilizzare e quali eventuali librerie linkare.
- codice JavaScript (parte dinamica), è il codice che utilizziamo per sfruttare le API messe a disposizione dal contenitore e creare il nostro Game Engine.
A livello di contenitore introduciamo l'uso dell'elemento canvas, che porta con sé le API per gestire il rendering di immagini e primitives, per produrre applicazioni animate, effetti e videogiochi.
Grazie alla libreria grafica WebGL, integrata nei browser recenti, si possono finalmente sfruttare le API OpenGL, per creare applicazioni e giochi 3D da eseguire direttamente online, tuttavia in questa guida, tratteremo per semplicità la realizzazione completa di un gioco 2D, in ogni caso, sarà presente una sezione dedicata a WebGL, dove verranno mostrate le principali funzionalità, l'importazione di un modello, i movimenti nello spazio 3D.
Perché HTML5?
Se guardiamo al panorama Web, la piattaforma come Flash vede erodersi giorno dopo giorno la sua pur cospicua base di utenza e qui HTML5 non avrà rivali. Anche su mobile però le prospettive sono certamente rosee, ecco un brevissimo elenco di vantaggi di cui sempre più godrà chi lavora in HTML5:
- HTML5 non necessita di alcun plugin per funzionare: tutte le funzionalità sono già incluse nei browser;
- le applicazioni create, saranno eseguibili su qualcunque browser supporti HTML5, indipendentemente dal sistema operativo (Windows, Mac, Linux, Android, etc.)
- Esistono framework come Apache Cordova (PhoneGap) o Titanium per convertire i nostri giochi in applicazioni native per dispositivi mobili iOS e Android e Windows Phone in modo semplice e veloce.
- I software per la creazione di videogame non esportano più per piattaforma Flash, mentre molte stanno supportando o supporteranno l'export dei progetti in HTML5.
Browser supportati
Il W3C ha annunciato che la prima versione dello standard HTML5 sarà pronta per fine 2014 e da qualche anno HTML5 è supportato sulla maggior parte dei browser, che nelle versioni recenti hanno aggiunto tutte le funzioni che utilizzeremo nel corso della guida.
Le applicazioni che esamineremo in questa guida sono state testate e funzionanti su Chrome, Firefox, Internet Explorer 10), Safari e Opera.
Prerequisiti e conoscenze
Per comprendere a fondo i concetti spiegati in questa serie di articoli, è necessario avere delle basi di programmazione, preferibilmente conoscenza del linguaggio JavaScript e sapere com'è composta a grandi linee una pagina HTML (concetto di tag, stili e script).
Per avere un riferimento potete utilizzare le guide: JavaScript e HTML presenti su HTML.it
I contenuti della guida
La guida si compone di quattro parti:
- Impostazione di un game engine base: creeremo un framework di base, che ci permetterà di caricare risorse grafiche e sonore, gestire il rendering e gli eventi annessi ai game objects.
- Input e interfaccia utente: capiremo come gestire l'input da mouse, tastiera e touchscreen, come creare delle interfacce grafiche (GUI), disegnare del testo con un font a scelta.
- Creazione di un gioco: utilizzando il framework creato nei precedenti capitoli, procederemo finalmente a creare un semplice platformer in stile megaman.
- Ottimizzazioni ed espansione del gioco: vedremo come ottimizzare le prestazioni e migliorare il nostro gioco aggiungendo una parte social, come sfruttare tecnologie più avanzate: Box2D per la fisica, WebGL per il 3D e Node.js per il networking.
Software e strumenti da utilizzare
Per seguire gli esempi proposti nella guida avremo bisogno di poco software di base:
- Un browser munito di console per il Debug del nostro codice (consiglio Google Chrome)
- Un editor di testo per scrivere il codice (tra i migliori Notepad++, un editor gratuito e opensource, scaricabile anche in versione portable (senza installazione), oppure SublimeText: editor molto valido, ma a pagamento, si può scaricare comunque una versione di prova)
- Per alcune parti della guida, come quella su WebGL, sarà richiesto un server HTTP. Potrete caricare i files su un vostro sito web, oppure utilizzare un programma eseguibile senza installazione come Mongoose, che avvierà un Webserver locale temporaneo sul vostro computer.