aster.io – die URL war schon vergeben, den Projektnamen hab ich aber beibehalten – entstand als Hochschulprojekt aus der Idee, zu zeigen, dass wir schon mit den heutigen Möglichkeiten der Technik quasi überall zusammen spielen können, solange wir unser Handy dabeihaben.
Das Konzept des Spiels ist an den Klassiker asteroids angelehnt – man steuert ein Raumschiff und schießt. Anstelle von Asteroiden schießt man aber auf andere im Spiel befindliche Spieler, und man kann sein eigenes Schiff zeichnen. Das Spiel läuft in Echtzeit ab und ist rundenbasiert, alle paar Minuten endet die Runde und der Spieler mit den meisten Abschüssen gewinnt.
Das Handy als Controller
Das Spiel lässt sich zum einen ganz klassisch am PC im Browser spielen. Mit den Pfeiltasten steuert man sein selbst gemaltes Schiff, mit der Leertaste schießt man.
Viel interessanter ist aber die zweite Variante: Das Spielen via Smartphone. Dabei nutzt man das Smartphone nur als Controller. Man lässt das Spiel in einem Browser laufen, erstellt jedoch kein Schiff, benutzt den Browser also nur als Visualisierung des Spielgeschehens.
Mit Smartphones haben wir ein mächtiges Gerät fast immer dabei. Das eigene Smartphone wird in aster.io als Controller benutzt. Ein neuer Mitspieler besucht einfach die Internetseite asterio.space auf seinem Handy, und schon kann es losgehen. Man scribbelt sich ein kleines Raumschiff zurecht (oder eine schießende Suppentasse, oder einen Weihnachtsbaum, oder oder oder…), wählt eine Farbe und kann loslegen. Die Steuerung ist extra einfach gehalten: Auf der linken Hälfte des Displays beschleunigt man, auf der rechten Hälfte gibt man einen Schuss ab. Das Drehen des Smartphones rotiert das Schiff im Spiel.
Technik
Die Hauptkomponenten des Spiels sind nodejs, socket.io und paperjs. Via node läuft der Server, der das Spiel hostet und den Clienten mit Informationen und Resourcen versorgt. Socket.io ermöglicht einen performanten Informationsaustausch zwischen Server und verbundenen Clienten in Echtzeit (Bewegungen, Schießen, Scoreboard etc.), und mit paperjs werden die dynamischen Schiffe und Schüsse im Browser erstellt und gerendert. Auf dem Handy sorgt die GyroNorm Bibliothek von Doruk Eker für einen universalen Zugriff auf das Gyrometer des Smartphones.
Der animierte Sternenhintergrund ist übrigens mit einem statischen Bild und ein wenig CSS Magie gemacht. :-)
Rückmeldungen
Das ganze wurde am Rundgang der Hochschule für Bildende Künste Saar am Publikum getestet, und das Interesse der Besucher war durchaus geweckt. Die ungewöhnliche Steuerung war am Anfang gewöhnungsbedürftig, löste jedoch vor allem bei kleinen Besuchern Begeisterung aus. Die niedrige Einstiegsschwelle hat hier ebenfalls geholfen: Einfach die URL eingeben, und schon kann es losgehen. Man ist über das Internet mit dem Bildschirm direkt vor einem verbunden, wenn man sein Handy dreht, dreht sich auch das Schiff auf dem Bildschirm, quasi latenzfrei.
Kleinere technische Probleme gab es bei älteren Geräten, wo die Erkennung des Gyrosensors (Drehen des Smarthones) nur mit Verzögerungen und Rucklern funktionierten. Auch kam es bei vielen Spielern (>8) zu Rucklern auf Seite des Servers. Hier müsste mit stärkerer Hardware oder besserer Lastverteilung nachbessert werden. Dem Testlauf und Spielspaß tat das jedoch keinen Abbruch.
Fazit
Für mich ist aster.io ein gelungenes Experiment, in dem ich mich mit paperjs und socket.io auseinandergesetzt habe, um ein Spiel zu bauen, das man nicht nur am PC, sondern auch übers Smartphone steuern kann.
Ich finde das Potential hier sehr interessant, denn was hier im kleinen Rahmen (Monitor in einer Hochschule) gebaut wurde, kann ohne Probleme skaliert werden: So könnten Displays in der Stadt, an einer Wand, in einer U-Bahn-Station ein Spiel dieser Art laufen lassen, und Passanten oder wartende Passagiere können einfach mit ihrem Smartphone mitspielen. Meiner Meinung nach eine schöne Art, miteinander spielerisch in Kontakt zu kommen.
GitHub des Projektes: https://github.com/fmgrafikdesign/aster.io