Pistenrowdy - One Button Murmelbahn

Aufgabenstellung

Unsere Aufgabe war es, eine interaktive Murmelbahn zu programmieren, welche von einem Nutzer mit nur einer Taste bedienbar ist. Für das Programmieren selbst nutzen wir die erlernten Sprachen HTML und Javascript. Dazu kombinierten wir Libraries, wie zum Beispiel matter.js (zweidimensionale Physiksimulation im Browser) oder auch p5.js (native JavaScript-Bibliothek für kreatives Coding).

Erste Ideen

Zu Beginn des Projektes beschäftigten wir uns zunächst mit möglichen Szenarien und Themen für unser Spiel. Diese sammelten wir alle auf Miro. Dazu erstellten wir Moodboards, um unsere Gedanken festzuhalten und zu visualisieren. Jedes Teammitglied bekam die Aufgabe einen groben Entwurf einer Murmelbahn, nach seinen Vorstellungen zu erstellen. Es gab nur zwei Regeln: Die Levels der Murmelbahn sollten horizontal verlaufen und die One-Button-Action sollte ein Sprung sein.

Prozess

Erste Scribbles
Wir scribbelten unterschiedliche Siuationen, die die Murmel durchläuft und überlegten, wie wir diese miteinander verbinden könnten. Die stetige Sehnsucht nach Sonne, Schnee und Bergen machte uns die Entscheidung leicht, eine Skipiste als Handlungsort zu gestalten. Das Ziel war es eine einheitliche Bahn mit sinnvollen und spannenden Elementen miteinander zu verbinden. Im Laufe des Projektes änderten wir mehrmals das Aussehen der Murmelbahn. Dadurch entstanden Schanzen, Tiefschnee, nervige Hubbelpisten, sowie Tannenbäume und Steine als Hindernisse.

Die Murmel
Das Steuerelement in unserer Murmelbahn ist ein Schneemann, bestehend aus einer unteren dickeren Kugel und dem Kopf. Im Laufe des Spiels bewegt sich nur der untere Teil. Sein roter Schal flattert dabei im Fahrtwind und der Schutz der Augen wird natürlich auch durch eine modische, mit UV-Schutz versehene Skibrille garantiert. Unsere Murmel wird wird von der Leertaste gesteuert. Beim Betätigen dieser, springt der Schneemann über die Hindernisse.

Der Hintergrund
Um ein einfaches und übersichtliches Design zu erhalten, entschieden wir uns für einen schlichten Hintergrund, in Form einer Berglandschaft, die mit der Silhouette eines Sesselliftes versehen ist. Dadurch kommt die schneeweiße Piste sehr gut zur Geltung.

Die Elemente

Coding

Nach dem festgelegten Murmelbahnverlauf erstellten wir eine Liste mit interaktiven Elementen, die wir auch in der finalen Version der Murmelbahn verwenden. Diese begannen wir einzeln zu programmieren, wie z.B. die Schneeflocken, die Tür der Alm, den Skilift oder den Schneemann. Im Endprozess fügten wir die Elemente als SVG Pfad ein und passen die Strecke optisch an.

Ergebnis

Zum Schluss entstand ein unterhaltsames Jump ‘n’ Run Spiel, welches der Schneemann ohne Kollisionen und Zwischenfälle übersteht und somit mit einem coolen Abschluss in der Apres-Ski-Alm hat. :)