HTML5 games: creare videogiochi sfruttando le best-practice di Atari Games

Link copiato negli appunti

Questo articolo è la traduzione di "Building HTML5 Games for the Atari Arcade", pubblicato sul sito www.atari.com dal team di gskinner.com, con l'approvazione di Microsoft.

Oggi sviluppare giochi HTML5 per il web è molto semplice. La maggior parte dei giochi sul web è ancora sviluppata con plug-in come Flash, perché gli sviluppatori non hanno strumenti alternativi che rendano questa attività più semplice e conveniente.

La maggior parte dei giochi di HTML5 sono disponibili come applicazioni isolate perché l'hardware e il browser siano dedicati al gioco. Ma non è così che possiamo immaginare un arcade moderno, in cui gli utenti possano riunirsi, giocare, sfidare gli amici a chi raggiunge il punteggio più alto e via dicendo.

Abbiamo dovuto ripensare (parla il team degli autori, ndR) a come ci siamo avvicinati allo sviluppo dei giochi sfruttanto un set di strumenti comuni.

Con il progetto Atari Arcade, quel gioco sta cambiando. Il sito è stato progettato completamente in HTML5 per Internet Explorer 10 e dispositivi touch con Windows 8, anche se funziona alla grande su tutti i browser moderni.

In questo articolo, vi metteremo rapidamente in grado di creare il vostro gioco HTML5. L'Atari Arcade SDK con CreateJS è una delle prime piattaforme di sviluppo per giochi HTML5 completamente cross-browser, che ci permette sfruttare appieno e facilmente funzionalità come il multi-touch.

L'Atari Arcade SDK è solo una delle diverse soluzioni sulla piazza. Tutte le tecniche che condividiamo possono essere utilizzate con altre piattaforme di gaming per i browser moderni.

In questo articolo vedremo:

I passi per definire e realizzare il vostro gioco
Una panoramica sugli approcci e sugli obiettivi dell'SDK
Codice di esempio che mostri l'integrazione
Come aggiungere stile e/o brio
I passi per testare, ottimizzare e mettere online il vostro gioco

Reimmaginare i classici

Inventare un concept da zero? "Prendere in prestito" idee da altri giochi? Noi di gskinner.com (gli autori ndR) siamo stati fortunati: ci hanno presentato il catalogo di giochi Atari, dai più semplici ai più complessi e ci hanno dato l'opportunità e il compito di reinventarli. Grazie a concetti e dinamiche già sperimentati, abbiamo preso quanto esisteva e vi abbiamo aggiunto qualche novità creativa. Per il lancio, abbiamo scelto otto dei titoli più popolari e riconoscibili.

Visualizzare

Con i progressi informatici degli ultimi 40 anni, abbiamo iniziato da zero. Abbiamo deciso di mantenere l' anima degli originali, che sono stati progettati in un ambiente infinitamente meno ricco di potenzialità.

Ecco un fotogramma della versione originale del gioco Yars' Revenge©, top seller 1986 di Atari.

Concepire

Abbiamo iniziato con qualche semplice bozzetto, senza colori. Ci ha aiutato a delineare il gioco, l'estetica generale e a concentrarci sulle risorse necessarie e sull'approccio da avere, spostando l'attenzione da dettagli specifici come la grafica.

Ecco uno sguardo dietro le quinte con alcuni degli schizzi originali:

Stilizzare

Yars' era allo stesso tempo complicato e divertente da "reimmaginare". Pur essendo un best-seller alla fine degli anni ottanta, nessuno del nostro team ci aveva mai giocato. Dopo aver giocato l'originale, ci siamo sentiti persi come prima.

Gli Yar sono insetti e volano.
C'è un "proiettile" che va a caccia di Yar.
Gli Yar sparano della roba e si possono proteggere dietro a una barriera.
I Qotile sono i loro nemici che vogliono distruggerli.
Possono trasformarsi in turbini e sparare agli Yar
Ma gli Yar hanno un cannone di Zorlon che può sparare, dopo essere stato caricato
I Qotile sono circondati da (cosa sono quelli? Mattoni?)
No! Sono uova o "celle cosmiche"
E gli Yar le mangiano

Abbiamo trovato questo questo fumetto che mostra alcune idee per il design:

Finalizzare

Una volta prese queste idee e discusso tra noi, abbiamo concluso:

Lo Yar è meccanico (o in un esoscheletro hi-tech, che vola a propulsione invece che con le ali)

Lui e le sue armi sono di freddo e sterile metallo

L'ambiente circostante è naturale e sereno

Il Qotile, le uova e i suoi figli sono organici e fanno ribrezzo

Le uova si schiudono e diventano figli ovvero proiettili a caccia di Yar

I turbini sono figli proiettati a tutta velocità: il problema più grosso per lo Yar

Mangiare le uova potenzia lo Yar e gli permettono di caricare il cannone di Zorlon

Inizialmente abbiamo discusso del fatto che lo Yar mangiasse le uova emettendo un suono raccapricciante. Ecco come appare lo stile definitivo:

Abbiamo considerato la storia, il meccanismo di acquisizione dei punti, il sistema dei livelli, le animazioni, le interazioni dell'utente e i controlli touch per ogni gioco. Grazie alla ricerca, l'ideazione e confrontandoci con feedback esterni sull'estetica generale, dopo qualche iterazione abbiamo preso le decisioni finali.

Strategie per lo sviluppo di videogames

Entriamo nel vivo della programmazione! Facciamo un breve tour attraverso le tappe necessarie per sviluppare con l'SDK.

Definire un manifest

Utilizziamo un mezzo molto semplice, centralizzato e standardizzato per definire e caricare gli asset del gioco: un game manifest. Un manifest è un semplice file JSON che descrive le informazioni chiave del gioco e le risorse che utilizzerà. È come una storia che racconta:

Il nome del gioco
Un ID univoco per il sistema
L'elenco di file JavaScript che compongono il gioco, incluse le librerie e la classe "game", che viene istanziata una volta caricato tutto. Abbiamo anche una alternativa minified per gli script usati per il deployment.
Audio, immagini e dati (XML, JSON): le risorse che devono essere precaricate
Percorsi per loghi e altra grafica del gioco.
Informazioni sulle modalità multi-giocatore, il numero di giocatori, etc.
Altri parametri opzionali per definire come il framework interagisce con il gioco, cose come decidere se si può continuare a giocare quando si è persa una partita.

Il manifest contiene i dettagli necessari al preload e al lancio del gioco. Diamo un occhiata al manifest
di Super Breakout©:

// snippet: breakoutManifest.js
{
	"splash":   "arcadeArt/background.jpg",
	"titleArt": "arcadeArt/gameTitle.png",
	"id":       "breakout",
	"name":     "Super Breakout",
	"gameClass": "Breakout.js",
	"modes": [
		{"id":"cavity", "label":"Cavity Mode",
			"src":"arcadeArt/sp-mode-01.jpg"},
		{"id":"progressive", "label":"Progressive Mode",
			"src":"arcadeArt/sp-mode-02.jpg"},
		{"id":"double", "label":"Double Mode",
			"src":"arcadeArt/sp-mode-03.jpg"}
	],
	"dependencies":   [
		"scripts/Ball.js",
		"scripts/Brick.js",
		"scripts/Level.js",
		"scripts/Player.js",
		"scripts/Paddle.js",
		"scripts/LevelManager.js",
		"scripts/LevelSelector.js",
		"scripts/Breakout.js",
		"scripts/ScoreBoard.js"
	],
	"deployDependencies": [
		"scripts/breakout-min.js"
	],
	"assets": [
		{"id":"json","src":"data/data.json"},
		{"id":"bricks","src":"data/bricks.json"},
		{"id":"lives","src":"data/lives.json"},
		"img/lives.png",
		{"id":"paddleData","src":"data/paddle.json"},
		"img/paddle.png",
		{"id:":"brickImage", "src":"img/bricks.png"},
		{"id":"background", "src":"img/background.png"},
		{"id":"scanlines", "src":"img/ui-scanlines.png"},
		{"id":"wall", "src":"sounds/Wall_Hit_02.mp3", "data":2},
		{"id":"brick1", "src":"sounds/Brick_Hit_01_Final.mp3"}
		// altri file audio
	]
}

Suggerimento: utilizzate JSONLint per validare il contenuto di file JSON.

Questo approccio separa le risorse del gioco e le informazioni sul loro utilizzo, dalla logica applicativa.
L'Atari Arcade game framework precarica ed istazia ogni gioco. Il manifest viene utilizzato per configurare e popolare il sito. Quando un utente sceglie il gioco, tutto viene precaricato e configurato. Tutti gli asset sono forniti al gioco in un elega a user chooses your game, everything is preloaded and set up. All the assets are provided to the game in un elegante quanto semplice oggetto hash.

// snippet: loadedAsset.js
// Il manifest del gioco include un immagine
var assets = [
	{id:"projectile", src:"images/projectile.png"}
];
// Nel gioco, facciamo solo questo:
function initialize(assets, stage) {
	var bitmap = new createjs.Bitmap(assets.projectile);
	stage.addChild(bitmap);
}

Il piano di battaglia

L'SDK ci permette di definire e implementare i metodi di cui abbiamo bisogno per integrare il gioco nel progetto Atari Arcade.

Sul sito Atari Arcade, i giochi sono caricati all'interno di iframe. Ciò crea una sandbox per il gioco e facilita il rilascio delle risorse a gioco finito.

Noi dobbiamo solo creare un gioco (in modalità RAD), fornire un manifest e il framework farà il resto.

L'SDK espone moltissime funzionalità native che permettono di lavorare e rilasciare progetti in modo rapido, senza dover gestire attività "periferiche".

La guida rapida, inclusa nell'SDK, fornisce dettagli più precisi sullo sviluppo e comprende una panoramica su tutte le funzionalità, le utility e le classi del framework.

La Documentazione delle API, sempre inclusa nell'SDK è generata direttamente dai commenti nel codice.

Qualcosa di essenziale

Vediamo in rapida successione alcuni concetti chiave:

Inizializzazione e lancio del gioco

Quando il gioco è precaricato si può procedere alla sua inizializzazione:

//snippet: initialize.js
// Basta semplicemente definire la funzione, sarà il framework a richiamarla.
function initialize(stage, assets, gameInfo) {
	this.stage = stage;
	// TODO: Aggiungere gli elementi allo stage
	this.assets = assets;
	// TODO: Ottenere riferimenti alle risorse precaricate
	this.gameInfo = gameInfo;
	// Determinare informazioni come, multi-giocatore, numero dei giocatori,
	// touch enabled, etc.
}

Una volta che l'utente clicca su "Start", il gioco parte.

// snippet: startGame.js
// Basta definire la funzione, il framework la chiamerà
// quando il gioco è pronto per essere lanciato
function startGame() {
	// Start!
	this.createBall();
	this.startMusic();
}

Tick

Il tick scandisce il tempo del gioco ed è realizzato utilizzando il Ticker di EaselJS. È fondamentale per tutta l'evoluzione del gioco: ogni update e animazione degli sprite, collisione, calcolo del punteggio, gestione dell'input viene temporizzata dal Tick. Il Tick è gestito automaticamente per noi: viene fermato e fatto ripartire se necessario, e smorzato in casi di stress eccessivo.

// snippet: tick.js
// Il framework chiama la funzione tick a intervalli regolari
// durante l'esecuzione del gioco
function tick(tickFactor) {
	// Muove la palla
	this.ball.x += (this.ball.vx * tickFactor);
	this.ball.y += (this.ball.vy * tickFactor);
	// Nota: tickFactor indica la velocità del gioco relativamente al
	// framerate, per garantire che il gioco abbia sempre la stessa
	// velocità.
}

La qualità del gioco

Una delle maggiori differenze tra diversi browser e dispositivi, nello sviluppo HTML5/JavaScript, è la performance.

A seconda dell'hardware, del browser o del tempo che fa, potete sfruttare le performance dell'accelerazione hardware con Canvas. A volte un browser deve essere solo riavviato o un utente deve aggiornare la sua scheda grafica, per un aggiornamento dei driver o per la luna piena.

Per affrontare questa situazione, l'SDK Atari Arcade permette di assegnare priorità a feature e effetti in situazioni di alta o bassa qualità. Bisognerà quindi verificare la modalità del gioco (alta o bassa qualità) o gestire un evento di bassa qualità per disabilitare o rimuovere funzionalità meno performanti sotto stress, ridurre o eliminare particolari effetti, animazioni pesanti o utilizzare sprite meno accurati adatti ad una modalità "low-fi".

// snippet: performance.js
// Crea un performance monitor
var minFPS = 20;
var threshold = 20; // Il numero di tick prima di passare a bassa qualità
var perf = new GameLibs.PerformanceMonitor(toggleLowQuality, minFPS, threshold);
// Una volta a bassa qualità, spenge l'effetto dei fuochi d'artificio
function toggleLowQuality(lowQuality) {
	if (lowQuality) {
		fireworksEffect.enabled = false;
	}
}
// In un tick, emette particelle solo in modalità "alta qualità".
function tick() {
	if (perf.lowQualityMode == false) {
		particleEmitter.emit(ball.position, 100, particleProps, defaultParticle);
	}
}

In Combat, abbiamo spento le scie dei proiettili, le tracce dei carrarmati e altri effetti di esplosioni quando la CPU inizia a lamentarsi.

Punteggi

Tutti i giochi contano i punteggi in modo diverso, ma la maggior parte di essi ha requisiti simili: punteggio numerico, conto delle vite e livelli. Una classe ScoreManager fornisce punteggi animati e formattati, così come il punteggio grezzo e non formattato. Possiamo passare questi dati ad un'istanza dell'oggetto Text i EaselJS senza problemi.

Le funzioni callback

Arriva un momento in cui, finito di combattere con la feccia dei Quotile, bisogna far rapporto ai superiori degli Yar. Avete vinto? Dovremmo permettervi di continuare a giocare?

Abbiamo a disposizione alcune semplici callback per comunicare al framework scenari come questo o altri altrettanto significativi.

// callbacks.js
function onKillPlayer() {
	// Chi vogliamo prendere in giro? Hai perso. Yars' è difficile!
	this.lives--;
	if (this.lives == 0) {
		// Normalmente si potrebbe fare qualcosa di carino prima,
		// come il pupazzetto che scompare in dissolvenza
		// o l'animazione con la scena della morte
		this.onGameOver();
	}
}

Fatto! Il framework farà il resto, anche l'invio dei dati al tabellone dei punteggi e la visualizzazione degli "high score".

L'interfaccia utente

L'SDK fornisce utility maneggevoli e componenti personalizzabili per definire e gestire le azioni che l'utente compie su mouse e tastiera. Inoltre traduce la pressione dei tasti del mouse in movimenti e azioni come il trascinamento di oggetti.

Il touch è una tecnologia emergente sul Web e i giochi Atari Arcade sono stati progettati con in mente l'interfaccia tattile di Internet Explorer 10. Potete utilizzare EaselJS e l'Atari Arcade SDK per creare funzionalità multi-touch semplici da usare, grazie ad una implementazione unica e cross-browser.

// snippet: joystick.js
// L'inizializzazione è un ottimo momento per impostare
// i controlli touch
function initialize(stage, assets, gameInfo) {
	// Questa impostazione viene da gameInfo
	if (gameInfo.touchEnabled) {
		// Creare un joystick. Ci sono molte buone
		// configurazioni, ma questa è tutto ciò che basta
		// per iniziare. Tutte le opzioni sono sulla documentazione
		var joystick = new GameLibs.Joystick(stage);
		joystick.setPosition(25, 25);
		stage.addChild(joystick);
	}
}

Altri regali

Molto del codice e degli effetti utilizzati nei giochi sviluppati per Atari è stato impacchettato, documentato e messo a disposizione come parte dell'SDK, cose come:

Effetti sulle particelle
Controlli per l'UI dei giochi
Collisioni lineari e circolari
Utility per maneggiare matematica, punti e stringhe
Background HTML e effetti di parallasse
Utility per gli sprite

Aiuti per Multi-giocatore

Incluse nel SDK, abbiamo alcune classi multiplayer. Il lancio iniziale include quattro giochi multiplayer che le utilizzano. Giochi sviluppati da terze parti al momento non supportano questa modalità, ma siamo alle rifiniture del nostro approccio per favorire esperienze multiplayer di terze parti.

Rendere succulento il gioco

Una volta popolato il manifesto e caricati gli asset, è il momento di porre attenzione allo stile.
Guarnite il gioco con audio, particelle, illustrazioni di impatto e animazioni. Mantenetelo snello, andate sopra le righe. Trasformate l'applicazione in un mondo.

Possono essere piccole cose a rendere interessante l'interazione.

In Yars’ Revenge©, sono il caschetto e l'animazione delle zampe che danno l'impressione del volo. La progenie del Quotile, urlando e stridendo alla nascita è minacciosa! I suoni di sottofondo e spruzzi, aiutano a immedesimarsi nell'ambiente. È una battaglia privata: uno Yar solitario in lotta per salvare la sua specie! Oppure che opprime il pacifico villaggio dei Quotile. Decidete voi.

Il framework vi supporterà anche in questo:

1. La logica dei movimenti

Aggiungere movimenti e animazioni tramite codice. Molte delle librerie incluse vengono in aiuto: utility di matematica, lo ScoreManager, TouchBar, e altre.

2. Animazioni

Il framwork include alcuni trucchetti di animazione con TweenJS. Aggiungete tremolii, scosse e impulsi oppure transizioni per le view, le maschere o all'avanzamento ad un nuovo livello.

3. Suoni

Gli effetti sonori, i rumori di sfondo e una colonna sonora accattivante trasformano l'esperienza radicalmente. SoundJS permette implementazioni cross-browser di altissimo livello, in un attimo.

// snippet: soundjs.js
function fireWeapon() {
	// Riproduce un suono una volta
	createjs.SoundJS.playSound(this.assets.fireSound);
	// Riproduce un suono e ne ottiene il riferimento
	var instance = createjs.SoundJS.playSound(
		this.assets.fireSound,
		createjs.SoundJS.INTERRUPT_ANY,
		offsetMilliseconds, delayMilliseconds,
		loopCount, volume, pan);
	// Assegna la callback per l'evento e richiama un metodo
	instance.onComplete = handleFireComplete;
	instance.pause();
}

4. Magia

Gli effetti con le particelle sono uno standard industriale per creare fascino e "fumo". ParticleEmitter aggiunge effetti di vapore fumante, scintille, spruzzi d'acqua e scie di fumo. È altamente configurabile e utilizza un approccio efficiente combinando il riutilizzo di istanze già allocate con il caching delle bitmap.

5. Touch

Gli utenti possono toccare il browser con le mani e lo stage abilitato al multitouch di EaselJS risponde. Ciò permette di adeguare i controlli già previsti per il gioco o di immaginare una interfaccia ad hoc per l'esperienza tattile.

6. Trucchi

I trucchi sono un punto fermo del settore dei videogiochi, quindi non resta che aggiungere i vostri hack. Il "konami code" è già incluso nell'SDK, collegato ad una callback nella classe GamePad. Chiunque sia abbastanza nostalgico da provare la sequenza sarà magicamente premiato. Lo abbiamo supportato anche in alcuni dei nostri giochi. Provate a scoprire quali!

Strizzare tutto

L'ottimizzazione dei giochi HTML5 varrebbe un articolo a parte, ma ecco alcuni spunti per metterci sulla strada giusta:

1. Immagini e Canvas

Canvas non esegue uno "smart area redraw" (a differenza di Flash), e aggiorna l'intera area ogni tick. L'acce accelerazione hardware può aiutare, ma in generale, meglio cercare di mantenere le texture più piccole possibile. Meglio spostare sfondi statici fuori dal Canvas. La classe GameUI dell'SDK ci viene in soccorso e ci sono altre classi utili per creare effetti al di fuori del Canvas (come le parallassi).

//snippet: background.js
// An asset in the game manifest, which preloads the background
var manifest = [
	{id: "background", src:"images/background.png"}
];
// Backgrounds can be changed in the initialize
// Or alternately somewhere in the game, like a level change.
function initialize(stage, assets, gameInfo) {
	// Note that the background is provided as part of the assets.
	GameLibs.GameUI.changeBackground(assets.background);
}

2. SaltateJump on the Video Card

I browser moderni sono in grado di accelerare i contenuti, ma ci sono ancora modi per ottenere di più. Ad esempio riutilizzare le istanze immagine il più spesso possibile, mettere in cache solo le istanze grafiche che devono essere disegnate una sola volta, utilizzare updateCache() in EaselJS per continuare ad aggiungere pixel alle immagini memorizzate nella cache, come i cingoli dei carri armati in Combat.

// snippet: updateCache	
// Il file Arena.js contiene il metodo stamp
function stamp(stamp) {
	// Clear out any old children. They aren't drawn so they
	// only get removed when we want to stamp something new.
	this.groundLayer.removeAllChildren();
	// Disegna il nuovo sprite soprascrivendo la cache esistente
	this.groundLayer.addChild(stamp);
	// Usando source-over, possiamo sovrascrivere
	this.groundLayer.updateCache("source-over");
}

Infine creare spritesheets e texture che abbiano dimensioni che siano potenze di due. Zoë fornisce questa opzione dalla versione 0.3.0

3. Usare gli Spritesheets

Usare gli spritesheets in HTML5 consente all'accelerazione hardware di utilizzare la stessa immagine per tutti i frame dell'animazione. C'è un unico caricamento, l'immagine è in cache e quindi viene generato semplicemente ciascun frame. Ciò inoltre evita al browser di ricaricare le texture nella GPU quando l'immagine non è in uso in un frame.

Abbiamo utilizzato Flash per creare alcune delle nostre animazione ma tutti gli asset sono stati rielaborati con Zoë. Utilizziamo JSFL per impacchettare gli spritesheets da utilizzare con CreateJS.

Un altro approccio per la grafica vettoriale è quello di esportare gli asset direttamente da Flash utilizzando "Adobe Toolkit for CreateJS". Può esportare i vettori in un formato compatibile con la classe SpriteSheetBuilder di EaselJS , per generare spritesheets al volo a runtime.

4. Ottimizzare il codice

Anche se il rendering di canvas impegna buna parte della nostra pipeline, l'ottimizzazione del codice è un esercizio che incoraggiare.

Trovare modi intelligenti per ridurre il carico. La classe ProximityManager ne è un esempio: traccia la prossimità di migliaia di sprite con poco overhead (basato sull'originale scritto nel 2004)
Riutilizzare oggetti, array e altre istanze invece di crearne di nuove
Pre-definire i calcoli o gli algoritmi utilizzati più di frequente
Utilizzare ricerche hash invece di continuare a iterare un array
Rilasciare gli oggetti una volta utilizzati, per liberare memoria.

5. Conoscere i limiti

Alcuni browser funzionano meglio con alcune tecnologie. Pianificare sempre il proprio progetto per l'accelerazione hardware, ma rendendolo capace di essere di degradare.

Tenersi alla larga da ombreggiature e metodi di fusione. La maggior parte dei browser non può accelerare questi effetti e c'è il rischio di rallentare il framerate.

Guardare le dimensioni delle immagini su iOS. Al di sopra dei 2048x2048px vengono automaticamente ridotte al 50%. Allo stesso modo, qualsiasi cosa creata in memoria oltre il limite non sarà visualizzata.

Browser diversi hanno diverse limitazioni quanto a canali audio con HTML5, quindi meglio essere certi di rimanere sotto i 40 canali audio (inclusi i duplicati per eventuali effetti di sovrapposizione).

6. Ridurre i tempi di caricamento

C'è una tonnelata di cose da poter fare qui.

Affrontare i formati di immagine con la testa. Salvare gli sfondi come JPG. Utilizzare strumenti come Omega per ottenere la compressione JPG con il canale alfa, or ImageAlpha per utilizzare PNG a 256 colori con trasparenza perfetta.
I giochi Atari Arcade utilizzano ImageAlpha per ridurre gli spritesheets fino all'80%.
Comprimere l'audio e raschiare via quel che si può. I giochi non hanno bisogno di audio stereo a 256kb, prova con 32-64kb mono (o anche meno!).
Minificare il codice. Mettere tutto in un singolo file offre diversi vantaggi in termini di risparmio! Noi utilizziamo sia compilatori server-side che client-side, come like Google closure per compilare JavaScript, e abbiamo un CSS dopato con LESS.
Utilizzare librerie su CDN. JQuery, Backbone, CreateJS. Queste le abbiamo già fornite come parte dell'SDK, ma rimane comunque un buon consiglio.
Utilizzare i consigli sugli spritesheet di cui sopra. Oltre agli spritesheet a run-rime, Zoë fornisce un ottimo riuso dei frame, con una soglia configurabile per riutilizzare fotogrammi tra loro simili. Per fare le cose ancora più facili, abbiamo realizzato uno strumento che funge da wizard in questo workflow. Date un'occhiata al Prep for Zoë JSFL Command!

Risciaquo

Mobile e desktop, diversi Browser, comportamenti diversi, lo stesso browser su un diverso sistema operativo, o CPU diverse, o ancora su schede video diverse, tutte variabili che ci fanno ottenere risultati anche molto diversi tra loro.

Effettuate verifiche sul browser di destinazione, e controllate spesso. Mentre testate sulle diverse versioni di IE, provare a utilizzare gli strumenti di sviluppo F12.

Effettuate controlli di integrità durante la verifica dei bug, svuotando la cache, aggiornando la pagina, oppure ripetendo il test su versioni precedenti e attualidello stesso browser. Per esempio, alcuni browser come Chrome aggiornano spesso, o in modo invisibile, introducendo potenziali incompatibilità con il codice. A volte il buon vecchio riavvio del browser potrebbe aiutare soprattutto quando cose come CSS3D o WebAudio smettono completamente di funzionare.

Debugging

Per semplificare e uniformare la console di reportistica dei diversi browser, abbiamo utilizzato alcune utilità che consentono di risparmare tempo e qualche mal di testa quando consultiamo i log della console.

Atari.trace() - L'SDK fornisce un metodo per ottenere i logo della console indipendente dai browser. La console è nostra amica e fornisce informazioni inestimabili sugli errori! È importante ottenere le informazioni di cui abbiamo bisogno senza che appaiano in superficie e che vengano viste dagli utenti.
Un flag "developerMode" flag nella classe core Atari, ci permette di testare codice e scenari, senza preoccuparsi del fatto che stanno girando anche per gli utenti finali. Questo flag automaticamente abilita/disabilita la verifica verbosa degli errori: se impostato a false sopprimerà tutti i log Atari.trace().

Test in locale

La natura di HTML5 può rendere difficile il testing a livello locale. Ci sarà una esplosione di errori e warning dal browser a bizzeffe.

Confrontate il comportamento online per vedere cosa è isolato al test locale rispetto a reali difetti del codice. Ad esempio bisogna ignorare errori cross-origin generati localmente nel tentativo di caricare contenuti tramite XHR.

Alcune caratteristiche di HTML5 pretendono di essere testate facendo girare l'applicazione su un server. In questo caso il test locale può essere effettuato con tool come MAMP e XAMPP che fanno girare dei web server localmente.

Mac: http://www.mamp.info/
Windows and Linux:http://www.apachefriends.org/en/xampp.html

Scaricateli, fateli puntare alla directory del vostro gioco, navigate fino alla pagina di lancio sul vostro IP locale e dite addio agli errori di natura cross-origin.

Questo inoltre rende semplicissimo il testing sui dispositivi mobili in rete. In un team come gskinner.com
non era raro inbatterci in bug legati al testing degli altri, come verifiche effettuate sulla macchina di altri sviluppartori mentre il softeware girava su un server locale.

Una nota utile: per testare contenuti locali in Internet Explorer 10, aggiungete il vostro IP come sito attendibile nelle opzioni sul desktop di Windows 8.

Test online

Il solo e vero test è online. Mettete un progetto in fase di milestone su un server e fatevi un bel giro tra le funzionalità e verificate i problemi che avete risolto con tutti browser, sistemi operativi e dispositivi. Ricordate di svuotare sempre la cache tra i vari test (a meno che stiate testando funzionalità specifiche per la cache) e di tanto in tanto chiudere il browser.

FTP è lento, Provate invece un repository per il deployment con GIT sul vostro server con SSH: ogni partecipante al progetto potrà semplicemente effettuare il commit dei propri cambiamenti. Noi abbiamo installato uno script che automaticamente salva gli ultimi aggiornamenti sul server e lo abbiamo collegato all'evento commit di git (commit hook) per un deployment completamente automatico.

L'SDK fornisce alcune funzionalità ottime per testare i giochi e include alcune opzioni aggiuntive che possono alleggerire il caricamento, come ad esempio:

quick play: Uno script sul sito simula il caricamento del gioco, mostrando anche le modalità di gioco, il multiplayer e gestendo gli scenari di game over.
audio-free: L'audio probabilmente è la più pesante delle risorse in un gioco. Inotre alcuni browser hanno problemi con file audio di grandi dimensioni e impostazioni di codifica particolari, quindi diventa prudente prevedere un modo per evitare di caricare o riprodurre suoni.
force touch: Non si può veramente simulare il touch, ma possiamo almeno forzare il framework per simulare sul desktop controlli e scenari che visualizzeremmo con il touch.

Premere il bottone rosso...

Sforzatevi di avere il minimo processo possibile per il deploy, semplice come girare una chiave. Quasi tutto è già fatto per noi dall'SDK.

Una volta fatto, visitate la sezione di attivazione dei giochi nel centro per sviluppatori. È disponibile un servizio per la registrazione.

... e distruggere!

Grazie per aver letto fino a questo punto, ora basta leggere però! Iniziamo a sviluppare. Prendete un bel titolo, e andate a divertirvi. Fateci sapere quel che fate e cosa vorreste vedere in Atari Arcade o nell'SDK.

Risorse

Ecco qualche altra risorsa e riferimento per lo sviluppo di giochi in HTML5

Indice lezioni