Roll It è un esperimento Chrome che reinventa un classico gioco di passerelle utilizzando solo il browser su telefono e computer. Il browser del telefono ti consente di mirare e far roteare la palla con un semplice movimento del polso, mentre il browser sul computer visualizza la grafica in tempo reale del vicolo con WebGL e Canvas. I due dispositivi comunicano tramite WebSocket. Nessuna app. Niente più download. Nessun token. Tutto ciò di cui hai bisogno è un browser moderno.
Con la direzione di Google Creative Lab, Legwork ha sviluppato l'esperienza utente, le interfacce e l'ambiente di gioco, quindi ha collaborato con il partner di sviluppo Modalità Set per creare Roll It. Nel corso della durata del progetto si sono verificate varie sfide uniche. Questo articolo illustra alcune delle tecniche che abbiamo utilizzato, i trucchi che abbiamo scoperto e le lezioni che abbiamo imparato durante il lancio di Roll It.
Flusso di lavoro 3D
Una delle difficoltà iniziali è stata quella di trovare il modo migliore per trasferire i modelli 3D del nostro software in un formato file pronto per il web. Dopo aver creato gli asset all'interno di Cinema 4D, i modelli sono stati semplificati e convertiti in mesh a basso poligono. A ogni mesh sono stati assegnati determinati tag di selezione dei poligoni per distinguere le parti dell'oggetto ai fini della colorazione e dell'applicazione delle texture. Abbiamo quindi potuto esportarlo come file Collada 1.5 (.dae) e importarlo in Blender, un programma 3D open source, per creare file compatibili con tre.js. Dopo aver verificato che i nostri modelli fossero importati correttamente, abbiamo esportato il mesh come file JSON e l'illuminazione è stata applicata utilizzando il codice. Di seguito è riportata una descrizione più dettagliata dei passaggi che abbiamo intrapreso:
Scrittura del codice
Roll È stato sviluppato con librerie open source e viene eseguito in modo nativo nei browser moderni. Con tecnologie come WebGL e WebSockets, il web si avvicina a esperienze multimediali e di gioco di qualità console. La facilità e la comodità con cui gli sviluppatori possono realizzare queste esperienze stanno facendo passi da gigante grazie alla disponibilità di strumenti più moderni per lo sviluppo in HTML.
L'ambiente di sviluppo
La maggior parte del codice originale di Roll It è stata scritta con CoffeeScript, un linguaggio chiaro e conciso che transcompila in JavaScript ben strutturato e con lint. CoffeeScript si distingue per lo sviluppo OOP grazie al suo ottimo modello di ereditarietà e a una gestione più pulita dell'ambito. Il CSS è stato scritto con il framework SASS, che offre allo sviluppatore una serie di ottimi strumenti per migliorare e gestire i fogli di stile di un progetto. L'aggiunta di questi sistemi al processo di compilazione richiede un po' di tempo per la configurazione, ma ne vale decisamente la pena, soprattutto per un progetto più grande come Roll It. Abbiamo configurato un server Ruby on Rails per compilare automaticamente le risorse durante lo sviluppo, in modo che tutti questi passaggi di compilazione siano diventati trasparenti.
Oltre a creare un ambiente di programmazione semplice e comodo, abbiamo ottimizzato manualmente gli asset per ridurre al minimo le richieste e caricare il sito più velocemente. Abbiamo eseguito ogni immagine tramite un paio di programmi di compressione: ImageOptim e ImageAlpha. Ogni programma ottimizza le immagini a modo loro, rispettivamente senza perdita di dati e con perdita di dati. Con la giusta combinazione di impostazioni, possono ridurre notevolmente le dimensioni del file di un'immagine. In questo modo, non solo risparmia larghezza di banda durante il caricamento delle immagini esterne, ma dopo l'ottimizzazione le immagini si traducono in stringhe codificate in base64 molto più piccole per l'incorporamento incorporato in HTML, CSS e JavaScript. Con la codifica Base64, abbiamo anche incorporato i nostri file dei caratteri Open Sans WOFF e SVG direttamente nel CSS utilizzando questa tecnica, ottenendo ancora meno richieste totali.
La scena 3D basata sulla fisica
THREE.js è l'onnipresente libreria JavaScript 3D per il web. Completa le ottimizzazioni matematiche 3D di basso livello e le ottimizzazioni WebGL basate su hardware che consentono ai semplici mortali di creare facilmente scene 3D interattive ben illuminate e meravigliose senza dover scrivere shard personalizzati o eseguire trasformazioni manuali della matrice. Physijs è un wrapper specifico per THREE.js per una popolare libreria di fisica C++ tradotta in JavaScript. Abbiamo sfruttato questa libreria per simulare il rotolamento della palla, il salto e il rimbalzo verso la destinazione in 3D.
Fin dall'inizio, il nostro obiettivo non era solo rendere realistica l'esperienza fisica di far rotolare la palla, ma anche fare in modo che gli oggetti nel gioco fossero reali. Ciò ha richiesto molte iterazioni per regolare la gravità complessiva della scena di Physijs, la velocità della palla mentre rotola dal tiro del giocatore, la pendenza del salto della corsia e le proprietà di attrito e restituzione (rimbalzo) dei materiali della palla e della corsia. La combinazione di maggiore gravità e maggiore velocità ha prodotto un'esperienza di gioco più realistica.
Perfezionamento
La maggior parte delle combinazioni moderne di browser e schede video dovrebbe sfruttare l'anti-aliasing basato su hardware nativo nell'ambiente WebGL, ma alcune non saranno apprezzate. Nel caso in cui l'anti-aliasing non funzioni in modo nativo, i bordi duri e contrastati nella scena THREE.js saranno frastagliati e brutti (almeno per i nostri occhi più attenti).
Fortunatamente esiste una soluzione: tramite uno snippet di codice possiamo rilevare se la piattaforma supporta in modo nativo l'antialias. Se c'è, allora siamo pronti. In caso contrario, ci sono una serie di smoother di post-elaborazione forniti con THREE.js che possono aiutarci. ovvero il filtro anti-aliasing FXAA. Ridisegnando la scena visualizzata in ogni fotogramma con questo tonalità, di solito le linee e i bordi avranno un aspetto molto più liscio. Guarda la demo qui sotto:
// Check for native platform antialias support via the THREE renderer
// from: http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#antialiasing
var nativeAntialiasSupport = (renderer.context.getParameter(renderer.context.SAMPLES) == 0) ? false : true;
Controlli di gioco basati sull'accelerometro
Gran parte del tiro La magia deriva dal gesto che fa roteare la palla e che il giocatore esegue con uno smartphone. I dispositivi mobili hanno accesso all'accelerometro all'interno del browser da un po' di tempo, ma come settore stiamo appena iniziando a esplorare il riconoscimento dei gesti basato sul movimento sul web. I dati forniti dall'accelerometro dello smartphone sono in qualche modo limitati, ma con un po' di creatività possiamo dar vita a nuove esperienze straordinarie.
Rilevamento del movimento Il gesto principale del movimento inizia con il monitoraggio degli ultimi 10 aggiornamenti dell'accelerometro provenienti dall'evento deviceorientation della finestra. Sottraendo il valore di inclinazione precedente dal valore di inclinazione corrente, memorizziamo il delta angolo tra gli eventi. Quindi, sommando costantemente i delta degli ultimi dieci angoli, siamo in grado di rilevare la rotazione continua man mano che il telefono si sposta nello spazio. Quando lo smartphone supera una soglia di cambio di angolazione, attiva un movimento. Quindi, trovando il delta di inclinazione singolo più grande nella scansione, possiamo stimare la velocità della palla. Nella modalità Roll It, questa velocità viene normalizzata mediante i timestamp che alleghiamo a ogni aggiornamento dell'accelerometro. Ciò consente di rendere più fluida la velocità variabile degli aggiornamenti dell'accelerometro nel browser su diversi dispositivi.
Comunicazione WebSocket
Quando il giocatore fa muovere la pallina con lo smartphone, quest'ultimo riceve un messaggio con l'invito a lanciare la pallina. Questo messaggio "roll" viene inviato tramite un oggetto dati JSON attraverso una connessione WebSocket tra le due macchine. I dati JSON sono di piccole dimensioni, principalmente costituiti da un tipo di messaggio, velocità di lancio e direzione di punta.
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
Tutte le comunicazioni tra il laptop e lo smartphone avvengono tramite piccoli messaggi JSON come questo. Ogni volta che il gioco aggiorna il proprio stato sul desktop o che l'utente inclina o tocca un pulsante sul telefono, tra le macchine viene trasmesso un messaggio WebSocket. Per mantenere questa comunicazione semplice e facile da gestire, i messaggi WebSocket vengono trasmessi utilizzando un unico punto di uscita da entrambi i browser. Al contrario, sul browser di destinazione esiste un unico punto di ingresso, con un solo oggetto WebSocket che gestisce tutti i messaggi in entrata e in uscita su entrambe le estremità. Quando viene ricevuto un messaggio WebSocket, i dati JSON vengono ritrasmessi all'interno dell'app JavaScript utilizzando il metodo trigger() di jQuery. A questo punto, i dati in entrata si comportano come qualsiasi altro evento DOM personalizzato e possono essere recuperati ed elaborati da qualsiasi altro oggetto dell'applicazione.
var websocket = new WebSocket(serverIPAddress);
// rebroadcast incoming WebSocket messages with a global event via jQuery
websocket.onmessage = function(e) {
if (e.data) {
var obj = JSON.parse(e.data);
$(document).trigger(data.type, obj);
}
};
// broadcast outgoing WebSocket messages by passing in a native .js object
var broadcast = function(obj) {
websocket.send(JSON.stringify(obj));
};
I server Roll It's WebSocket vengono creati in tempo reale quando due dispositivi vengono sincronizzati con un codice di gioco. Il backend per Roll It è stato creato sulle piattaforme Google Compute Engine e App Engine utilizzando Go.
Inclinazione delle schermate dei menu
Oltre ai messaggi WebSocket basati sugli eventi usati durante il gameplay, i menu della funzionalità Rotolo possono essere controllati inclinando il telefono e toccando un pulsante per confermare una selezione. Ciò richiede un flusso più costante di dati sull'inclinazione trasmessi dallo smartphone al laptop. Per ridurre la larghezza di banda ed evitare l'invio di aggiornamenti non necessari, questi messaggi vengono inviati solo se l'inclinazione del dispositivo è cambiata di più di un paio di gradi. È inutile inviare un flusso di dati sull'inclinazione se il telefono è appoggiato orizzontalmente su un tavolo. Anche la velocità di trasmissione è limitata: non vengono inviati più di 15 messaggi WebSocket al secondo in Roll It, anche se il dispositivo viene attivamente inclinato.
Una volta selezionati sul computer, i valori di inclinazione vengono interpolati nel tempo utilizzando requestAnimationFrame per ottenere una sensazione fluida. Il risultato finale è un menu a rotazione e una palla che rotola per indicare la selezione dell'utente. Quando lo smartphone invia dati di inclinazione, questi elementi DOM vengono aggiornati in tempo reale ricalcolando una trasformazione CSS all'interno del loop requestAnimationFrame. Il contenitore del menu ruota semplicemente, ma la pallina sembra rotolarsi lungo il pavimento. Per ottenere questo effetto, implementiamo una trigonometria di base per mettere in relazione la coordinata x delle sfere con la sua rotazione. La semplice equazione è: rotazioni = x / (diametro * β)
Conclusione
Il rotolo È un segno dei tempi. Tra i progetti open source che hanno alimentato il suo sviluppo, la potenza di elaborazione dei dispositivi sulle nostre scrivanie e nelle nostre tasche e lo stato del web come piattaforma, è un momento davvero entusiasmante e trasformativo per essere connessi sul web aperto. Solo pochi anni fa, gran parte di questa tecnologia esisteva solo in sistemi proprietari e non era disponibile per l'uso e la distribuzione libera. Oggi, è possibile realizzare esperienze complesse con meno lavoro e più immaginazione, perché ogni giorno creiamo e condividiamo nuovi pezzi del puzzle. Dunque, cosa aspetti? Costruisci qualcosa di grande e condividilo con il mondo.
