LabRats

Im Rahmen einer Aufgabe über multilineares Storytelling mittels JavaScript und jQuery kam uns die Idee, ein Escape-Game zu gestalten. Neben der Codierung und Programmierung produzierten wir hierfür ausserdem drei kurze Videos und einige Fotografien, welche für die Rätsel und Rahmengeschichte eingesetzt wurden.

Die Story

“Sobald wir das Haus betreten, führt uns ein unscheinbarer Mann mit Brille in ein düsteres Zimmer. Dort müssen wir eine Vereinbarung unterschreiben, dass wir freiwillig an diesem Medikamententest teilnehmen würden und dass die Auftraggeber jegliche Haftung ablehnen. Sobald diese Formalitäten geklärt sind, erklärt uns der Mann mit der Brille den Ablauf des Testes:
Die zu testende Pille schien mit dem Ziel entwickelt worden zu sein, den IQ des Menschen zu erhöhen. Die Wissenschaftler wurden auserwählt von der Schweizer Regierung und das Projekt wird streng geheim gehalten.”

LabRats ist ein Game, in dem fünf Freunde, knapp bei Kasse und etwas naiv, sich an einem Medikamententest anmelden. Was sie nicht wissen: Um die Wirkung der Pille zu testen, werden sie in ein düsteres Kellergewölbe eingesperrt und müssen Rätsel lösen, um daraus zu entfliehen.

Hier findet ihr den Teaser zum Intro des Spiels:

Der Ablauf

Auf der Indexseite ist ein kurzer Clip, der den Besucher bis zu dem Punkt in die Geschichte einführt, an dem die Personen das Gebäude betreten. Nach einer Erklärung des Spiels gelangt der Spieler zur Home-Seite, auf der ein Überblick über die Zellen sowie die Fussfesseln der Figur zu sehen sind. Anschliessend kann der User das Spiel mit der Wahl einer beliebigen Türe beginnen, wobei ihn hinter jeder Türe ein Rätsel erwartet. In den einzelnen Räumen finden sich, nebst den Rätseln, die Hinweise, die zur Lösung des letzten Rätsels benötigt werden. Nachdem man sich an allen vier Türen versucht hat, kann der Spieler das Rätsel, welches seine Fussfesseln öffnet, lösen. Im Gegensatz zu den anderen Räumen, hat der Spieler hier nur einen Versuch. Am Ende gelingt die Flucht – oder auch nicht.

>>Spielen: LabRats

(fms)

Kritik
von Joel Dähler und Leila Gerber

Idee / Motivation

Die Idee entstand, wie im Beitragstext bereits erwähnt, durch eine Aufgabe, die wir im Studien-Modul Interaktive Medien während unseres zweiten Semesters absolvierten. Die Aufgabe, dafür Bootstrap zu nutzen und der Fakt, dass wir beide sehr Rätsel-affin sind, brachte uns auf die Idee, ein Escape Game zu machen. Wir wussten von Anfang an, dass dies ein sehr zeit-intensives und ambitioniertes Projekt war, das den Rahmen des Projektes im Modul Interaktive Medien sprengen würde und somit ideal für Digezz zu gebrauchen war.

Umsetzung

Schnell stellte sich heraus, dass wir beide viele spannende Ideen haben, ob die Umsetzung aber klappen würde, war zuerst relativ ungewiss. Gemeinsam einigten wir uns zuerst auf einen roten Faden und einen groben Aufbau, wie das Spiel den in den Grundzügen funktionieren soll und welche Codier-Elemente es beinhalten könnte. Wie sich zeigte, war Joel der Rätsel-Experte, der sich vielerlei Aufgaben und Puzzle aus dem Ärmel schütteln konnte, jedoch eher weniger geübt in der Programmiersprache war. Leila hingegen hat alles daran gesetzt, die verschiedenen Rätsel-Ideen in Programmier-Code umzuwandeln.

Eine der grossen Herausforderungen beim Erstellen der Website waren und sind die Umsetzung der Rätsel mithilfe von JavaScript und Jquery. Wir haben einige Plugins verwendet, die bereits existierten, allerdings mussten diese auch angepasst werden. Nach Überarbeitung des Konzeptes wurden diese Plugins zugunsten von simplerem Code verworfen. Insbesondere die Validierung des letzten Rätsels, das ein Locial-Rätsel ist, bot grosses Potenzial für Flüchtigkeitsfehler im Code, da 15 einzelne Select-Elemente validiert werden mussten. Dies wurde uns zum Verhängnis, da der erste Gedanke war, dass der grundsätzliche Code falsch war. Dies war jedoch nicht der Fall. Nach einigen Tagen, viel Recherche im Internet und Hilfe von einem Tutor wurde jedoch klar, dass es sich primär um Schreibfehler handelte. Mit diesem und anderen Umwegen dauerte die Umsetzung des Codes, der ohnehin bereits eine Herausforderung war, nochmals länger. Je mehr wir daran gearbeitet haben, desto klarer wurde uns, wie viel wir noch nicht wussten und wie viel Recherche jeder Teil der Homepage benötigt. Leila hatte bereits die grundsätzliche HTML-Struktur erstellt und Joel lieferte immer wieder fertige Rätsel, die jedoch nur teilweise direkt in eine simple Formularstruktur eingebaut werden konnten.

Schlussendlich war der grösste Fehler bei der Umsetzung allerdings die Tatsache, dass das Konzept nicht durchdacht war. Dies führte dazu, dass wir uns - insbesondere beim Codieren - oft in Details verloren, was unnötig Zeit kostete.
Nachdem ihr das bewusst wurde, holte Leila diesen Schritt nach und erstellte ein Plakat, worauf sie die wichtigen Schritte, Teile der Website, sowie ungeklärte Fragen darstellte. Danach waren die zu erledigenden Aufgaben viel klarer und es konnten konkrete Arbeitsschritte festgelegt und durchgeführt werden.

Zusätzliche Probleme mit dem Text Editor (Atom), insbesondere der Funktion, die lokalen Ordner mit dem FTP-Server zu synchronisieren, nahmen weitere Zeit in Anspruch und verunmöglichten vorübergehend die Nutzung von Plugins oder die Anpassung von Bootstrap.
Solche Probleme können nie ganz ausgeschlossen werden, allerdings werden sich diese mit der Zeit verringern, da die häufigsten Probleme vertraut sind und nicht mehr so viel Zeit zu deren Lösung eingesetzt werden muss. Dass diese Probleme bei einem ersten Projekt in einem neuen Fachgebiet einen grossen Teil der Zeit in Anspruch nehmen, ist eine Erfahrung, die ich in Erinnerung behalten werde.

Video-Dreh & Fotoshoot

Da Leila schon einen sehr grossen Teil des Projektes durch das Programmieren übernommen hatte, übernahm Joel die Leitung für den Video-Dreh und den Fotoshoot, welcher grössenteils in einem Kellergewölbe stattfand. Dafür haben wir uns zuerst überlegt, mit welchen Medien das Spiel überhaupt auskommen soll. Uns erschien ein Video als Intro der passende Einstieg ins Spiel. Ebenso fanden wir ein Video zum Ende des Spiel eine gelungene Abrundung des Ganzen, indem es zwei Video-Enden gibt, je nachdem ob man das Spiel schafft oder nicht. Durch ein vorher zurecht gelegtes Storyboard verlief der Video-Dreh sehr produktiv und zügig. Glücklicherweise standen uns Freunde von Leila kurzfristig als Schauspieler zur Verfügung; Danke dafür an dieser Stelle.

Die genaue Location vor Ort wurde einmal spontan noch gewechselt, um das richtige Feeling zu erreichen. Ein Problem während des Drehs stellte der Ton dar. Mehrmals hörten wir uns Testaufnahmen des Mikrofons auf der Kamera an und es hörte sich extrem rauschend und geclippt an, egal welche Einstellungen wir am Mikrophon vornahmen. Erst als wir uns die Testaufnahmen am Laptop angehört hatten, stellten wir fest, dass die Tonprobleme nicht mehr vorhanden waren und es nur an den schlechten Lautsprechern der Kamera lag. Hätte die Spiegelreflexkamera die Möglichkeit gehabt, Kopfhörer zum Ton-Testen einzustecken, wäre uns dieses Missgeschick sicherlich erspart geblieben.

Bei den Fotos war eher Improvisation und “Lass uns mal schauen, was am besten aussieht” angesagt. Dies hat nach wenigem “Trial & Error” auch relativ gut funktioniert. Besonders knifflig waren die Aufnahmen im Keller, da es dort sehr dunkel war. Durch eine auf die Kamera schraubbare Videoleuchte konnte da aber Abhilfe geschaffen werden, was jedoch einige Zeit für die Feinjustierung in Anspruch nahm.

Gedreht und geshootet wurde mit einer Spiegelreflexkamera: Nikon D5500 (Objektiv 18-140mm Brennweite), inklusive Rode Videomic Pro für den Sound und einem LD-160 Videolicht.

Zeitmanagement

Das Zeitmanagement stellte insbesondere eine Herausforderung dar, als dass der Grossteil dieses Projektes einen Fachbereich beinhaltete, der für uns beide relativ neu war. Weder Leila noch Joel hatten - abgesehen von zwei Semestern Unterricht - irgendwelches Vorwissen im Bereich des Codierens und das machte es schwierig, den Aufwand der einzelnen Arbeitsschritte korrekt einzuschätzen. Auch das nicht durchdachte Konzept erschwerte die Planung und der benötigte Zeitaufwand zum Beenden des Projektes erhöhte sich weiter.

Fazit

Der Prozess war sehr stark von Trial & Error geprägt, was eine ziemlich steile Lernkurve zum Vorteil hat, allerdings nicht sehr strukturiert ist. Ausserdem haben wir den zeitlichen Aufwand, den das Projekt benötigen würde, stark unterschätzt. Frustrierend ist, dass bei allem Aufwand das Resultat relativ bescheiden ist. Im Bereich des Codierens lernten wir - mehr noch, als das konkrete Schreiben von Code -, wie Plugins eingesetzt werden können, wie Problemlösungen angegangen werden sollten (oder auch nicht) und online Tipps und Tricks von professionellen und semi-professionellen Codern zu entziffern.

Die Notwendigkeit, ein gutes Konzept zu erarbeiten und genügend Zeit für die Planung einzusetzen, war ein weiterer Punkt, der uns nach diesem Projekt mit Sicherheit im Bewusstsein bleiben wird.

Grundsätzlich hat es uns beiden aber Spass gemacht, insbesondere, da die Umsetzung des Projektes uns mit diversen Rätseln konfrontiert hat und die Freude am Rätseln war es, die uns zu diesem Projekt inspiriert hat.

Keine Kommentare

Schreibe einen Kommentar