Für das Projekt im Fach Interaction Design sollte ein interaktives, abstraktes Exponat erstellt werden. Hierbei entschieden wir uns für ein simples Arcade-Spiel, welches visuell abstrahiert wurde und den Stil der 80er Jahre aufgreift. Besonders ist, dass die Steuerung durch ein Ganzkörper-Tracking erfolgt.

Moodboard

Bei Arcade-Spielen handelt es sich um simple 
Videospiele an Automaten, die seit den 1970er Jahren in Spielhallen kostenpflichtig angeboten werden. Unser Spieldesign orientiert sich dabei an dem Stil der 70er bis 90er Jahre. Dies ist an der Farbauswahl, der Abstraktion, sprich den einfachen geometrischen Formen, und den eingebauten Soundeffekten erkennbar.

Ebenso wird durch die Neonfarben ein Galaxy-Look erzeugt. Für den Hintergrund des Spiels war die Idee einen Tunnel mit 3D-Effekt zu erstellen.

Anfangszustand

Zu Beginn des Projektes hatten wir lediglich Grundkenntnisse im Bereich Programmierung mit JavaScript. Daher haben wir zunächst einen Prototypen des Spiels entwickelt, bei dem sich ein Quadrat mithilfe der Pfeiltasten vor einem Hintergrundbild bewegen und mit anderen Objekten kollidieren konnte.


Dabei war die frei verfügbare Code Library P5.js sehr hilfreich, die das Programmieren vereinfacht und intuitiver macht.

Endzustand

Nach der Erstellung des Prototypen haben wir einen animierten Hintergrund nach einer Open Source Vorlage aus dem Internet integriert.
Um die Steuerung interessanter zu gestalten, haben wir die Tracking Funktion von PoseNet genutzt. So kann die Spielfigur durch verschiedene Arm-Positionen bewegt werden.

Eine Timer-Funktion mit einem ablaufenden Zeitbalken ermöglichen dem Spieler eine Challenge. Läuft die Zeit ab, verliert man und kommt zurück zum Startscreen. Das kann durch das Einsammeln der Sammelobjekte hinausgezögert werden.

Zum Schluss folgte das Finetuning, bei dem wir unter anderem die Farben des Hintergrunds und aller Objekte angepasst haben. Außerdem wechselt die Spielfigur nun fluide seine Form.
Soundeffekte geben dem Spieler direktes Feedback (z.B. beim Berühren der Sammelobjekte) und machen dadurch das Spielgeschehen intuitiver.

Ganzkörper-Tracking

Das Tracking erfolgt durch eine Webcam auf einem Stativ, das ca. 4 Meter entfernt zu der trackenden Person steht. Dadurch erkennt die Kamera den gesamten Körper. Die Trackingmethode trackt vier unterschiedliche Posen, bei denen die Person die Arme nach oben, unten, links oder rechts bewegt. Hierbei werden Ankerpunkte getrackt, die entweder ober- oder unterhalb der Schulter liegen. Je nachdem bewegt sich der Spieler durch die Spielfläche. Da die Kamera einen Weitwinkel hat und dadurch auch Personen trackt, die in die Nähe des Spielers kommen, klebten wir die Kamera von den Seiten ab. Durch den schmalen Spalt in der Mitte der Linse wird gezielt eine Person getrackt.

Beschreibung des Bildes.

Ausstellung

Die Projekte werden in einer Ausstellung im Rahmen von “Stürmt die Burg” auf der Wilhelmsburg in Ulm ausgestellt. Hierbei hat jede Gruppe eine Niesche für ihren Projektaufbau.

Aufbau und Equipment

Für den Aufbau platzierten wir an der hinteren Wand ein Regal, auf das wir den Beamer stellten und die Kabel verstauten. Der Beamer projiziert das Spiel auf die große Wand gegenüber.
Damit der Spieler die Bewegungsposen gut sieht sind diese direkt unterhalb der Projektionsfläche abgebildet.
Die Webcam befindet sich direkt hinter den Bewegungsposen, wo auch der Laptop platziert wurde.

Spielprinzip

Aufgabe des Spielers ist es, Objekte mit der
eignen Spielfigur einzusammeln. Die Sammel-
objekte bewegen sich dabei über die gesamte Spielfläche hinweg und werden im Verlauf des Spiels schneller. Das Spiel ist zeitlich durch einen Timer begrenzt. Sobald Objekte berührt werden, gewinnt der Spieler an Zeit. Ist der Timer abgelaufen, endet das Spiel.

Spielanleitung

Um das Spiel zu starten, begibt sich der Spieler auf die am Boden gekennzeichnete Makierung und hebt seine Arme nach oben. Die eigene Spielfigur kann durch vier unterschiedliche Körperposen bewegt werden. Die Bewegungen nach oben, unten, links und rechts sind auf den nebenstehenden Plakaten erkannbar. Während der Durchführung wird die Bewegung des Spielers durch eine Kamera vor ihm getrackt.

Fazit

Abschließend hat sich das Projekt, trotz einiger Herausforderungen, als ein gelungenes Experiment herausgestellt. Schwierigkeiten lagen darin, optimale Bedingungen für das Tracking, hinsichtlich Lichtsituation und Kameraposition, zu schaffen. Die Einarbeitung in die Programmiersprache JavaScript war komplex, jedoch ermöglichte es auch, sich neue Kenntnisse anzueignen.

Durch die Möglichkeit, das Exponat bei “Stürmt die Burg” auszustellen, konnten wir neue Erfahrungen bezüglich Planung und Aufbau sammeln.
Außerdem bot es eine optimale Gelegenheit, die Spielbarkeit mit interessierten Probanden zu testen.

Team

Michaela Braun, Rica Krug, Philipp Reiner

Betreuung

Prof. Damian Gerbaulet

Soundeffekte von
Mixkit.co

Code von Colorful Coding
Complex sine waves & polar coordinates in p5js | Coding Project #16

Code von Drew Fleeman
Polygon Tunnel