Abb. 1: Der Turm der Elemente. Namensgebend für das Spiel kann man am Turm erkennen, dass jede Etage eine eigene Thematisierung aufweist (eigene Darstellung).
¶ Übersicht
Hilf Cubeau, Deinem digitalen Freund! Leg die richtigen Aktionsmünzen aufs Portal-Buch, um Hindernisse zu knacken und alle Smaragde einzusammeln!
¶ Projektinformationen
Studiengang: Media Systems (B. Sc.)
Kurstitel: Media Design 2
Zeitraum: Sommersemester 2026 (14. April - 16. August)
Betreuer: Ralf Hebecker
¶ Das Team
| Name | Matrikelnummer | Aufgaben | Studiengang | Erreichbarkeit |
|---|---|---|---|---|
| Calab Köpcke | xxx9345 | 3D-Modellierung und Produktion, 2D-Art | Media Systems (B. Sc.) | - |
| Simon Stroetenga | xxx1309 | Microcontroller-Programmierung, Hardware, Sounds | Media Systems (B. Sc.) | - |
| Sebastian Grewe | xxx3109 | 2D-Art & -Animation, Projektmanagement, Rätseldesign | Media Systems (B. Sc.) | |
| Francesco Vinciguerra | xxx2602 | Game Development (Unity) | Media Systems (B. Sc.) |
¶ Kurzbeschreibung
In diesem Projekt entstand ein digitales Escape-Room-Spiel, das mit einem eigens entwickelten Eingabegerät in Form eines Buches, auch Portal genannt, bedient werden kann. Zu diesem gehören kleine PLA-Scheiben (genannt Siegel oder Puck), welche mittels NFC ein Signal an den Controller weitergeben, sobald sie auf das Buch gelegt werden. Jedes Siegel hat ein eigenes Symbol, passend zu dem Element, für welches es steht.
Auf einem Bildschirm wird das Spiel abgebildet, dort sind die aktuellen Hindernisse erkennbar, welche überwunden werden müssen. Um das Hindernis aus dem Weg zu räumen, muss das passende Siegel verwendet werden. Im Verlauf des Spiels sammelt man Edelsteine mit Codebausteinen ein, am Ende werden diese dann präsentiert und der gesamte Lösungscode wird angezeigt, welcher dann in einem weiteren Rätsel oder der Hub-Software angewendet werden kann.
Der Schwierigkeitsgrad ist gering, das Spiel kann als leicht bezeichnet werden.
¶ Projektart
- Escape-Room-Rätsel
- hybride Steuerung (digitaler Controller mit analoger Bedienung)
- digitales Spiel
¶ Komponenten
- Computer mit Unity-Anwendung
- Controller, umfasst einen ESP32 mit verschiedenfarbigen LEDs, Lautsprecher und NFC-Modul
- Siegel mit NFC-Tags
¶ Idee und Ziel
¶ Grundidee
Die Idee war, eine digitale Anwendung mit analogen Komponenten zu verbinden, um damit ein leicht zu steuerndes Minispiel zu entwickeln, das von verschiedenen Altersgruppen leicht verstanden wird und zu bedienen ist. Insbesondere für Kinder soll das Spiel schnell zugänglich sein. Daher sollte es möglichst keinen Text beinhalten und nur durch Formen und Farben kommunizieren, was das Spiel fordert.
Um dieses Ziel zu erreichen, wurden folgende Features verwendet:
- Tipps in Form einer Denkblase, die das nächste Symbol ankündigt (nur bei Verwendung des Siegels für Tipps)
- automatisierter Neustart nach kurzer Zeit: nicht zu schnell, sodass den Spieler:innen genug Zeit zum Agieren bleibt, aber schnell genug, damit das Spiel zeitnah für die nächste Person zur Verfügung steht
- begrenzte Energie, um Brute Force zu verhindern: wenn die Energie aufgebraucht ist, werden die Spieler:innen wieder an den Start zurückteleportiert
- schlanke, eindeutige UI mit aktueller Energie und den gesammelten Edelsteinen
- Feedback durch den Charakter durch Augen, Augenbrauen und Animation
- simple Probleme und Lösungen (Feuer schmilzt Eis)
¶ Abgrenzung
Das Projekt ist...
- kein Browserspiel: es kann nur mit dem Controller bedient werden
- kein digitaler Escape-Room
- kein Spiel mit komplexer Steuerung: nach Lösung der Teilrätsel bewegt sich der Charakter selbstständig zum nächsten Rätsel oder zum Ende
¶ Rätselkonzept
Das Spiel besteht aus drei separaten Elementen:
- Eingabegerät: Portal
- Ausgabegerät: Bildschirm (Cubeau interagiert mit seiner Umgebung)
- Ausgabe: Zusammenführung der Lösungen des Escape-Rooms
Durch diese Interaktionen ermöglichen sich folgende Rätselkomponenten:
- Abstraktion der Spielfunktion: Die Spieler:innen müssen erkennen, dass die Siegel auf das Portal gelegt werden müssen, um das Spiel zu bedienen. Um Schwierigkeit an dieser Stelle zu erhöhen, können die Siegel im Raum verteilt werden. Die Zuordnung ist möglich, da die Form der Siegel und die der Aussparung auf dem Buch beide rund und in etwa gleich groß sind. Im hier beschriebenen Aufbau wird dieser Schritt übersprungen und die Siegel direkt neben dem Buch abgelegt.
- Kombinationsrätsel: Mit Hilfe der Elemente auf den Siegeln müssen die Hindernisse im Spiel auf dem Bildschirm überwunden werden. Es gibt immer ein Element, das das Rätsel löst. Es gibt auch mindestens ein Rätsel, das den Gebrauch von mehreren Elementen in der richtigen Reihenfolge notwendig macht.
¶ Aufbau
¶ Technischer Aufbau
Die technische Infrastruktur des Projekts bestand aus einem ESP32-Mikrocontroller mit WLAN-Anbindung, einem RFID-Lesegerät sowie einem Rechner, auf dem die in Unity entwickelte Anwendung ausgeführt wurde. Die Kommunikation zwischen dem ESP32 und der Unity-Anwendung erfolgte über den bereits entwickelten EscapeRoomHub. Der Aufbau ist auch in Abbildung 2 dargestellt.
Abb. 2: Interaktion der einzelnen Komponenten im System.
Der ESP32 erfasste mithilfe des angeschlossenen RFID-Lesers die verwendeten RFID-Tags und übermittelte die erkannten Daten über das WLAN an den EscapeRoomHub. Dieser stellte die Verbindung zur Unity-Anwendung her und ermöglichte den Datenaustausch zwischen der physischen Hardware und dem digitalen Spiel.
Innerhalb der Unity-Anwendung wurde überprüft, ob die eingelesenen RFID-Tags der erwarteten Kombination beziehungsweise den korrekten RFIDs entsprachen. Das Ergebnis dieser Prüfung wurde anschließend über den EscapeRoomHub an den ESP32 zurückgemeldet.
Abhängig vom Ergebnis steuerte der ESP32 die angeschlossenen LEDs an. Bei einer korrekten Eingabe wurden grüne LEDs aktiviert und signalisierten den erfolgreichen Abschluss der Aufgabe. Bei einer fehlerhaften Eingabe wurden dagegen rote, blinkende LEDs angesteuert. Auf diese Weise erhielten die Spielenden unmittelbar eine visuelle Rückmeldung darüber, ob ihre Lösung korrekt oder falsch war.
Durch diese Infrastruktur konnten die physischen Komponenten des Escape Rooms direkt mit den Abläufen innerhalb der Unity-Anwendung verknüpft werden. Der EscapeRoomHub bildete dabei die zentrale Kommunikationsschnittstelle zwischen Hardware und Software.
¶ Räumlicher Aufbau in "The Studio"
Die räumliche Infrastruktur in dem Escape Room „The Studio“ zum Ende des Semesters war simpel. Neben den Komponenten des Spiels wurden ein Tisch bzw. Podest für das Buch, ein Bildschirm zur Darstellung unserer interaktiven Welt, ein PC für die Unity-Anwendung sowie eine Halterung bzw. Möglichkeit zum Aufhängen des Bildschirms benötigt.
Abb. 3: Aufbau während des Prototypentests
¶ Anpassbarkeit
Der Turm der Elemente ist teilweise auf Bedürfnisse von Kunden anpassbar. Das Lösungswort ist individualisierbar und erfordert kaum Bearbeitungsaufwand. Weitere Elemente und dazugehörige Siegel sind von Seiten der Hardware einfach hinzuzufügen, fordern jedoch auch weitere Sprites und Animationen. Außerdem ist die Anwendung mit dem EscapeRoomHub verbunden, was zusätzliche Licht- oder Soundeffekte einfach integrieren lässt.
¶ Fazit/ Ausblick
Herausforderungen bei der Bearbeitung traten unter anderem bei der Abstimmung zwischen den einzelnen Softwarekomponenten, der Arbeit mit elektrischen Komponenten (z.B. beim Löten), dem Entwurf und Druck von 3D-Druck-Elementen sowie der Kommunikation innerhalb des Teams auf. Unter Herausforderungen sind die Probleme und Lösungsansätze noch einmal ausführlich beschrieben. Am Ende entstand jedoch fristgerecht ein solides Produkt, mit dem alle Teammitglieder zufrieden waren.
Das Projekt gilt als abgeschlossen und wird nicht weiterentwickelt.
¶ Details zur Ausarbeitung
¶ Kalkulierte Kosten
Das verwendete Material kann sehr genau beziffert werden. Die Personalkosten sind grob geschätzt und basieren vor allem auf der Menge an Erfahrungswerten, die das Team in diesen Bereichen vorweisen konnte.
¶ Material:
| Objekt | Stückpreis | Stück | Kosten |
|---|---|---|---|
| Microcontroller (ESP32) | 11,88 € | 1 | 11,88 € |
| NFC-Scanner | 25,43 € | 1 | 25,43 € |
| NFC-Tags | 7,98 € | 1 | 7,98 € |
| Elektr. Zubehör (LEDs etc.) | 12,63 € | 1 | 12,63 € |
| Filament (Druck) | 13,99 € | 1 | 13,99 € |
| Acrylglas | 5,00 € | 1 | 5,00 € |
| Bindemittel | 6,02 € | 1 | 6,02 € |
| Rechner | - | 1 | vorhanden |
| Bildschirm | - | 1 | vorhanden |
| Summe | 82,93 € |
¶ Arbeitszeit und Personalkosten:
| Objekt | Preis/ h | Menge | Summe |
|---|---|---|---|
| Game Developement | 35,50 € | 105,0 | 3727,50 € |
| 2D-Art | 28,00 € | 90,0 | 2520,00 € |
| Elektr. Arbeiten | 35,50 € | 8,0 | 284,00 € |
| Management | 42,80 € | 24,0 | 1027,20 € |
| Consulting | 229,00 € | 9,0 | 2061,00 € |
| Summe | 9619,70 € |
¶ Gesamt:
| Kostenstelle | Kosten |
|---|---|
| Material | 82,93 € |
| Arbeitszeit | 9619,70 € |
| Summe | 9702,63 € |
¶ Entstehungsprozess und alternative Ideen
¶ Ideen
Die Gruppenbildung geht auf die ursprüngliche Idee zurück, ein Rätselspiel auf Basis eines Barcodescanners zu entwickeln. Es zeigte sich jedoch schnell, dass ein reiner Barcode-Mechanismus langfristig zu wenig Spielspaß bietet. Dennoch war die Motivation groß, weiterhin mit einem Scanner-Prinzip zu arbeiten – allerdings in einer neu gedachten Form.
In einem gemeinsamen Brainstorming auf unserem Miro-Board sammelten wir zahlreiche Alternativen:
- Kesselspiel: Gegenstände werden hineingeworfen und im Kessel gescannt.
- Waagenspiel: Objekte müssen kombiniert werden, um ein Zielgewicht zu erreichen.
- Joystickspiel: Linien müssen mithilfe eines Joysticks korrekt verbunden werden.
- Audio-Rätsel: Hintergrundtöne müssen analysiert werden, um einen Code zu ermitteln.
Letztlich überzeugte uns die Kombination aus Kessel-Mechanik und einem magischen Setting. Um jedoch das technische Risiko zu vermeiden, dass eine zu hohe Kesselwand den Scanvorgang blockiert, entschieden wir uns für ein flacheres Scanner-Design. Inspiration lieferte uns hierbei das Spiel Skylanders, das physische Figuren über ein Scanner-Portal ins digitale Spiel integriert.
| Bilder aus unserem Miro | |
|---|---|
 |
 |
| Abb. 4: Erste Kessel-Ideen | Abb. 5: Finale Idee, mit der wir in den Arbeitsprozess übergegangen sind |
Aus diesem Ansatz entstand schließlich unsere finale Idee: ein magisches Buch, das dem spielbaren Charakter mithilfe seiner Zauberkraft im Spielverlauf zur Seite steht.
¶ Konzept
Um eine erste Visualisierung des Konzepts, für das sich entschieden wurde, zu erstellen, wurde ein Prototyp aus Pappe gebaut, der in Abbildung 9 zu sehen ist. Dieser umfasste einen Sockel und zwei exemplarische Items. Zum Pappprototypen wurde außerdem eine erste, einfache Skizzen entwickelt, die für eine Live-Demo verwendet wurden, um den Ablauf direkt darstellen zu können.
| Einige Bilder aus dem Skizzierungsprozess | ||
|---|---|---|
 |
 |
 |
| Abb. 6: Erste Ideen für Cubeau | Abb. 7: Erste Skizze für unser Portal | Abb. 8: Erste Designidee für unsere Siegel |
| Einige Bilder aus dem Entstehungsprozess | ||
|---|---|---|
 |
 |
 |
| Abb. 9: Früher Prototyp aus Pappe | Abb. 10: Weiterentwickeltes Modell in Blender | Abb. 11: Modell eines Siegels in Blender |
 |
 |
| Abb. 12: Microcontroller mit LEDs und NFC-Modul | Abb. 13: Animation der Fähigkeit Pflanze |
¶ Umsetzung
Alle 2D-Assets wurden in Aseprite erstellt, dazu gehörten Sprites und Animationen. Die 3D-Modellierung fand in Blender statt, anschließend fand der Druck im EuC-Labor der HAW Hamburg statt. Das Programm selbst wurde überwiegend mit Unity entwickelt. Die Arbeit an der Elektronik umfasste vor allem Löten. Hinzu kamen Arbeiten zum Zusammenfügen der Komponenten und Kleben des Portals.
¶ Erkenntnisse aus dem Prototypen-Test
Beim Test des Prototyps fielen einzelne Punkte auf, an denen noch gearbeitet werden musste. Dazu gehörte etwa, dass der Bereich, in dem die Siegel auf das Buch gelegt werden sollen, besser markiert werden muss. Dies ist auf den limitierten Radius des NFC-Readers zurückzuführen.
Außerdem wurde bei dem Test noch ein anderer NFC-Reader verwendet, welcher einen Ton abgab und eine LED besaß, die durch das Acrylglas hindurchschien. Dies wurde durch einen anderen Scanner umgangen.
Beim Testen gab es auch noch keinen Mechanismus, der wirksam Brute Force verhinderte. Daher wurde später die limitierte Energie eingefügt.
Zudem fiel auf, dass einige Texturen nicht für Bildschirme geeignet sind, da sie zu einem störenden Flackern führten. Diese wurden bis zur Ausstellung noch ersetzt. An anderer Stelle entstanden Probleme mit Texturen durch unsaubere Einbindung in Unity, auch dies wurde behoben.
¶ Herausforderungen
Nach anfänglichen Schwierigkeiten bei der Kommunikation zwischen dem ESP32, dem EscapeRoomHub und der Unity-Anwendung waren einige Anpassungen und Umprogrammierungen notwendig. Diese wurden in Zusammenarbeit mit den für den EscapeRoomHub verantwortlichen Projektbeteiligten durchgeführt.
Nach den vorgenommenen Änderungen funktionierte die Zusammenarbeit der einzelnen Komponenten zuverlässig. Insbesondere der Austausch mit dem Hub-Team erwies sich als hilfreich, um auftretende Probleme zu identifizieren und gemeinsam zu beheben. Letztendlich konnte eine funktionierende Verbindung zwischen der Hardware und der Unity-Anwendung hergestellt werden, sodass die RFID-Erkennung und die entsprechende Rückmeldung über die LEDs wie vorgesehen umgesetzt werden konnten.
Eine weitere Herausforderung stellte die praktische Arbeit mit den elektronischen Komponenten dar. Da für den Aufbau der Hardware verschiedene Bauteile und Verbindungen verlötet werden mussten, musste zunächst der Umgang mit dem Lötkolben erlernt werden. Im Verlauf des Projekts konnten dadurch zusätzliche praktische Kenntnisse im Bereich der Elektronik gesammelt und direkt beim Aufbau des Systems angewendet werden. Parallel dazu erforderte das Gehäuse/die Hardware-Abdeckung eigene Anpassungen: Mithilfe von Blender wurden passgenaue 3D-Modelle entworfen und anschließend per 3D-Druck realisiert. Hierbei mussten Toleranzen für die einzubettenden Komponenten wie den RFID-Leser und die LEDs berücksichtigt sowie Druckeinstellungen für eine stabile und visuell ansprechende Umsetzung optimiert werden. Im Verlauf des Projekts konnten dadurch wertvolle praktische Kenntnisse sowohl im Bereich der Elektronik als auch im Digital-Fabrication-Workflow (von der 3D-Modellierung bis zum fertigen Druck) gesammelt und direkt angewendet werden.
Insgesamt hat die Zusammenarbeit nach der notwendigen Anpassungsphase gut funktioniert und zu einer erfolgreichen Integration der verschiedenen Systeme geführt. Neben den Erfahrungen in der Programmierung und der Kommunikation zwischen Hard- und Software konnten durch das Projekt somit auch neue praktische Fähigkeiten im Bereich der Elektronik erworben werden.
Die Entwicklung der Software war ein höherer Aufwand als vorerst gedacht, da Animationen nicht immer gleich abgespielt werden sollten und individuell angepasst werden mussten. Dies führt zu viel Aufwand die Animationen der Anwendung immer genau richtig abspielen zu lassen. Dabei wäre eine vorherige Absprache zwischen Programmierer und Artist relevant, um genau einzuschätzen wie viel technischer Aufwand in der Implementierung von bestimmten Animationen steckt. Positiv ist jedoch das Nutzen von Software-Patterns, welche das Hinzufügen von weiteren Siegeln, Leveln und Rätseln stark vereinfachte. Die Einbindung des EscapeRoomHub in Unity, war sehr einfach und kann für weitere Projekte empfohlen werden.
¶ Literatur und Abbildungen
Alle verwendeten Abbildungen wurden selbst erstellt. Externe Literatur wurde nicht verwendet.