Thematik

Unsere Murmelbahn soll den Spieler durch eine kleine Wüstenwelt in eine geheime Pyramide führen. Dort darf der Spieler über Hindernisse bis zum Ende der Welt hüpfen. Was verbirgt sich wohl hinter der Fassade?

task

Die Aufgabe des Projektes “Murmelbahn” besteht darin, ein interaktives Spiel zu gestalten und zu programmieren. Die Programmierung erfolgt mithilfe einer Kombination der JavaScript Libraries Matter.js und p5.js. Dabei ist JavaScript die Programmiersprache und Matter.js simuliert die Physik der Murmel. Das Spiel wird mit nur einer Taste gemeistert. Diese weist der Murmel während des interaktiven Spiels eine neue Eigenschaft zu.

inspiration

Zu Beginn des Projektes machten wir uns daran Inspirationen zu sammeln. Dabei haben wir uns von vorhandenen Murmelbahnen inspirieren lassen. Während unserer Recherche sind wir auf den Künstler Hiroshi Nagai gestoßen. Seine Bilder sind in gedeckten Farben gehalten und waren die Grundlage der Farbgebung. Zusätzlich ließ uns das Spiel Super Mario: das Land der Wüste, neue Perspektiven entdecken.

Dabei haben sich folgende Kriterien an unsere Murmelbahn kristallisiert:
wir wollten eine einfach gestaltete Kulisse erschaffen, welche ein Themengebiet repräsentiert.

brainstorming

Wir skizzierten und bauten einzelne, mögliche Bestandteile unserer Murmelbahn, welche wir später in unsere Kulisse einbauen wollten.

1. Der 3 Sekunden Balken:
   Der Ball fällt auf den Balken und kann dort drei Sekunden verweilen bevor sich der Balken auflöst.

2. cut the rope:
   Der Ball schwingt an einem Seil, dieses wird mit einer beliebigen Taste durchgeschnitten, sodass der Ball fällt.

3. Das Portal:
   Der Ball kommt an Portal Grau an, verschwindet bei Berührung und rollt aus Portal Grün als grüner Ball weiter.

4. jump and roll:
   Der Ball springt von Balken zu Balken mit Hilfe der Pfeiltasten und rollt auf der rechten Seite weiter.

   

   drafts

   Nachdem wir ein paar Ideen für die Bauteile der Murmelbahn gesammelt hatten, beschäftigten wir uns mit dem visuellen Teil: der Kulisse. Zuerst gestalteten wir Hintergründe, welche uns farblich ansprachen und dementsprechend dann die Kulisse.
   Wir dachten an magenta-farbige Berge, oder an einen Sonnenuntergang.
   Den Sonnenuntergangs-Gedanken gingen wir nach und ließen unserer Kreativität freien Lauf. So entstand erst eine Berglandschaft und anschließend kombinierten wir ein paar Häuser dazu.
   Da uns die Gestaltung der Kulisse etwas fade vorkam, beschlossen wir einen geheimen Berg einzubauen, um der Murmelbahn etwas Spannung zu verleihen.

   

Um mehr Auswahl der Kulissen zu bekommen, beschlossen wir eine komplett andere Vegetation zu gestalten.
So kamen wir darauf einen sonnigen Tag in der Wüste zu gestalten.
Der finale Entwurf baute schlussendlich auf Super Mario: das Land der Wüste auf.
Zunächst erstellten wir Pyramiden aus einfachen Dreiecken und eine Sonne aus einem Kreis.
Dann beschlossen wir Details einzubauen: Palmen, Kamele, Pyramiden, Kakteen & Tümpel

the final

Nach Absprache unseres Dozenten, gestalteten wir unsere Murmelbahn erneut um: wir minimalisierten das Design, indem wir Details ausließen und alles zweidimensional aufzogen. Der Tümpel, welcher den Ball in die Unterwelt verschlucken sollte, ersetzten wir durch einen Brunnen, welcher einen Sensor besitzt, der dafür sorgt das die Fassade ausgeblendet wird und das Pyramideninnere sichtbar macht.

flow

Zu Beginn des Levels fällt der Ball aus der rechten, oberen Ecke des Levels. Dieser hüpft danach über die Kakteen direkt in den Brunnen. Der verdeckte Teil des Levels wird nun sichtbar. Der Ball fällt auf eine Brücke, welche diesen abfedert. Der Text „Press Space“ impliziert die Funktion der Space-Taste, die der Spieler letztendlich in Erfahrung bringt. Schnell wird klar, dass der Ball springen kann. Der Spieler wird dann über die Treppe geführt. Eine gewisse Schwierigkeit wird mit einem Propeller, der den Spieler zurückwerfen kann, installiert. Die „Stacks“ werden gebrochen, welches einen Überraschungseffekt darstellt. Sobald der Spieler über die Treppe gekommen ist, steht der zweite Teil des Levels an. Dieser besteht aus einem „Flappy-Bird“-artigem Levelaufbau, bei dem der Spieler den Ball durch die Hindernisse manövrieren muss. Letztendlich kommt der Spieler zum letzten Element des Levels, dem Katapult. Der Spieler erkennt nach Lesen des Textes „small yellow ball wins“, dass er mit dem gelben, kleinen Ball das Level gewinnen wird. Der Spieler stößt den großen, schweren Ball an, der sich dort in der Luft befindet. Dies wird abermals mit einem Text impliziert.
Das Resultat: der kleine, gelbe Ball wird hochkatapultiert. Dieser fällt auf direktem Wege in die „Coins“ und schließlich in den Brunnen, welcher das Ende des Levels darstellt.
Das Level ist nun geschafft.

Link zur Doku