Roll It ist ein Chrome-Experiment, bei dem ein klassisches Boarding-Spiel nur mit dem Browser auf deinem Smartphone und Computer neu erfunden wird. Mit dem Browser auf deinem Smartphone kannst du den Ball mit nur einer Bewegung deines Handgelenks zielen und rollen, während der Browser auf deinem Computer die Echtzeitgrafik der Roll It mit WebGL und Canvas rendert. Die beiden Geräte kommunizieren über WebSockets. Keine Apps. Ohne Downloads. Keine Tokens. Sie benötigen lediglich einen modernen Browser.
Legwork entwickelte die Benutzeroberfläche, die Benutzeroberflächen und die Spielumgebung in Zusammenarbeit mit dem Entwicklungspartner Mode Set, um Roll It zu entwickeln. Während des Projekts gab es eine Reihe von einzigartigen Herausforderungen. In diesem Artikel erfahren Sie mehr über die Techniken, die wir angewandt haben, welche Tricks wir entdeckt haben und welche Erkenntnisse wir dabei gewonnen haben, um mit „Roll It“ etwas zu verwirklichen.
3D-Workflow
Am Anfang war es schwierig, den besten Weg zu finden, 3D-Modelle aus unserer Software in ein webfähiges Dateiformat zu übertragen. Nachdem die Assets im Cinema 4D erstellt wurden, wurden die Modelle vereinfacht und in Mesh-Netzwerke mit niedrigen Polygonen konvertiert. Jedem Mesh-Netzwerk wurden bestimmte Polygon-Auswahl-Tags zugewiesen, um zwischen Teilen des Objekts für Farb- und Texturierung zu unterscheiden. Anschließend konnten wir sie als COLLADA-1.5-Datei (.dae) exportieren und in Blender, ein Open-Source-3D-Programm, importieren, um kompatible Dateien für drei.js zu erstellen. Nachdem wir sichergestellt hatten, dass unsere Modelle korrekt importiert wurden, haben wir das Mesh-Netzwerk als JSON-Datei exportiert und die Beleuchtung mithilfe von Code angewendet. Hier die Schritte, die wir unternommen haben:
Code schreiben
Roll Es wurde mit Open-Source-Bibliotheken entwickelt und kann nativ in modernen Browsern ausgeführt werden. Mit Technologien wie WebGL und WebSockets nähert sich das Web immer näher an Spiele- und Multimedia-Erlebnissen in Konsolenqualität. Die einfache und bequeme Möglichkeit, mit der Entwickler diese Umgebungen erstellen können, ist mit der Einführung modernerer Tools für die HTML-Entwicklung weiter vorangekommen.
Die Entwicklungsumgebung
Der größte Teil von Roll It's Originalcode wurde mit CoffeeScript geschrieben, einer sauberen und prägnanten Sprache, die in wohlgeformten JavaScript-Code mit Lint transkompiliert wird. CoffeeScript glänzt bei der OOP-Entwicklung mit seinem hervorragenden Vererbungsmodell und der übersichtlicheren Handhabung von Bereichen. Der CSS-Code wurde mit dem SASS-Framework geschrieben, das dem Entwickler eine Reihe nützlicher Tools zur Optimierung und Verwaltung der Stylesheets eines Projekts bietet. Die Einrichtung dieser Systeme in den Build-Prozess nimmt etwas Zeit in Anspruch, aber die Mühe lohnt sich auf jeden Fall, insbesondere bei einem größeren Projekt wie Roll It. Wir haben einen Ruby on Rails-Server eingerichtet, um unsere Assets während der Entwicklung automatisch zu kompilieren. Dadurch wurden alle diese Kompilierungsschritte transparent.
Neben der Schaffung einer optimierten und komfortablen Codierungsumgebung haben wir die Assets manuell optimiert, um Anfragen zu minimieren und die Website schneller zu laden. Jedes Bild wurde mit mehreren Komprimierungsprogrammen versehen: ImageOptim und ImageAlpha. Jedes Programm optimiert Bilder auf eigene Weise – verlustfrei bzw. verlustbehaftet. Mit der richtigen Kombination von Einstellungen kann die Dateigröße eines Bildes erheblich reduziert werden. Dadurch wird nicht nur Bandbreite beim Laden externer Bilder gespart, sondern die Bilder werden nach der Optimierung auch in viel kleinere base64-codierte Strings umgewandelt und können direkt in HTML, CSS und JavaScript eingebettet werden. Zum Thema Base64-Codierung haben wir mit dieser Technik auch die WOFF- und SVG-Schriftartdateien von Open Sans direkt in den CSS-Code eingebettet, was zu insgesamt noch weniger Anfragen führte.
Die physikbasierte 3D-Szene
THREE.js ist die universelle 3D-JavaScript-Bibliothek für das Web. Es umfasst einfache 3D-Mathematik und hardwarebasierte WebGL-Optimierungen, mit denen einfache Menschen ganz einfach gut beleuchtete und schöne interaktive 3D-Szenen erstellen können, ohne benutzerdefinierte Shader schreiben oder manuelle Matrixtransformationen durchführen zu müssen. Physijs ist ein DREE.js-spezifischer Wrapper für eine beliebte C++-Physikbibliothek, die in JavaScript übersetzt wurde. Wir haben diese Bibliothek genutzt, um das Rollen, das Springen und das Sprung des Balls in 3D zu simulieren.
Von Anfang an war es unser Ziel, nicht nur das physische Erlebnis des Balls realistisch wirken zu lassen, sondern auch sicherzustellen, dass sich die Objekte im Spiel real anfühlen. Dazu waren viele Iterationen nötig, um die allgemeine Schwerkraft der Physijs-Szene, die Geschwindigkeit des Balls, wenn er vom Wurf des Spielers rollt, die Steigung des Sprungs der Spur sowie die Reibungs- und Restitutionseigenschaften (Haufen) des Ball- und Bahnmaterials anzupassen. Durch die Kombination aus Schwerkraft und Geschwindigkeit wurde das Spiel realistischer.
Glättung
Die meisten modernen Browser- und Grafikkartenkombinationen nutzen natives hardwarebasiertes Anti-Aliasing in der WebGL-Umgebung, aber einige sind nicht optimal. Falls Anti-Aliasing nicht nativ funktioniert, sind harte und kontrastreiche Kanten in der THREE.js-Szene (zumindest für unsere aufmerksamen Augen) zerklüftet und hässlich.
Glücklicherweise gibt es eine Lösung: Über ein Code-Snippet können wir feststellen, ob die Plattform Antialiasing nativ unterstützt. Wenn dies der Fall ist, ist es gut. Wenn nicht, gibt es eine Reihe von Nachbearbeitungs-Shadern in THREE.js, die uns helfen können. Den FXAA-Anti-Aliasing-Filter. Indem wir die gerenderte Szene jeden Frame mit diesem Shader neu zeichnen, haben wir im Allgemeinen einen viel flüssigeren Look für unsere Linien und Kanten. Sehen Sie sich die Demo unten an:
// 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;
Spielsteuerung basierend auf Beschleunigungsmessern
Die Magie von Roll It's ergibt sich aus der Bewegung des Balls, die der Spieler auf einem Smartphone ausführt. Mobilgeräte hatten bereits seit einiger Zeit Zugriff auf den Beschleunigungsmesser im Browser, aber als Branche fangen wir gerade erst an, die bewegungsbasierte Gestenerkennung im Web zu untersuchen. Wir sind durch die Daten, die der Beschleunigungsmesser des Smartphones liefert, etwas eingeschränkt, aber mit ein wenig Kreativität können wir tolle neue Erfahrungen schaffen.
Rollenerkennung Die Hauptgeste zum „Wischen“ beginnt mit dem Tracking der letzten 10 Aktualisierungen des Beschleunigungsmessers, die aus dem deviceorientation-Ereignis des Fensters stammen. Durch Subtrahieren des vorherigen Neigungswerts vom aktuellen Neigungswert wird das Winkeldelta zwischen den Ereignissen gespeichert. Durch die kontinuierliche Summierung der letzten zehn Winkeldeltas können wir dann eine kontinuierliche Drehung erkennen, während sich das Smartphone durch den Raum bewegt. Wenn das Smartphone einen Schwellenwert für eine Wischwinkeländerung überschreitet, wird ein Würfeln ausgelöst. Dann können wir die Geschwindigkeit für den Ball schätzen, indem wir das größte Delta der einzelnen Neigungen in diesem Kreislauf ermitteln. Bei Roll It wird diese Geschwindigkeit anhand von Zeitstempeln normalisiert, die wir an die Updates des Beschleunigungsmessers anhängen. Dadurch wird die variable Geschwindigkeit, mit der die Beschleunigungsmesser-Updates in den Browser auf verschiedenen Geräten gestreamt werden, ausgeglichen.
WebSockets-Kommunikation
Nachdem der Spieler den Ball mit seinem Smartphone gerollt hat, wird eine Nachricht vom Smartphone an den Laptop gesendet, in der er aufgefordert wird, den Ball zu werfen. Diese „Roll“-Nachricht wird über ein JSON-Datenobjekt über eine WebSocket-Verbindung zwischen den beiden Computern gesendet. Die JSON-Daten sind klein und bestehen hauptsächlich aus Nachrichtentyp, Wurfgeschwindigkeit und Zielrichtung.
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
Die gesamte Kommunikation zwischen Laptop und Smartphone erfolgt über kleine JSON-Nachrichten wie diese. Jedes Mal, wenn der Spielstatus auf dem Desktop aktualisiert wird oder der Nutzer eine Schaltfläche auf dem Telefon neigt oder tippt, wird eine WebSocket-Nachricht zwischen den Computern übertragen. Damit diese Kommunikation einfach und leicht zu verwalten ist, werden die WebSockets-Nachrichten über einen einzigen Austrittspunkt von beiden Browsern gesendet. Umgekehrt gibt es im empfangenden Browser einen einzigen Einstiegspunkt, bei dem ein WebSocket-Objekt alle eingehenden und ausgehenden Nachrichten an beiden Enden verarbeitet. Wenn eine WebSocket-Nachricht empfangen wird, werden die JSON-Daten innerhalb der JavaScript-Anwendung mithilfe der trigger()-Methode von jQuery nochmals übertragen. An dieser Stelle verhalten sich die eingehenden Daten wie jedes andere benutzerdefinierte DOM-Ereignis und können von jedem anderen Objekt in der Anwendung erfasst und verarbeitet werden.
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));
};
Roll It's WebSocket-Server werden „on-the-fly“ erstellt, wenn zwei Geräte mit einem Spielcode synchronisiert werden. Das Back-End für Roll It wurde auf der Google Compute Engine- und der App Engine-Plattform mithilfe von Go erstellt.
Menübildschirme neigen
Abgesehen von den ereignisgesteuerten WebSocket-Nachrichten, die während des Spiels verwendet werden, werden die Menüs in Roll It durch Neigen des Telefons und Tippen auf eine Schaltfläche gesteuert, um eine Auswahl zu bestätigen. Dies erfordert einen gleichmäßigeren Strom von Neigungsdaten, die vom Smartphone zum Laptop übertragen werden. Um die Bandbreite zu reduzieren und das Senden unnötiger Updates zu vermeiden, werden diese Nachrichten nur gesendet, wenn sich die Neigung des Geräts um mehr als ein paar Grad verändert hat. Es macht keinen Sinn, einen Strom von Neigungsdaten zu senden, wenn das Smartphone flach auf einem Tisch liegt. Die Übertragungsrate wird ebenfalls gedrosselt: Im Roll-It-Format werden maximal 15 WebSockets-Nachrichten pro Sekunde gesendet, selbst wenn das Gerät aktiv geneigt wird.
Sobald die Neigungswerte vom Computer erfasst wurden, werden sie mit requestAnimationFrame im Laufe der Zeit interpoliert, um für ein gleichmäßiges Gefühl zu sorgen. Das Endergebnis ist ein rotierendes Menü und ein rotierender Ball, um die Auswahl der Nutzenden anzuzeigen. Während das Smartphone Neigungsdaten sendet, werden diese DOM-Elemente in Echtzeit aktualisiert. Dazu wird eine CSS-Transformation innerhalb der requestAnimationFrame-Schleife neu berechnet. Der Behälter der Speisekarte dreht sich einfach, aber der Ball scheint auf dem Boden zu rollen. Um diesen Effekt zu erzielen, implementieren wir einige grundlegende Trigonometrie, um die X-Koordinaten der Bälle mit ihrer Rotation in Beziehung zu setzen. Die einfache Gleichung lautet: Rotation = x / (Durchmesser * Π)
Zusammenfassung
Würfeln Sie die Zeit. Zwischen den Open-Source-Projekten, auf denen die Entwicklung basiert, der Rechenleistung der Geräte auf unseren Schreibtischen und in unseren Taschen, und dem Stand des Web als Plattform – es ist eine spannende und transformative Zeit, sich im offenen Web zu vernetzen. Noch vor wenigen Jahren gab es einen Großteil dieser Technologie nur in proprietären Systemen und konnte nicht frei genutzt und verbreitet werden. Heutzutage lassen sich komplexe Erlebnisse mit weniger Arbeit und mehr Fantasie realisieren, da wir jeden Tag neue Puzzleteile erschaffen und teilen. Worauf warten Sie noch? Baue etwas Großartiges und teile es mit der Welt!
