Das verrückte Labyrinth
Der Brettspiel-Klassiker als spielbares 3D-Spiel im Browser: mit modelliertem Spielbrett, verschiebbaren Gängen und Spielfiguren. Im Dreierteam im Modul Interaktion mit Figma, Blender und Three.js umgesetzt – ein Studienprojekt, nicht mit Ravensburger verbunden.
Herausforderung
Im Modul Interaktion stand die Aufgabe, ein analoges Brettspiel in den Browser zu holen. Wir haben uns zu dritt für Das verrückte Labyrinth entschieden – gerade weil sein Kern so körperlich ist: Man schiebt eine Gangkarte ins Brett, eine ganze Reihe verrutscht, und das Labyrinth sieht danach komplett anders aus.
Genau das machte die Umsetzung anspruchsvoll. Das haptische Schieben musste sich auf dem Bildschirm genauso selbstverständlich anfühlen wie am Tisch, und das sich ständig verändernde Brett musste in 3D jederzeit lesbar bleiben – sonst geht der Spielspaß verloren, bevor er entsteht.
Prozess
Konzept, Spielablauf und Oberfläche haben wir zuerst in Figma entwickelt. Die 3D-Modelle – das Spielbrett, die einzelnen Gangkarten und die Spielfiguren – entstanden anschließend in Blender.
In Three.js haben wir daraus die Szene im Browser zusammengesetzt und die Spiellogik umgesetzt: den Schiebe-Mechanismus, der eine Reihe des Labyrinths verschiebt, und das Ziehen der Spielfiguren durch die neu entstandenen Gänge. Animationen machen dabei jede Bewegung nachvollziehbar, sodass man sieht, was auf dem Brett passiert.
Lösung
Entstanden ist ein vollständiges 3D-Spielbrett im Browser: mit allen Gangkarten, dem Schiebe-Mechanismus und den Spielfiguren. Das Brett verhält sich wie das echte Spiel – eine Karte einschieben, das Labyrinth verändert sich, die Figur sucht sich ihren Weg durch die neuen Gänge.
Durch die eigenen Modelle aus Blender hat das Spiel einen durchgängigen, eigenständigen Look, statt nach einem technischen Prototyp auszusehen. Und weil alles direkt im Browser läuft, kann man ohne Installation sofort losspielen.
Ergebnis
Am Ende stand ein spielbares Brettspiel in 3D, das im Browser läuft und tatsächlich Spaß macht. Aus einer Aufgabe im Modul ist ein Spiel geworden, das man gerne mehr als einmal spielt.
Für mich war es der komplette Weg einer 3D-Anwendung fürs Web – vom Entwurf in Figma über die Modelle in Blender bis zur Umsetzung in Three.js. Und es hat gezeigt, wie viel Interaktionsdesign in etwas so Simplem wie dem Verschieben einer Karte steckt.
Nächstes Projekt
mono / poly