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

Krendlinger_Anja (Block III - Interaktive Gestaltung)

Krendlinger_Anja (Block III - Interaktive Gestaltung)

Interaktionsmöglichkeiten mit Arduino und Grove-Kit

Erste Ideen:

20200519_131045.jpg20200519_131045.jpg
20200519_131042.jpg20200519_131042.jpg

Licht-Sensor (Make it brigth!)

20200524_134111.jpg20200524_134111.jpg
20200524_134116.jpg20200524_134116.jpg

Mithilfe des Servos vom Grove-Kit wird ein Deckel auf den kleinen Würfel in dem sich ein Licht-Sensor befindet gedreht.

Je dunkler es in dem kleinen Würfel nun wird, desdo heller wird die Diode auf der anderen Seite.
Den Servo steuert man mithilfe des Dreh-Reglers des Grove-Kit.

Tabletten-Ausgabe

20200524_151126.jpg20200524_151126.jpg
20200524_151117.jpg20200524_151117.jpg

Mithilfe eines Servos wird bei Knopfdruck auf dem Taster-Element eine Zwischenwand in einem Zylinder bewegt und die sich darin befindenden Tabletten zu einer Öffnung geschoben.
Dort fallen dann die Tabletten über eine kleine Rutsche nach draußen.

Also Tabletten auf Knopfdruck!

Team-Projekt

Im Folgenden wird die Team-Arbeit aus dem Projekt mit Eva Kunzmann und Suzan Imhoff dokumentiert.
Ideen werden gesammelt und dann ein Projekt mit Arduino UNO ausgearbeitet.

Die Kommunikation fand über Miro statt.

Entwürfe

Idee 1

Der Selfmade-Day

Ein kleiner Kasten mit vier möglichen „interaktions“-Feldern.

Zum einen ein Temperaturmesser, dann ein Lichtsensor und ein Lautstärkemesser. Jeweils mit passenden Symbolen grafisch dargestellt und erklärt.

Je nach dem welches dieser Felder man bedient bzw verändert wird ein Tag auf dem LCD-Bildschirm ausgegeben der ähnliche Werte hat.

Man könnte mit dem Knopf-Element einstellen, welchen der drei Sensoren man benutzen möchte.

Unbenannt.pngUnbenannt.png

Idee 2

Ein Retro 8Bit-Rennspiel

Die Überlegung war, ein kleines Spiel zu erschaffen, angelehnt an ein Jump n' Run/Rennspiel.

Der Player (Auto) fährt über eine 3 spurige Straße und muss Sonnenlicht einsammeln während er Hindernissen ausweicht.
Das Auto soll mithilfe des Rotary Angle Sensor des GroveKit zwischen den 3 Spuren hin und her gesteuert werden.

Überlegt wurde auch, das man zwischen durch über Steine springen muss, Kühe anhupen, damit sie sich wegbewegen, und Zäunen ausweichen muss. Am Ende, je nach dem wie viele Sonnen-Punkte man gesammelt hat, kommt man an unterschiedlichen „Urlaubszielen“ an.

Als-die-Spiele-laufen-lernten-Rennspiele-Spy-Hunter-360x360-b3d4a7c92916463a.jpgAls-die-Spiele-laufen-lernten-Rennspiele-Spy-Hunter-360x360-b3d4a7c92916463a.jpg

Umsetzung

Idee 2

Nach Absprache und Ideensammlung wurde sich im Team für Idee 2 entschieden und die Aufgabenbereiche wie folgt festgelegt:

  • Digitale Grafik: Eva Kunzmann

  • Physisches System: Suzan Imhoff

  • Coding: Anja Krendlinger

Zuerst wurde der Basis-Code geschrieben.
Simples bewegen des Autos und der Einsammelobjekte mit Platzhaltern durch das nutzen von Pfeiltasten.

Als erstes wurde das Spiel also so entwickelt, das man es mit den Tasten an der Computer-Tastatur steuern kann.

Erster Test ohne die Nutzung von Arduino UNO & Grove Kit:

Neben dem Basis-Code wurde, von Suzan Imhoff, ein Prototyp von einem Lenkrad gebastelt, dass das physische System darstellen soll, und von Eva Kunzmann ein erster Entwurf des Haupthintergrundes erstellt.

2020-06-10 21_23_33-Window.png2020-06-10 21_23_33-Window.png

Die Platzhalter für einzelne Bilder werden langsam ersetzt mit eigens erstellten Grafiken von Eva Kunzmann.
Die Wetterdaten wurden implementiert und geplant ist diese zu nutzen um, anstelle der aktuellen Münzen, Sonnen erscheinen zu lassen, die je nach Daten-Wert der Sonnenstunden größer oder kleiner sind und dementsprechend mehr oder weniger Punkte geben.

2020-06-13 15_38_05-Greenshot.png2020-06-13 15_38_05-Greenshot.png
auto.pngauto.png
hintergrundbild1.jpghintergrundbild1.jpg
busch2.pngbusch2.png

Weitere Details werden hinzugefügt:

Der Hintergrund wurde mithilfe einer Funktion mit einer Schleife immer wieder oben angefügt, damit es aussieht als würde man auch wirklich fahren, obwohl sich der Player (Auto-Grafik) an sich nicht bewegt.

  • Die Leben werden mit Herzen statisch unter der Punkteanzahl (Score) angezeigt.

  • Münzen-Platzhalter werden durch die Sonnen-Grafik ersetzt.

  • Es wurde ein Startbildschirm eingefügt, der kurz die Mechaniken erklärt und eine blinken() Funktion eingefügt, die einzelne Texte blinken lässt.

  • Hindernisse wie Kühe und Steine wurden eingefügt und von oben nach unten über den Bildschirm verschoben.

Kleine Probleme gab es noch bei der Spawnrate der Hindernisse, da einige an der selben Stelle auftauchten oder zu viele zu sehen waren.

Ein Startbild wurde erstellt und erklärt kurz die Mechaniken des Spiels.

Erster Entwurf:

Start.pngStart.png

  • Zu den Hindernissen kamen noch Pfützen, die an die Niederschlagsmenge des Datensatzes angepasst sind. Je höher die Niederschagsmenge, desdo dunkler die Pfütze

  • Halbe Leben wurden dafür eingefügt, da bei den Pfützen im realen Leben nicht viel passieren würde, wenn man darüber fährt

  • Verschiedene Jahreszeiten wurden eingefügt

  • Das Datum des aktuellen Tages wird nun unten rechts in der Ecke angezeigt. Dadurch ist sichtbar, dass man durch das Jahr 2018 fährt

  • Es wurde ein Zwischenscreen eingebaut, wenn man verloren hat. Dieser führt bei erneutem Knopfdruck zum Urlaubs-Ende

  • Die ersten Urlaubs-Enden wurden eingefügt

  • Der Anfangsscreen wurde überarbeitet

Probleme:
Manchmal spawnen Hindernisse und Sonnen übereinander.
Dies muss noch gelöst werden.

fahren2.pngfahren2.png
start3.0.pngstart3.0.png
zwischenscreen.pngzwischenscreen.png

Update:

  • Die Details wurden weiter ausgebaut

  • Töne wurden eingefügt. Ein Hupen wenn man auf den Knopf drückt, ein Muhen von den Kühen wenn sie im Bild erscheinen und eine Hintergrund-Musik.

  • Der Zwischenscreen hat sich noch verändert. Nun wird der Hintergrund der aktuellen Jahreszeit verwenden

  • Die Tage laufen pro Sekunde weiter, nicht mehr nur wenn die Sonne neu auftaucht.

  • Der Endscreen wurde eingefügt und so eingestellt, das nachdem das Jahr 2018 durchfahren wurde, das Auto erst nach oben fährt bis es aus dem Screen verschwinden, danach taucht dann von oben die Silvester-Nacht auf.

  • Die Interaktion mit der X-Taste wurde zuguterletzt durch dem Grove-Kit Knopf ersetzt.

Schwierigkeiten - Lösungen:

Das übereinander Spawnen wurde gelöst mithilfe einer Y-Koordinate der Sonne. Man vergleicht die X-Koordinate der Sonne mit der X-Koordinate des neu gespawnten Objekts und wenn diese gleich sind, wird das neue Objekt auf einer andere gespawnt. Außer die Y-Koordinate ist über dem 0 Punkt. (also schon sichtbar im Spielfeld)

Auch tauchten Schwierigkeiten auf, die einzelnen Stadien des Spiels mit dem Knopf steuerbar zu machen. Es musste einiges verschachtel werden, aber mithilfe von Boolischen Werten konnte dort gut unterschieden werden.

Nun gibt es
- „Spielstart“
- „Gewonnen“
- „Zwischenscreen“

die je nach Zustand im Game auf true oder false gesetzt werden.

zwischenscreen2.0.pngzwischenscreen2.0.png
start4.0.pngstart4.0.png
2020-06-27_131323.jpg2020-06-27_131323.jpg

Zum Schluss wurden noch Sounds eingefügt.

Die dafür notwendige Librarie von p5js ist: p5js.sound.min

  • nun spielt im Hintergrund während des Spielens eine 8 Bit Melodie

  • man hört beim Knopf-Druck einen Hup-Sound

  • beim einsammeln von Sonnen hört man ein kurzes „bling“ für das akustische Feedback

  • Jedesmal wenn eine Kuh auftaucht, macht sie das typische „muuh“

Fertiges Spiel - Vacation Surfer Trailer

Das physische System wurde am Ende mit dem Arduino verbunden und schon kann es los gehen!

Der fertige Spiel-Trailer wurde hochgeladen und das Spiel ist nun voll funktionsfähig und macht Spaß!
Die Dokumentation für das Ergebnis finden sie HIER!

Trailer:

Ein Projekt von

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