Als sich die Kamera wie wild um die eigene Achse drehte. Als sich die virutelle Welt ohne Vorwarnung um 45 Grad drehte. Und als ganze zwei Computer überlastet waren und sich nicht mehr einschalten liessen, wusste ich, dass dieses Projekt nicht nur mich, sondern auch die Hardware an ihre Grenzen brachte.
Alles begann Anfangs Mai, als uns Martin Vollenweider A-Frame vorstellte. Ein Framework, welches das Bauen von VR Welten ermöglicht. Wir sollten damit unser Onlineportfolio kreieren. Ich war nicht der einzige, der mit Virutal Reality nicht viel anfangen konnte. Es sei nur ein Hype und würde sich nicht durchsetzten können. Doch als ich das erste Duzend Klötze in meine strahlend weisse Welt platzierte, war es um mich geschehen. Ich verfiel dem Coder-Wahnsinn!
Die Decke
Von Anfang an hatte ich die Idee mit den Rechtecken, die mit ihren verschiedenen Farben und Grössen die Decke des Raumes bilden. Allein ein Viertel dieser Decke zu programmieren kostete mich über eine Woche. Ich machte mir das Leben aber einfach, indem ich dieses Konstrukt auf der X-Achse, Y-Achse sowie diagonal spiegelte. Um sicherzustellen, dass sich die Klötze nach dem spiegeln nicht überlappen, programmierte ich blaue Hilfslinien und baute nicht über diese hinaus. So brauchte ich lediglich ca. 18'000 Minus Zeichen zu löschen, um aus einem Viertel ein Ganzes zu machen. 
Die leerräume zwischen den Sektoren eigneten sich ideal, um Sonneneinstrahlung zu simulieren. Ich programmierte also eine Sonne, die nun endlos über die Decke des Tals hinweggleitet.Dieser Raum war ursprünglich für das Portfolio gedacht. Doch nachdem ich ihn fertiggestellt hatte, wurde mir klar, dass er sich ideal für ein Escape Game eignen würde. Und da biss mich der kreativ-Affe. Ich schrieb ein Konzept, brainstormte mir verschiedene Elemente zusammen die ich einbauen wollte (erstaunlicherweise haben es die meisten in das Endprodukt geschafft), entschied mich für eine Farbpalette und versuchte potenzielle Hürden festzustellen. Eine dieser Hürden war der User. Wie konnte ich ihm klar machen, was er zu tun hat?
ESCAPE!
Da ich mit möglichst wenig Text auskommen wollte, entschloss ich mich für einen Nebenraum. Dieser war ein Meisterstreich, denn er erfüllt jetzt zahlreiche Aufgaben. Einerseits wird in diesem Raum dem User klargemacht, wie ein Schalter aussieht und wie er ihn betätigt, andererseits wird gezeigt wie er sich umsehen kann und was er überhaupt zu tun hat. Und das alles ohne es ihm unter die Nase zu Reiben sondern mit nur einem einzigen Wort: ‚Escape!’ Da der User in diesem Raum nur limitierte Optionen hat, kann er die Mechanismen des Spiels auf eigene Faust erkunden. Die Liftfahrt zu Begin dient dazu, dass die Website die gigantische Datenmenge laden kann. Auch das Schwarz-Weisse Design und die ‚gfürchige’ Musik soll den User auf eine falsche Fährte locken. So ist der WOW-Effekt, wenn sich die letzte Tür zum Hauptraum öffnet umso grösser. Zu guter Letzt konnte ich sicherstellen, dass der User den Vorspann zu sehen bekommt. Dieser ist so eingebettet das er keineswegs langweilig ist, sondern zum Spannungsaufbau beiträgt.
Der Raum
Der eigentliche Schauplatz des Rätsels besteht aus zwei Sektoren. Dem verborgenen Schriftzug und den Schaltern. Wie bereits erwähnt wollte ich mit möglichst wenig Text arbeiten. Also entschloss ich den wichtigsten Hinweis nicht einfach Schwarz auf Weiss hinzuschreiben. Nein, ich kreierte ein Objekt aus ihm. Dieses kann der User nur entziffern, wenn er an einem ganz bestimmten Ort im Raum steht. Dies ermöglichte wiederrum, dass er auch den Code, welcher zeigt in welcher Reihenfolge er die Schalter betätigen muss, auch nur von der genau gleichen Stelle erkennen kann. So stellte ich sicher, dass er die geheime Botschaft lesen muss, um das Rätsel zu lösen! Rund zwei Tage lang klebte ich also eine aus Milchpapier gefertigte Vorlage auf meinen Monitor und platzierte Klotz für Klotz, bis der Schriftzug zu lesen war.
Bei den Schaltern entschied ich mich für sogenannte paradoxe- oder unmögliche Formen. Diese passten sehr gut in die ohnehin bizarre Welt. Ursprünglich Wollte ich bei diesen die gleiche Technik wie bei dem Schriftzug anwenden. Doch der Platz war zu knapp. Ausserdem hätte dies das Rätsel um ein vielfaches schwieriger gemacht und ich hätte unzählige Kamerafahrten für den Handyuser einplanen müssen. Ich ordnete sie also Kreisförmig als 2D Objekte an. So sieht der User alles auf einen Blick und ich brauchte nur zwei Kamerafahrten zu programmieren.
Animationen
‚Leave The Valley’ kommt mit nur wenigen Animationen aus. Doch es hatte trotzdem einige Knacknüsse darunter, welche ich ohne die Hilfe von Nils Solanski nicht hätte lösen können. Zum Beispiel musste der Browser bemerken ob der User den Raum verlässt und diesen dann an die Startposition zurückbefördern. Auch die Schalter lösten sich nach nur einem Klick unzählige Male aus. Dies machte das lüften des Rätsels unmöglich. Nils half mir einen ‚Throttel’ zu programmieren und zeigte mir, wie ich die Koordinaten der Kamera auslesen kann.
Was auch sehr viel Zeit kostete war das Timing der Türe. Der User durfte nicht zu schnell aber auch nicht zu langsam durch die erste Pforte hindurch schreiten. Ich will gar nicht wissen wie oft ich den Startschalter dieses Projekts betätigt habe.
Der Schwierigkeitsgrad
Die Schwierigkeit zu bestimmen war sehr herausfordernd. Das Ziel war, dass ungefähr 50 Prozent aller Spieler den Raum erfolgreich verlassen können. Da ich die Lösung von Anfang an kannte, war es für mich unmöglich einzuschätzen, wie schwer ich das Spiel gestalten sollte. Wie viele Schalter? Welche Abfolge? Soll der User bei einem richtig gedrückten Schalter ein visuelles oder auditives Feedback erhalten? Soll der Code von überall her lesbar sein? Sollen dem User nach einer gewissen Zeit automatisch Hinweise eingeblendet werden? Die Möglichkeiten waren endlos. Ich entschied mich dafür es zu Begin sehr schwierig zu lancieren und im Anschluss eine simplere Mobileversion zu programmieren. In dieser kann der User sich nicht frei bewegen und hat nur zwei mögliche Punkte an welchen er stehen kann. So sind wie im ersten Raum seine Möglichkeiten enorm eingeschränkt. Das visuelle Feedback scheint aber nach den ersten Rückmeldungen der Tester nötig zu sein. Auch ein farbiger Cursor sei von Vorteil, da man den Schwarzen im Ersten Raum kaum sehe. Wahrscheinlich werde ich diese Verbesserungsvorschläge nach der Veröffentlichung einbinden.
Das Finale
Falls der User tatsächlich aus dem mystischen Tal entkommt, sollte er auch dafür belohnt werden. Diese Funktion schrieb ich erst ganz zum Schluss. Sie steuert so viele Elemente an, dass ich mir nicht sicher war, wie sie sich verhalten würde. Ich hatte Angst, dass der Browser die gigantische Datenmenge nicht verarbeiten kann. Ich testete sie also zu Begin nur mit wenigen Fragmenten des Raumes, nachher mit einem Viertel, dann mit dem Ganzen Raum und zum Schluss programmierte ich den Nebenraum dazu. Und siehe da! Der Browser ist zu Meisterleistungen fähig und das visuelle Spektakel war vollendet. Mit Tränen in den Augen stellte ich fest: Da fehlt noch was!!
Sound
Den gesamten Sound produzierte ich mit Garage Band. Ich klickte mich durch unzählige Synthesizer, änderte sie ab und verfiel den elektronischen Klängen. Ich wusste nicht, dass ich so ein mächtiges Tool auf meinem PC vorinstalliert hatte. Dementsprechend ‚verlöffelte’ ich bei dieser Arbeit mit Abstand am meisten Zeit. Aber diese Zeit war nötig und das Resultat lässt sich blicken. Ich weiss nicht welcher Moment mich am meisten berührt. Das explosive öffnen der Türen, den sanften Ritt auf das Dach mit anschliessendem ‚Air Bell’ Solo oder das Finale wo nur noch ein einsames Klavier den Erfolg des Users musikalisch untermalt, welches sich plötzlich verzerrt und in einem Nebel aus Klängen versinkt.
Das Timing der Musik stellte ich sicher, indem ich die Animationen der Website zuerst mit dem Handy abfilmte und nachher in Garage Band entsprechend komponierte.
Die Emotionalität der Musik soll den Verlauf des Rätsels wiederspiegeln. Der Synthesizer wird im Nebenraum in Cis gespielt. Er soll eine bedrückende Stimmung hervorrufen. Nachdem der User aber entkommen ist, wechselt die Tonart zu C-Dur und die Musik versöhnt sich mit dem siegreichen Spieler.
Reflexion
Am meisten würde ich meinen Workflow kritisieren. Mit über 20'000 Zeilen Code wurde das Projekt sehr schnell unübersichtlich. Zwar kommentierte ich die wichtigsten Abschnitte mithilfe von Titeln, welche ich über das Suchfenster schnell finden konnte. Jedoch hätte ich viel mehr von diesen einbauen sollen. Auch das Javascrpit ist sehr unübersichtlich. Es würde sich niemand in diesem Irrgarten aus Code zurechtfinden, inklusive mir in einem halben Jahr. Ausserdem ist das Projekt unnötig gross. Ich hätte von Anfang an mit Mixins arbeiten sollen. Eine Funktion von A-Frame, die es erlaubt, Objekte zusammenzufassen. Leider kannte ich diese Funktion nicht von Anfang an. Ich hätte locker 5'000 Zeilen sparen können. Die Zeit, welche ich beim Bau des Raumes und beim komponieren der Musik vertrödelte, war aber notwendig. Da würde ich nichts ändern, da es Teil des kreativen Prozesses war. Ich hätte mich aber zuerst tiefer in die Möglichkeiten einlesen sollen, die A-Frame bietet. Alles in Allem bin ich aber mit meiner Vorgehensweise sehr zufrieden. ‚Leave The Valley’ ist ein Erfolg und ich hoffe, dass ich viele Digezz User zum staunen bringen kann.
Spoiler Alert
-
-
-
-
-
-
-
- Tipp: Steh in das Zentrum des Raumes und befolge die Anweisung des Schriftzugs.
-
-
-
-
-
-
-
-
- Tipp: Die Zahlen (1-4) beziehen sich auf die Reihenfolge, in welcher die Schalter betätigt werden müssen.
-
-
-
-
-
-
-
-
-
-
- Tipp: Klicke zuerst auf das Trapez, nachher auf das Dreieck, dann auf das Quadrat und zum Schluss auf das aus Quadraten bestehende Dreieck.
