Ein Spiel, bei dem es um Nähe geht, inspiriert von Minesweeper.
Das Team von squoosh.app ist zurück! Diesmal haben wir ein webbasiertes Spiel namens PROXX (proxx.app) entwickelt. PROXX ist ein Nähe-Spiel, das vom legendären Spiel „Minesweeper“ inspiriert wurde. Das Spiel spielt im Weltraum und Ihre Aufgabe besteht darin, herauszufinden, wo sich die schwarzen Löcher befinden. Sie funktioniert auf allen Arten von Geräten – von Computern bis hin zu Smartphones. Nutzer können das Spiel mit einer Maus, einer Tastatur und einem Steuerkreuz spielen, sogar mit einem Screenreader.
Unsere Baseline
Bevor wir dieses Spiel entwickelt haben, haben wir die folgenden Ziele und Budgets für die Anwendung festgelegt:
- Gleiche grundlegende Funktionsweise: Alle Geräte müssen gleich funktionieren.
- Barrierefrei: Maus, Tastatur, Touchbedienung, Steuerkreuz, Screenreader
- Leistungsstark:
- Weniger als 25 KB anfängliche Nutzlast
- Unter 5 Sekunden TTI (Zeit bis Interaktivität) bei langsamem 3G
- Animation mit konstanten 60 fps
Web Worker
Das Spiel besteht aus vier Hauptentitäten: der Hauptspiellogik, dem UI-Dienst, dem Statusdienst und den Animationsgrafiken. Da wir von Anfang an wussten, dass wir stark animierte Grafiken im Hauptthread ausführen müssen, haben wir die Spiellogik und den Statusdienst in einen Webworker verschoben, um den Hauptthread so kostenlos wie möglich zu halten.
Pre-Render bei der Buildzeit
Unsere Benutzeroberfläche wurde mit Preact erstellt, da wir damit unser ehrgeiziges Ziel für eine anfängliche Nutzlast von weniger als 25 KB erreichen können. Um das Laden zu beschleunigen, haben wir uns entschieden, die erste Ansicht vorab zu rendern. Wir verwenden Puppeteer, um bei der Build-Phase auf die Startseite zuzugreifen und das DOM mit Preact zu füllen. Das resultierende DOM wird dann in HTML serialisiert und als index.html gespeichert.
Canvas für Animation, (unsichtbares) DOM für Barrierefreiheit
Die Spielgrafik wird mithilfe von WebGL in einem Canvas-Element gerendert. Ein Canvas ist für die Hintergrundanimation und ein anderer für das Spielfeld oben verantwortlich. Aus Gründen der Barrierefreiheit gibt es auch eine HTML-Tabelle mit Schaltflächen, die sich über beiden Canvas befindet, aber unsichtbar gemacht wird (Opacity: 0). Auch wenn Sie ein Canvas-Rendering des Spielstatus sehen, interagiert der Spieler mit der unsichtbaren DOM-Tabelle. So können wir Ereignis-Listener anhängen und auf die Fokusverwaltung des Browsers zurückgreifen.
Indem wir das DOM-Element im Canvas beibehalten, können wir die in den Browsern integrierten Bedienungshilfen nutzen. Beispiel: Wenn wir role="grid" in unserer Spieltabelle festlegen, können Screenreader die Zeile und Spalte der fokussierten Zelle ansagen, ohne dass wir das implementieren müssen.
Roll-up für Bündelung und Code-Splitting
Die Gesamtgröße der App beträgt nach Komprimierung 100 KB. Davon stehen 20 KB für die anfängliche Nutzlast (index.html) zur Verfügung. Für dieses Projekt verwenden wir Rollup.js. Wir haben gemeinsame Abhängigkeiten zwischen dem Haupt-Thread und unserem Webworker. Mit Rollup können diese gemeinsamen Abhängigkeiten in einem separaten Chunk abgelegt werden, der nur einmal geladen werden muss. Andere Bundler wie webpack duplizieren die gemeinsamen Abhängigkeiten, was zu einer doppelten Auslieferung führt.
Unterstützung von Feature-Phones
Smarte Feature-Phones wie KaiOS-Smartphones werden immer beliebter. Diese Geräte sind sehr ressourcenbeschränkt. Durch unseren Ansatz, nach Möglichkeit Webworker zu verwenden, konnten wir die Leistung aber auch auf diesen Smartphones deutlich verbessern. Da Smartphones mit einer anderen Eingabeoberfläche (D-Pad und Ziffernblock, kein Touchscreen) ausgestattet sind, haben wir auch eine tastaturbasierte Oberfläche implementiert.
Nächste Schritte
Wir hatten die Gelegenheit, dieses Spiel pünktlich zur Google I/O 2019 zu entwickeln. Wir werden uns also eine wohlverdiente Auszeit nehmen, haben aber vor, mit einer ausführlicheren Dokumentation zu jedem dieser Bereiche des Spiels zurückzukehren.
Bis dahin können Sie sich den Vortrag von Mariko auf der I/O zu diesem Projekt ansehen.
Sie können den Code im proxx-GitHub-Repository durchsuchen.
Viele Grüße Surma (Jakob, Mariko)