Melody Message

In dem 6-tägigen Workshop “3-dimensionale Grundlagen im medialen Raum” geht es um die Entwicklung und Umsetzung von Ideen, die in Form der Kommunikation zur (spielerischen) Interaktion im Team genutzt werden können. Die Aufgabe und Herausforderung besteht darin, gemeinsam Interaktions- und Gestaltungspotenziale zu entdecken und diese funktionsfähig als HTML/ Javascript-Prototyp zu erstellen.

Einleitung

Kommunikation. Heutzutage kommunizieren wir auf verschiedenste Arten miteinander und uns steht eine Vielfalt an Kommunikationsmitteln zur Verfügung. Kommunikation kann durch akustische Signale, Texteinsatz und auch ohne Worte erfolgen und ist bis heute eines der wichtigsten Elemente für den Austausch von Informationen.

“Doch wie kann Kommunikation digital eingebracht und interaktiv (spielerisch) genutzt werden?”


Ein wesentliches und oft unterschätztes Medium für Kommunikation ist die Musik. Musik spricht Menschen auf emotionaler Ebene an und kann ein gemeinsames Gestalten und Erleben von Kommunikation auf der nonverbalen Ebene ermöglichen.

Spielidee & Prinzip

Zu Beginn des Melody Message Spiels wählt sich jeder Spieler ein Emoji aus. Ein Spieler wird nun aufgefordert die Frage “Wie findest du…?” an die anderen Spieler zu stellen. Alle Anderen, sowie der Fragensteller, erhalten die Frage und beantworten diese. Das Besondere an diesem Spiel ist es, dass die Spieler ihre Antwort nicht schreiben, sondern mithilfe von einzelnen Tönen der C-Dur Tonleiter antworten. Nachdem jeder Spieler seine Antwort abgegeben hat, können sie gemeinsam ihre Antworten anhören und aus der Musik interpretieren, wie derjenige das Gefragte findet.

Entwicklung

Bei der Ideenfindung haben wir zunächst verschiedene Kommunikationsmodelle und Spielideen gesammelt, wie bspw. den Morse Code, die Zeichensprache, Schere-Stein-Papier oder die Beepbox. Nach den Durchsprachen und Abstimmungen der Ideen beschlossen wir uns auf die Musik zu fokussieren und Kommunikation spielerisch über Musik darzustellen.

Im Anschluss erfolgte die Aufteilung und die Gestaltung der einzelnen Screens auf Figma, sowie die Ausarbeitung der Emojis und des Logos.

Code

Unsere Idee bringt in Verbindung mit node.js ein großes Problem mit:

Es gibt keinen Server, auf dem alle Daten gespeichert und angefordert werden können. Somit ist es besonders schwierig, alle Spieler auf denselben Stand zu bringen.

Die Lösung bringt eine Struktur aus einem Host und mehreren Clients.
Der am längsten verbundene Spieler wird zum Host ernannt und bekommt somit die Rolle eines Servers.

1. Alle Clients senden ihre eigenen Informationen an den Host.
2. Der Host verarbeitet diese und aktualisiert die Spielerliste und den Spielstand
3. Der Host sendet die aktualisierten Informationen an alle Clients
4. Die Clients verarbeiten die neusten Informationen und bekommen somit den aktuellen Spielstand angezeigt

   

   
   

   Struktur und Prinzipien

   In einem Programmier-Projekt kann man schnell die Übersicht über den Code verlieren. Um das zu verhindern, ist es wichtig, eine Grundstruktur und Prinzipien zur Umsetzung zu überlegen.

Struktur von Variablen und Funktionen

Für eine gute Übersicht haben wir uns 3 Klassen überlegt, auf die wir alle Variablen und Funktionen aufgeteilt haben.

• Jeder Spieler hat eine eigene Klasse Player. In dieser wird alles Persönliche, wie der ausgewählte Avatar, die Rolle und seine Antwort gespeichert. Die enthaltenen Funktionen sind dafür da, diesen zu updaten oder zu verändern.
• Die Klasse Game wird zwischen allen Spielern geteilt. Sie enthält Informationen, die für alle Spieler gleich sind. Die Funktionen beziehen sich darauf, Informationen vom Spiel, bzw. einer Gruppe von Playern zu verändern.
• In der Klasse UI sind die Avatare, bzw. deren Verwendung gespeichert. Die Funktionen aktualisieren das Visuelle, was der Spieler sieht.

Interaktion erkennen und verarbeiten

Wenn ein Button geklickt oder ein Textfeld ausgefüllt wird, bekommt das der Event-Listener mit. Dieser ruft dann die entsprechenden Funktionen auf, die bei der Eingabe hinterlegt sind und löst somit Funktionen in player, game oder ui aus.

Verbindung zwischen Host und Clients

Die Verbindung besteht aus zwei Teilen, dem Senden von Informationen und Empfangen und Verarbeiten der erhaltenen Informationen.

• Das Senden funktioniert über eine Funktion, welcher man das Thema des Befehls (was wird verarbeitet?) und den auszuführenden Inhalt (was wird verarbeitet?) übergibt.
• Um beim Empfangen die erhaltenen Funktionen korrekt zu verarbeiten, wird das Thema ausgelesen und der Inhalt die zugehörige Sammlung an Funktionen übertragen

Ablauf der Funktionen

Nicht nur die Menge der Funktionen ist überwältigend, sondern auch deren zeitlicher Ablauf. Grafisch dargestellt hilft dieser zu verstehen, wann welche Funktion aufgerufen und welche Variable neu geschrieben wird. Tatsächlich ist diese Darstellung jedoch sehr vereinfacht, da Funktionen weitere Funktionen aufrufen und somit eine deutlich größere Komplexität mit sich bringen.

Umsetzung

Dann ging es gemeinsam an das Coden über Visual Studio Code und GitHub. Dabei bestand die Herausforderung zum einen darin, ständig im Austausch zu sein, um bereits getätigte Änderungen nicht zu überschreiben, da alle gemeinsam an einer Datei gearbeitet haben und zum anderen die Musikfunktion spielfähig zu bekommen. Außerdem hatten wir den Anspruch das Spiel gestalterisch so umzusetzen, wie wir es auf Figma dargestellt haben.
https://github.com/dw-herrmann/2121-ig2-grundlagen-im-medialen-raum