TAGonSoft

← Alle Artikel

Wie wir Table Online gebaut haben — ein Multiplayer-Backgammon-Spiel in Flutter für Web, iOS und Android

Engineering-Lektionen aus dem Bau eines Echtzeit-Spiels in Flutter, mit demselben Code, der im Browser und nativ auf Mobile läuft. State Management, Server-Sync, 60fps-Performance.

2 Min Lesezeit Sebastian Jipa

Vor einigen Monaten haben wir Table Online veröffentlicht — ein klassisches Multiplayer-Backgammon-Spiel, das Sie direkt im Browser unter table-online.ro oder als native App auf iPhone und Android spielen können. Alles ist in Flutter gebaut, mit einer einzigen Codebasis für alle drei Plattformen. Dieser Artikel ist ein Engineering-Blick hinter die Kulissen.

Warum Flutter für ein Multiplayer-Spiel

Die Wahl war nicht offensichtlich. Bei Spielen empfehlen viele reflexartig Unity oder eine Custom Engine. Wir haben Flutter aus drei konkreten Gründen gewählt:

  1. Animationen sind First-Class in Flutter. AnimationController, AnimatedBuilder, Hero, TweenAnimationBuilder — alle Bewegungsdaten für Backgammon-Steine und Würfel sind vom Framework bereits gelöst. Wir mussten keine Physik-Engine schreiben.
  2. Das Web ermöglicht Adoption ohne Download. Die größte Hürde bei der Adoption mobiler Spiele ist die Installation. Mit Flutter Web landet der Nutzer, tippt zweimal, spielt eine Partie. Wenn es ihm gefällt, installiert er später die App.
  3. Eine Codebasis, drei Plattformen — und das ist nicht nur eine Marketing-Aussage. Spiellogik, Zug-Validierung, Server-Kommunikation — alles lebt in derselben Datei und verhält sich überall identisch.

Architektur

Kurz gefasst:

  • Flutter-Frontend — UI, Animationen, lokaler Input. State Management mit Riverpod.
  • Dart-Server auf Cloud Run — die Spielautorität. Jeder Zug wird serverseitig validiert; der Client schlägt nur vor.
  • WebSockets für Sync — eine persistente Verbindung pro Partie, Protobuf-style Nachrichten zur Bandbreiteneinsparung.
  • Firestore für persistenten State — Nutzerprofile, Match-Verlauf, Rangliste.

Die wichtigste Entscheidung: Der Server ist die Source of Truth. Der Client schlägt einen Zug vor, der Server entscheidet, ob er gültig ist, und broadcastet dann das Ergebnis an beide Spieler. Das eliminiert eine ganze Klasse von Cheating und macht das Debugging vorhersehbar.

Performance: 60fps im Browser halten

Flutter Web ist auf der Performance-Seite schwieriger als natives Mobile. Ein paar Dinge haben den Unterschied gemacht:

  • RepaintBoundary um das Brett — wir isolieren Brett-Repaints vom Rest der UI. Beim Bewegen eines Steins wird nicht der Score neu gezeichnet.
  • HTML-Renderer für textlastige Seiten, CanvasKit für die Spielseite — Flutter Web unterstützt zwei Renderer, die man pro Build wählen kann. Für die Spielseite gewinnt CanvasKit klar.
  • Lazy Loading von Assets — Stein-Texturen, Sounds, Sieg-Animationen werden nur bei Bedarf geladen.

Die nützlichste Lektion

Würde ich noch einmal anfangen, würde ich mit der Web-Variante vor Mobile starten. Es ist schwieriger (Flutter Web hat weniger Tools und mehr Edge Cases), aber es erzwingt früh die richtigen Architekturentscheidungen — Bundle Size, Lazy Loading, Bildoptimierung. Dieselben Entscheidungen machen den Mobile-Build später besser.

Möchten Sie ein Flutter-Projekt besprechen? Schreiben Sie uns — wir antworten innerhalb eines Werktags. Und wenn Sie das Ergebnis in Aktion sehen möchten, öffnen Sie table-online.ro und spielen Sie eine Runde.