Questa è la traduzione dell'articolo Bringing Cut the Rope to Life in an HTML5 Browser di Giorgio Sardo, pubblicato originariamente su sitepoint.com. La traduzione viene qui presentata con il consenso di Microsoft.
Cut the Rope è uno dei mobile game tra i più celebri. è tanto divertente quanto adorabile. Così abbiamo avuto un'idea: rendiamo disponibile questo gioco per un pubblico ancora più vasto mettendolo sul web grazie alla potenza di HTML5.
Per fare questo il team di Microsoft Internet Explorer ha collaborato con ZeptoLab (creatore del gioco) e gli specialisti Pixel Lab per portare Cut the Rope sul proprio browser. Il risultato finale è stata una vera e propria traduzione del gioco per il web, una tra le migliori che HTML5 possa offrire: canvas-rendering grafico, audio e video browser-based, CSS3 e la personalità dei font WOFF.
Ora è possibile giocare con la versione HTML5 di Cut the Rope su: www.cuttherope.ie.
Secondo gli autori la versione HTML5 rende il web più divertente e dimostra i progressi fatti nel supporto degli standard dall'ultima versione di Internet Explorer. Partendo da questa considerazione, hanno condiviso alcuni dei "retroscena" più interessanti dal punto di vista dei dettagli tecnici utilizzati in questo progetto, perchè potrebbero risultarvi utili nella costruzione dei propri siti in HTML5 e per renderli pronti per Windows 8 Store!
Da ObjectiveC a JavaScript
Nel portare Cut the Rope sulla nuova piattaforma, volevamo essere sicuri di preservare fisica, movimento e personalità che rendono unica l'esperienza di questo gioco. Così abbiamo deciso di avvicinarci a questo gioco come un porting della versione nativa iOS (piuttosto che con una riscrittura del codice).
Abbiamo dato il via al progetto con un'ampio studio del codice Objective-C originale e abbiamo scoperto che è davvero un gioco grande e complesso. La versione nativa iOS è costituita da circa 15.000 righe di codice (escluse le librerie)! Le parti più complesse del codice riguardano fisica, animazione e compilatori grafici. Componenti già complessi per natura, ma in questo caso lo sono ancor più perchè tutti e tre sono strettamente collegati tra loro e altamente ottimizzati.
È stato un duro lavoro: portare questo codice in un browser, mantenendo la personalità unica e l'incredibile qualità a cui i giocatori sono abituati. Per fare questo, abbiamo scommesso su JavaScript.
In passato JavaScript era ritenuto un linguaggio lento. Francamente all'inizio tale reputazione era meritata. I vecchi compilatori JavaScript erano disegnati per semplici compiti di "scripting" (da qui il nome). Oggi, però, i compilatori JavaScript sono stati altamente ottimizzati. Comprendendo caratteristiche di compilazione just-in-time, ora JavaScript viene eseguito ad una velocità molto vicina a quella nativa.
A parte questo, sappiamo che programmare in JavaScript è diverso da programmare in un linguaggio compilato e richiede un diverso tipo di mentalità. Effettuando il porting del gioco da ObjectiveC, sapevamo che avremmo avuto a che fare con questo tipo di modifiche e ottimizzazioni.
Un esempio lampante è stata la mancanza dei costrutti struct, o strutture, in JavaScript. Le strutture sono aggregazioni leggere di proprietà correlate. è facile da utilizzare un oggetto JavaScript per contenere un insieme di proprietà, ma ci sono importanti differenze tra questo approccio e una struttura vera e propria. La prima differenza è che le strutture vengono copiate ogni volta che vengono assegnate a una variabile o passate a una funzione.
Quindi, una funzione scritta in un linguaggio compilato come ObjectiveC può modificare una struttura passata come parametro senza alterare il valore del chiamante. Anche all'interno di una funzione, l'assegnamento di una struttura ad una variabile differente porta ad una copia dei valori. Gli oggetti JavaScript, invece, sono passati per riferimento. Così, quando una funzione modifica un parametro di un oggetto, le modifiche sono visibili al chiamante.
Un modo semplice per imitare la natura delle strutture è quello di creare copie di oggetti JavaScript per il passaggio o l'assegnazione dei parametri. Nei linguaggi nativi di solito c'è tipicamente un overhead molto piccolo nell'uso delle strutture. Creare un oggetto in JavaScript è molto più costoso, quindi abbiamo dovuto fare molta attenzione a ridurre al minimo il numero di allocazioni. In particolare negli assegnamenti, per quanto possibile, abbiamo cercato di copiare le proprietà individuali piuttosto che creare istanze di oggetti completamente nuove.
Un altro esempio è la natura orientata agli oggetti del codice ObjectiveC. Al posto della tradizionale ereditarietà object-based, JavaScript supporta l'ereditarietà attraverso l'uso dei prototipi, ereditarietà basata sulla proprietà Prototype. Questa è una forma molto semplificata di ereditarietà dell'oggetto che in realtà non è compatibile con un linguaggio orientato agli oggetti tradizionali come ObjectiveC. Fortunatamente, ci sono una serie di librerie che possono aiutare a scrivere il codice di stile per JavaScript nello stile della programmazione orientata agli oggetti (OOP); ne abbiamo utilizzata una molto semplice scritta da John Ressig (famoso per jQuery).
(Si noti che ECMAScript5, la specifica per l'ultima versione di JavaScript, include anche il supporto per alcune classi, ma abbiamo scelto di non utilizzarle in questo porting a causa della nostra mancanza di familiarità con tale versione del linguaggio).
Oltre al porting da ObjectiveC a JavaScript, abbiamo anche bisogno di adattare il nostro codice grafico da OpenGL a HTML5 Canvas API. In generale, questo funziona bene. Canvas fornisce una superficie di rendering incredibilmente veloce, soprattutto in un browser in cui tale API gode dell'accelerazione hardware (come Internet Explorer 9).
Sorprendentemente, abbiamo incontrato alcune aree in cui Canvas offre maggiori funzionalità rispetto alla versione di OpenGL ES che è stato utilizzato dalla versione mobile di Cut the Rope. Un esempio è il disegno delle linee anti-alias. Disegnare le linee anti-aliasing in OpenGL richiede il tessellamento della linea in una striscia di triangolo per poi effettuare il fade dell'immagine portando l'opacità dei vertici verso la completa trasparenza. Canvas di HTML5 gestisce automaticamente le linee anti-aliasing disegnandole con un sua API per le linee. Questo significa che abbiamo avuto bisogno di rimuovere del codice dalla versione OpenGL.
Alla fine, abbiamo quasi 15.000 linee di codice in esecuzione nel browser (è stato così minimizzato che visualizzando il codice sorgente del proprio browser ci saranno molte meno linee di queste). Anticipando la complessità associata con così tanto codice, Denis Morozov (il direttore dello sviluppo presso ZeptoLab) ha posto una giusta domanda: HTML5 ci darà la velocità e le prestazioni di cui abbiamo bisogno per questo gioco?
Per rispondere alla domanda, abbiamo creato il primo milestone delle "performance", in cui ci siamo concentrati su come ottenere una versione minimale delle parti più intense del gioco in esecuzione. In altre parole volevamo vedere come apparivano le corde e se eravamo in grado di gestire il complesso sistema di physics engine del browser.
Performance
Dopo tre settimane di sviluppo del progetto abbiamo finalmente avuto le basi del compilatore fisico e grafico da far partire con un semplice timer per l'avvio dell'animazione. A questo punto potevamo effettuare il rendering di un paio di corde, una stella, e un Om Nom sprite nella scena di gioco. Un progresso! Per quattro settimane abbiamo incluso alcune interazioni di base con il mouse e con quelle potevamo realmente giocare! Stavamo testando le prestazioni lungo il percorso, ma abbiamo voluto lasciare che il team di ZeptoLab ci desse il suo feedback.
Quando abbiamo condiviso il codice con ZeptoLab, sono stati piacevolmente sorpresi dalle prestazioni (in particolare la velocità e la scorrevolezza del gioco) che stavamo vedendo nei browser moderni. Per essere onesti, avevamo trattenuto un po' il respiro. Ci aspettavamo che JavaScript fosse veloce ma temevamo perchè i calcoli fisici sono complessi e devono avvenire real-time. Questo è un grande esempio di come i preconcetti comuni sulla "lentezza" di JavaScript siano sbagliati. L'ultima generazione di motori JavaScript è incredibilmente veloce.
In questo caso, abbiamo vsto in anteprima il gioco su Internet Explorer 9. Quando si carica il gioco, il motore Chakra JavaScript di Internet Explorer 9 pre-compila il codice su un thread in background, proprio come un compilatore che compila un linguaggio del tipo di ObjectiveC o C++. E poi, in tempo reale, invia il codice compilato (byte-code) al thread del gioco per l'esecuzione. Il risultato è una velocità di esecuzione vicina a quela nativa. Sorprendentemente, questo è qualcosa che si può ottenere gratuitamente dal motore JavaScript, non abbiamo dovuto fare niente di speciale con il codice.
La nostra scommessa su JavaScript stava dando i suoi frutti, così abbiamo rivolto la nostra attenzione ad hardware e browser. Con l'accelerazione hardware di Internet Explorer per il rendering e la nostra esperienza con Disney Tron e altri siti in HTML5, non avevamo dubbi circa la sua capacità di eseguire perfettamente il gioco sulle nostre macchine di prova. Abbiamo raggiunto facilmente il nostro obiettivo dei 60 FPS (fotogrammi al secondo). Volevamo essere sicuri, tuttavia, che il gioco girasse bene anche su altri hardware, con altri browser. Ecco quello che abbiamo visto, dopo alcuni test preliminari.
Sulla base di questi numeri, abbiamo fissato a 30 FPS il valore minimo accettabile. Abbiamo deciso che avremmo dato notifica all'utente qualora il browser fosse sceso al di sotto di tale soglia. In questo caso si potrebbe ancora giocare la partita, ma è necessario sapere che si potrebbe osservare un po' di lentezza. In questo modo potevamo sostenere la grande diversità di hardware e software che esiste per offrire la migliore esperienza possibile per tutti i giocatori.
Vorremmo sottolineare due cose. Primo, la versione attuale del gioco funziona meglio su PC desktop e Mac con un mouse. Non abbiamo ancora aggiunto il supporto per l'input tattile, ma lo stiamo prendendo in considerazione per le versioni future.
In secondo luogo, l'attuale versione di Chrome (versione 16) ha noti problemi relativi alla riproduzione dei contenuti multimediali che rendono il suono imprevedibile in Cut the Rope. Abbiamo cercato soluzioni alternative e abbiamo cercato di ri-codificare i media in diversi formati (compreso WebM), ma non abbiamo trovato un formato o una configurazione MIME o qualsiasi altra cosa che risolvesse il problema in modo affidabile. Questi sono i bug lato browser a noi noti.
Ancora più importante, il gioco continua ad essere giocabile e divertente nonostante l'audio intermittente. Alla luce di ciò, mentre possiamo assicurare agli utenti di Internet Explorer 9 una grande esperienza di gioco, alcuni utenti di Chrome e Firefox potrebbero incorrere in problemi di audio, ma è possibile istallare un plug-in flash per garantire il funzionamento degli effetti sonori e musica funzionerà.
Tool
Una cosa grandiosa di HTML5 è che non c'è bisogno di imparare un nuovo linguaggio per sbloccare la potenza di questa tecnologia. Se conoscete e capite JavaScript, avete già accesso a tutto ciò che un browser moderno può fare. Potrete anche creare il vostro proprio gioco come questo!
Editor e Ambiente di sviluppo
Ci sono alcuni ottimi strumenti gratuiti che permettono di lavorare facilmente con JavaScript e HTML5. Gran parte del nostro sviluppo è stato fatto utilizzando Visual Web Developer 2010 (la versione "express" disponibile gratuitamente). Si tratta di un editor web per JavaScript e CSS molto robusto e con funzione di autocompletamento. È fantastico che la versione Express sia gratuita!
Abbiamo fatto la maggior parte dei nostri test con Internet Explorer 9 su Windows 7 e di tanto in tanto abbiamo provato anche su Firefox, Chrome, Safari e Internet Explorer 10 in anteprima per gli sviluppatori. In generale, tutti i principali browser hanno un'implementazione consistente con le caratteristiche di HTML5 che abbiamo usato e, nella maggior parte dei casi, tutto ciò che abbiamo provato in Internet Explorer 9 "funziona" ovunque.
Verifica il Resource Loader!
Cut the Rope possiede uno stile visivo unico e molto dettagliato - molti media sono sotto forma di immagini, suoni e video - e questo rappresenta un costo aggiuntivo. Il risultato è che l'intero gioco è molto più pesante della media dei siti web. Parliamo di circa 6 MB (rispetto ai 200-300K tipici di un sito). Così tanti media molto possono richiedere un po' di tempo per il download e non è possibile iniziare il gioco finchè questo non termina. Una pagina web tradizionale è piuttosto indulgente, se manca un'immagine o due, ma Canvas HTML5 API (drawImage) daranno esito negativo quando l'immagine non risulta disponibile.
Per risolvere questo problema, abbiamo voluto creare un Resource Loader che scarichi tutto il contenuto di cui abbiamo bisogno per la pagina e ci dia un feedback positivo appena finito il download. Questo pezzo di codice fa parecchie cose intelligenti:
- Si adatta a come i diversi browser gestiscono e notificano il progresso del download.
- Consente di prendere decisioni intelligenti circa l'ordine in cui vengono scaricate le cose (si potrebbe voler avviare file di grandi dimensioni per primo, per esempio, o magari scaricare tutte le immagini del menu prima di ottenere le immagini del gioco).
- Infine, dà informazioni intelligenti su come stanno andando le cose in modo da metterne l'utente a conoscenza o anche permettere di iniziare a giocare quando il primo gruppo di download è stato completato.
La costruzione di questo tipo di librerie è difficile da fare bene. Dal momento che ne siamo davvero soddisfatti di come funziona, vogliamo condividere il codice del nostro Resource Loader. Il risultato è PxLoader, una libreria Javascript per il Resource Loader che è possibile utilizzare per effettuare i precaricamenti di applicazioni, giochi e siti in HTML5. è open source e il download è gratuito.
Performance Tool in Internet Explorer
Un altro strumento di sviluppo indispensabile il JavaScript Profiler di Internet Explorer 9. Questo ci ha permesso di scoprire i punti caldi e colli di bottiglia nel codice. A un certo punto del nostro primo milestone sulle performance, abbiamo quasi pensato di farla finita scoprendo che su alcune macchine eravamo bloccati a 20 o 30 FPS.
Abbiamo fatto alcune prime revisioni del codice, ma non è saltato fuori nulla. Abbiamo caricato il gioco con il Profiler e subito abbiamo visto che stavamo spendendo un sacco di tempo all'interno della funzione satisfyConstraints (). Tale funzione calcola parte della matematica relativa alla fisica delle corde. Il codice ObjectiveC era scritto ricorcosivamente, passando un nuovo oggetto ad ogni chiamata successiva.
Con la guida di Microsoft, abbiamo deciso di sostituire la funzione ricorsiva con una versione iterativa del medesimo codice. I risultati sono stati sorprendenti. Abbiamo visto un miglioramento di 10x in ogni browser! Francamente, non l'avremmo mai scoperto senza gli strumenti di analisi in Internet Explorer.
Quale sarà la prossima sfida?
In un BUILD del settembre 2011, Microsoft ha mostrato un'anteprima per sviluppatori di Windows 8. Con questo annuncio, la storia di HTML5 diventa più interessante perchè le applicazioni in stile Metro possono essere create utilizzando una varietà di insiemi di strumenti per sviluppatori, tra cui HTML5. Ciò significa che gli sviluppatori web possono prendere il codice che è stato scritto per la Rete ed effettuare un semplice porting su Windows 8. L'investimento in una moltitudine di esperienze online ora darà i suoi profitti soprattutto con il Windows Store.
Infatti, con pochissimo lavoro extra, siamo riusciti a trasferire questa esperienza HTML5 ad una app in stile Metro di Windows 8. Puoi leggere di Cut the Rope e della sua integrazione con Windows Store in questo post.
Noi siamo entusiasti di vedere quello che gli sviluppatori possono costruire oggi con HTML5. è possibile scaricare Internet Explorer 9 e trovare altri fantastici siti, o scaricare la Developer Preview di Windows 8.
L'autore
Giorgio Sardo è un Senior Technical Evangelist di Microsoft, specializzato in HTML5, Windows 8 e Internet Explorer. Ama lavorare con la comunità e spingere ai limiti la tecnologia per risolvere sfide complesse. Nel 2006 ha vinto il Imagine Cup worldwide championship con un progetto avveniristico, un anno dopo è stato nominato Best Consultant of the Year from dalla British Computer Society. All'inizio del 2009, Giorgio si è trasferito presso la sede Microsoft di Redmond per concentrarsi sul futuro del web. Giorgio è un oratore molto popolare in tutto il mondo e ha presentato numerose conferenze. Lui è la mente che sta dietro a molti dei game e delle applicazioni HTML5 presenti su www.beautyoftheweb.com.
