Teleportal

Aufgabenstellung:

Aufgabe war es eine Interaktive Murmelbahn mit einem einzigen funktionalen Knopf zu gestalten und zu programmieren. Benutzt haben wir dafür das Programm Figma, sowie den Atom editor inklusive einer p5.js und matter.js library um die ausgestaltete Bahn in Code umzusetzen.

Moodboard:

Zu Beginn suchten wir wir uns Referenzfotos um ein Theme für unsere Strecke zu finden.
Nachdem wir uns eine Weile mit einer Retro/Neon Optik, welche ein wenig an Tron erinnern sollte, auseinander gesetzt haben, fanden wir unser endgültiges Motto in einer Mars ähnlichen Gestein-Landschaft eines außerirdischen Planeten.

Prozess:

Daraufhin erarbeiteten wir unsere Murmel, um welche wir später unsere Welt gestalten würden. Das Ergebnis war eine Art Meteor mit blauen Rissen, welche Edelsteine andeuten sollten.

Nachdem wir unsere Murmel fertig hatten, kümmerten wir uns um den groben Ablauf unserer Bahn. Hierfür zeichnete jedes Mitglied unserer Gruppe für sich seine Ideen auf ein Blatt Papier. Gemeinsam sortierten wir die besten Ansätze aus und schweißten sie zu einer kompletten Strecke zusammen.

Im Anschluss hierzu überlegten wir uns mögliche Hindernisse und Power-Ups, welche zu unserer Bahn passen könnten, auch diese wurden abermals aussortiert, eingesetzt und die Bahn auf diese angepasst.

Jetzt hatten wir alles anskizziert und ausgeplant und konnten damit anfangen unserer Bahn Leben einzuhauchen. Simultan kümmerten wir uns um Gestaltung und Umsetzen in Code. Zuerst kam die Bahn selber und erste Gefahrenquellen, in Form von blauen Kristallen und einer ebenfalls blauen “Kristallflüssigkeit”.

Danach waren Power-Ups an der Reihe, bei welchen wir uns letzten Endes für Portale und Speed-Ups entschieden haben, diese bekamen eine lilane Optik, um sie thematisch zugehörig wirken zu lassen.

Im Anschluss setzten wir ein ebenfalls in lila leuchtendes Ufo an den Start der Bahn und einen abschließenden Sprung in ein großes Portal an das Ende.

Schließlich mussten wir nur noch unseren Hintergrund mit anderen fiktiven Planeten und Sternen füllen, um ihn lebendiger wirken zu lassen.

Endergebnis:

Unser Endergebnis war eine Murmelbahn, welche klar in 2 Ebenen aufteilbar war: die Oberfläche und der Untergrund. Dabei war uns wichtig, dass beide dieser Ebenen distinktiv unterschiedlich wirkten.

Während die Oberfläche frei und hell wirken sollte, war der Untergrund so gestaltet, dass er hauptsächlich aus engen, dunklen Tunneln mit zwei durch Kristalle ausgeleuchteten Höhlen bestand. Auch das Gameplay sollte sich dementsprechend anpassen. Auf der Oberfläche wird dem Spieler durch Portale und Sprünge ohne Gefahr das Gefühl von Freiheit suggestiert.

Im Untergrund muss darauf geachten werden, keine Gefahrenquellen zu treffen während man in alle Himmelsrichtungen von Wänden eingegrenzt ist.

Vor dem letzten Sprung ins Freie wird der Spieler dann noch einmal durch eine Glaskuppel an der Oberfläche geführt, um einen kleinen Szenerie-Wechsel sowie Überraschungsmoment zu bewirken.

Den ganzen Ablauf unserer Bahn könnt ihr euch in diesem Video anschauen: