Incom ist die Kommunikations-Plattform der Technische Hochschule Augsburg Gestaltung

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Vacation Surfer - durch 201*8(bit) in den Urlaub

Vacation Surfer - durch 201*8(bit) in den Urlaub

Verarbeitung von Wetterdaten in Form des 8bit-Spiels „Vacation Surfer“.

Vacation Surfer

„Vacation Surfer“ ist ein durch ein physisches Lenkrad gesteuertes Rennspiel im 8bit-Pixel-Stil, bei dem man sich auf dem Weg durch das Jahr 2018 befindet.
Man sammelt über das Jahr ☼ Sonnenstunden ein, die einem, wenn man mal etwas zu viel Stress hatte und einem das Leben einen Stein in den Weg gelegt hat, einen Urlaub verschrieben bekommt.

Auf dem Weg begegnet somit verschiedenen Hindernissen wie Steinen, Pfützen und Kühen, und den ☼ Sonnen zum einsammeln. Die Grösse von Pfützen und Sonnen ist dabei von Wetterdaten (durchschnittl. Sonnenstunden und Regenmenge pro Tag in Augsburg 2018) abhängig.

Auf dem Weg durch das Jahr verändert sich die Umgebung je nach Jahreszeit im aktuellen Monat. Sichtbar durch verschiedene Umgebungssituationen.

Begleitet wird das Spiel von typischer 8bit-Musik.

Behind the Scenes

Unbenannt-3-2.jpgUnbenannt-3-2.jpg
Unbenannt-2-2.jpgUnbenannt-2-2.jpg

Das Video und die Bilder für die Inszenierung wurde im heimischen Büro/Wohnzimmer aufgenommen, genau dort, wo man das Spiel auch spielen würde.

Das Lenkrad wurde mit einer kleinen Konstruktion aus ebenfalls Karton auf den Sockel gesetzt, damit der Abstand dazu groß genug ist, um das Lenkrad zu bewegen.

Aufgebaut auf einem kleinen Schreibtisch vor einem Bildschirm, kann man nun das Lenkrad immer in die Richtung drehen, in die man das Auto lenken möchte.

Mithilfe von Studioleuchten und einem weißen Bettlaken wurde ein kleines Photostudio gezaubert.

Aufbau:

ycxy.jpgycxy.jpg
IMG_4249.JPGIMG_4249.JPG
5E81DC65-584B-4E29-9A7D-9A0BE3E46553.jpeg5E81DC65-584B-4E29-9A7D-9A0BE3E46553.jpeg
B0137EFD-3850-46F2-9CFC-5C52C8FF5794.jpegB0137EFD-3850-46F2-9CFC-5C52C8FF5794.jpeg

》Detailansicht Graphiken

Mithilfe von Pixelrastern und Fotoreferenzen wurde sämtliche Graphik in Adobe Illustrator erstellt. 

Man wird zunächst von einem die Steuerung erklärenden Screen begrüsst, in dessen Hintergrund bereits der Beginn des Spiels zu sehen ist.

Es wird vom Winter in den grünen Frühling gefahren, in dem die Büsche am Strassenrand Blüten tragen. Diese verschwinden im dunkelgrüneren Sommer, der schliesslich dem rötlichen Herbst weicht. Die dreispurige Strasse bleibt gleich, Kühe treten in unterschiedlichen Fleckungen neben den weiteren Vorkommnissen Steinen, Pfützen und Sonnen auf. 

Erreicht man das Ende des Jahres, wird man von einem animierten Feuerwerk begrüsst. Danach, oder wenn man alle Lebensherzen durch Kollision verloren hat, erreicht man seinen vom Spielverlauf (siehe Detailansicht Code) abhängigen Urlaub. 

Es stehen Strand-, Ski-, Städte- oder Welnessurlaub zur Verfügung.

Präsentation.jpgPräsentation.jpg
start4.0.pngstart4.0.png
Kühe2.jpgKühe2.jpg
Feuerwerk2.gifFeuerwerk2.gif
HintergründeZeichenfläche 1.pngHintergründeZeichenfläche 1.png
zwischenscreen2.0.pngzwischenscreen2.0.png

Für weitere Details zur Graphik siehe Eva Kunzmann.

》Detailansicht Code

Für den Code wurde p5js verwendet, eine grafik- und interaktionsfreundliche Variante von JavaScript bzw. Processing, die sich ausserdem gut mit Arduino, dem Träger des physischen Teils von „Vacation Surfer“, über p5js.serialcontrol verbinden lässt.

2020-06-28 11_52_29-Greenshot.png2020-06-28 11_52_29-Greenshot.png
2020-06-29 13_25_47-Greenshot.png2020-06-29 13_25_47-Greenshot.png

Genutzte p5js Libraries:

  • p5js.serialport
  • p5js.sound.min
  • serial

Bewegung & Animation:

Die Strasse, die sich um die Illusion von Bewegung zu schaffen nach unten bewegt, hat drei Spuren, zwischen denen man mithilfe des Lenkrads springen kann. Auf jeder der Spuren „spawnen“ regelmässig an zufälliger Position Hindernisse bzw. einzusammelnde Sonnen. Für den Spieler nicht direkt ersichtlich bewegt man sich auf der Strasse über einen Zeitstrahl des Jahres 2018.

Wetterdaten:

Die Skalierung der Sonnen und Pfützen verändert sich dabei je nach Zeitpunkt an dem man sich befindet in Verbindung zur Anzahl der Sonnenstunden bzw. der Niederschlagsmenge am jeweiligen Tag.

Kollision:

Kollidiert man mit einem Hindernis, verschwindet dies und man bekommt ein ganzes (bei einem Stein oder einer Kuh) oder ein halbes Leben (bei einer Pfütze) abgezogen.

Ende:

Sobald man das Ende des Jahres erreicht, erscheint eine Feuerwerksanimation und es wird (auch wenn man bspw. durch zu häufige Kollision verliert) ein Urlaubsbild generiert, das von der Anzahl der gesammelten Sonnen abhängt. Diese Punktzahl ist für den Spieler auch durch den Scorecounter ersichtlich.
Grössere Sonnen geben mehr Punkte als kleinere. Schafft man es z.B. nur wenige Sonnenstunden zu sammeln, bekommt man zum Ausgleich einen Strandurlaub, der gegenteilige Fall ist ein Städtetrip, die weiteren Urlaube reihen sich dazwischen ein.

Sound:

  • während der wilden Fahrt durch 2018 hört man auch im Hintergrund passende 8 Bit Musik

  • man hört einen Hup-Sound wenn man den Knopf drückt und bei jeder neuen Kuh die ins Bild läuft hört man ein „Muuuh“

  • beim Einsammeln ertönt ein leichter „bling“-Sound als kurzes Feedback

Für weitere Details zum Code siehe Anja Krendlinger.

》Detailansicht physisches System

Zur Steuerung von „Vacation Surfer“ wird ein Lenkrad verwendet, das mithilfe von Arduino-Komponenten die Navigation durch das Spiel ermöglicht.

Ein Drehsensor ermöglicht das Springen zwischen den Straßenspuren, ein Button auf der Rückseite der Greiffläche des Lenkrads dient dem Klicken durch Screens bzw. das Hauptmenü. Während dem Fahren kann man mit dem Button außerdem Hupen.

Das Lenkrad ist abnehm- und in seinem Fuß verstaubar; im Fuß befindet sich außerdem das Arduino-Motherboard, durch ein kleines Kabelloch mit den Komponenten verbunden.

detail9.jpgdetail9.jpg
detail7.jpgdetail7.jpg
detail2.jpgdetail2.jpg

Für weitere Details zum physischen System siehe Suzan Imhoff.

Fachgruppe

Interaktive Medien

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Andreas Muxel

Zugehöriger Workspace

IA Grundlagen Interaktiver Gestaltung (Gruppe B)

Entstehungszeitraum

Sommersemester 2020

zusätzliches Material