PROXX

Ein Spiel, bei dem es um Nähe geht, inspiriert von Minesweeper.

Mariko Kosaka

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, Tastatur, einem D-Pad oder sogar mit einem Screenreader spielen.

PROXX auf einem Featurephone.

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
    • TTI (Time to Interactive) von weniger als 5 Sekunden bei langsamer 3G-Verbindung
    • Animation mit konstanten 60 fps
Ein Pixelbook mit PROXX
PROXX auf einem Pixelbook.

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

Wir rendern die Spielgrafiken in einem Canvas mit WebGL. 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 entfallen 20 KB auf die anfängliche Nutzlast (index.html). 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

Intelligente Feature-Phones wie Smartphones mit KaiOS gewinnen schnell an Beliebtheit. 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.

Ein Mann spielt PROXX auf einem gelben Featurephone
PROXX auf einem Featurephone.

Nächste Schritte

Die Entwicklung dieses Spiels rechtzeitig zur Google I/O 2019 war eine tolle, aber auch anstrengende Zeit. Wir gönnen uns jetzt eine wohlverdiente Auszeit, werden aber bald mit ausführlicheren Dokumentationen zu jedem dieser Bereiche des Spiels zurückkommen.

Bis dahin können Sie sich den Vortrag ansehen, den Mariko bei der I/O zu diesem Projekt gehalten hat.

Den Code finden Sie im GitHub-Repository von proxx.

Viele Grüße Surma, Jake, Mariko