Time Parabox
- React Native
- Expo
- NFC
- Bluetooth Low Energy
- Figma
Das Projekt
Das Projekt
Time Parabox ist ein interaktives Escape-Box-Spiel, das Spieler*innen auf eine spannende Zeitreise schickt, um Paradoxe in der Geschichte zu korrigieren.
Die Reise führt durch fünf historische Epochen – Antike, Mittelalter, Renaissance, Industrielle Revolution und den Zweiten Weltkrieg.
Das Projekt wurde im Rahmen der Masterklasse 'Mobile' in einer 10er-Gruppe durchgeführt. Die Entwicklung erfolgte mithilfe agiler Methoden. Zweiwöchige Sprints wurden mit Jira organisiert und der Fortschritt wurde in wöchentlichen Meetings überprüft.
Das Konzept
Das Konzept
Jede Epoche wird durch eine physische Rätselbox repräsentiert, die unter anderem NFC-Tags, Magnetschlösser, 3D-gedruckte Modelle, einen Drehregler, Servomotor und LED-Ring enthält.
Eine begleitende App führt die Spieler*innen durch die Rätsel und verknüpft die physischen Elemente mit digitalen Interaktionen. Jedes Rätsel ist thematisch auf die jeweilige Epoche abgestimmt. Ziel ist es, durch das Lösen der Rätsel die Zeitlinie zu stabilisieren und die Zukunft zu retten.
Die Storyline
Die Storyline
In einer Zukunft, in der die Zeit aus den Fugen geraten ist, schickt dein zukünftiges Ich eine mysteriöse Box durch ein Portal direkt zu dir. In der Box verborgen: Hinweise auf eine verzerrte Vergangenheit. Große Momente der Geschichte wurden verändert – die Dampfmaschine nie erfunden, Odysseus nie heimgekehrt. Nur du kannst das Zeitchaos rückgängig machen.
Geführt von Nachrichten deines zukünftigen Ichs, reist du durch die Epochen, löst Rätsel und sammelst Artefakte, um die korrekte Timeline wiederherzustellen. Doch am Ende wartet die größte Enthüllung: Die geheimnisvolle Person, die dich auf diese Reise geschickt hat … bist du selbst.
Die App
Die App
Vor Beginn der Entwicklung wurden Low-Fidelity-Wireframes erstellt, um die Grundstruktur, Navigation und User-Flows der App zu definieren. Diese frühen Skizzen halfen dabei, die Rätselmechaniken mit der digitalen Benutzeroberfläche abzugleichen.
Im nächsten Schritt wurden die Lo-Fi-Entwürfe zu High-Fidelity-Wireframes weiterentwickelt. Diese Hi-Fi-Screens dienten als Grundlage für die finale Umsetzung und ermöglichten eine reibungslose Übergabe zwischen Design und Entwicklung.
Die App wurde mit React Native entwickelt, wobei React Redux für die State-Verwaltung und Expo für Setup und Testing zum Einsatz kamen. Auch native Smartphone-Sensoren wie das Accelerometer und Mikrofon, um bestimmte Rätsel-Interaktionen zu ermöglichen, kamen zum Einsatz.
Die Systemarchitektur
Die Systemarchitektur
Die Kommunikation zwischen App und Rätselbox erfolgt über einen ESP32-Mikrocontroller, der als Steuerzentrale fungiert. Über Bluetooth Low Energy (BLE) tauscht er Daten zwischen der App und den elektronischen Komponenten der Boxen aus.
Dadurch konnten Interaktionen wie das Scannen der Artefakte, das Entriegeln von Boxen, das Ansteuern des LED-Rings oder das Auslösen von Sensoren direkt mit dem digitalen Spielstatus synchronisiert werden.
Die Boxgestaltung
Die Boxgestaltung
Im Zentrum des Projekts steht eine Hauptbox, die mehrere kleinere Rätselboxen enthält. In diesen sind unterschiedliche elektronische und mechanische Komponenten verbaut, darunter NFC-Tags, Magnetschlösser, 3D-gedruckte Modelle, ein Drehregler, Servomotoren und ein LED-Ring.
Um die einzelnen Epochen erlebbar zu machen, entwarfen und produzierten wir 3D-gedruckte Artefakte, die jeweils mit NFC-Chips versehen wurden. Diese Artefakte erhielten die Spieler*innen als Belohnung für gelöste Rätsel und benötigten sie am Ende, um die finale Box zu öffnen. Die Objekte wurden im Makers’ Lab der Hochschule gedruckt, anschließend von Hand bemalt und in das Spiel integriert.
Meine Aufgaben
Meine Aufgaben
Meine Hauptverantwortung lag in der Entwicklung der App mit React Native. Neben der allgemeinen App-Entwicklung war ich an der Umsetzung spezifischer Rätselmechaniken beteiligt.
In der Antike entwickelte ich die Integration eines digitalen Kompasses, der den Spieler*innen half, Odysseus den richtigen Weg zu weisen. Für die Renaissance implementierte ich die Nutzung eines Accelerometers, das es den Spieler*innen ermöglichte, Hindernisse mit Leonardo da Vincis Fluggerät auszuweichen. Im Abschnitt des Zweiten Weltkriegs gestaltete ich ein Rätsel mit, bei dem Morsecodes entschlüsselt werden mussten, um das letzte Artefakt zu erhalten.
Die Präsentation
Die Präsentation
Gemeinsam mit einer Kommilitonin habe ich die Präsentation von Time Parabox bei der Projektevernissage der FH St. Pölten organisiert. Wir haben das Standdesign entwickelt sowie eine Slideshow, Postkarten, Sticker, Flyer und Poster gestaltet. Außerdem haben wir das Logo und ein einheitliches Corporate Design entworfen.
Zusätzlich haben wir ein Social-Media-Konzept für LinkedIn und Instagram erstellt, um die Sichtbarkeit des Projekts zu erhöhen. Unser Ziel war es, ein stimmiges und ansprechendes Gesamtkonzept zu schaffen, das die Besucher*innen neugierig macht und zum Ausprobieren des Spiels einlädt.
Meine Learnings
Meine Learnings
In diesem Projekt konnte ich wertvolle neue Erfahrungen sammeln. Zum ersten Mal arbeitete ich mit React Native und Expo und konnte so einen fundierten Einstieg in die native App-Entwicklung gewinnen. Besonders spannend war auch der Umgang mit Smartphone-Sensoren die wir in die Rätselmechaniken integriert haben.
Darüber hinaus war die Zusammenarbeit in einem großen Team von zehn Personen eine lehrreiche Erfahrung. Anfangs hatte ich die Befürchtung, dass die Organisation in einer so großen Gruppe herausfordernd sein könnte. Durch den Einsatz von Scrum, regelmäßige Sprints und klar verteilte Verantwortlichkeiten in kleineren Untergruppen funktionierte die Teamkoordination jedoch reibungslos und effizient.
Auch wenn mein Fokus hauptsächlich auf der App lag und ich weniger direkt mit der Hardware arbeitete, fand ich es äußerst spannend mitzuerleben, wie die verschiedenen Hardware- und Softwarekomponenten ineinandergreifen und miteinander kommunizieren.
