»Let’s Frack!«: Step-by-Step-Workshop vom Kölner Newsgame Hackathon.
Foto: Guy Degen
Mit dem HTML5-Game-Editor Construct 2 lassen sich ohne Programmierkenntnisse Spiele entwickeln und auf diverse Plattformen bringen. Linda Kruses Hackathon-Team erstellte damit den Prototyp »Let’s Frack!«. Hier ist ihr Making-of-Bericht:
1 Themen pitchen und Teams bilden
Nach 30 Minuten Vorbreitungszeit hatte jeder Teilnehmer 60 Sekunden Zeit, um seine Spielidee vorzustellen. Danach wurde über die besten Ideen abgestimmt. Die NDR-Journalisten Joachim Seyther und Peter Lissner sowie Seminarleiter Kai Voigtländer von der Akademie für Publizistik schlugen Fracking als Thema vor. Ihr Spiel sollte dem User die Vorgänge beim umstrittenen Bohren nach Gasen und Flüssigkeiten in tiefem Untergrund erklären und die damit einhergehenden Gefahren für Umwelt und Gesundheit aufzeigen. Da mich das Thema interessierte, kam ich als Gamedesignerin in ihr Team. Für die grafische Umsetzung stieß die Multimediadesignerin Thi Binh Minh Nguyen dazu, die ebenfalls für unser Studio the Good Evil arbeitet.
2 Recherche und Konzeption
Vor dem konkreten Gamedesign waren nochmals die Journalisten gefragt: Joachim, Kai und Peter recherchierten verschiedene Fracking-Techniken und deren Vor- und Nachteile. Dann diskutierten wir die potenziell spannendsten Spielszenarien, legten Schlagwörter für die Fracking-Prozesse fest und wählten die Gefahren aus, die wir thematisieren wollten.
Anschließend brachte ich diese Schlagwörter und Themen in einen spielgerechten Handlungskontext und legte in ersten Levelskizzen das Gamedesign an. In der Zwischenzeit machten sich Kai, Peter und Joachim daran, mehr Details über die beim Fracking eingesetzte Flüssigkeit herauszufinden und Studien sowie Anwendungsbeispiele zu recherchieren. Unsere Ergebnisse trugen wir kollaborativ in einem Google-Docs-Ordner zusammen.
3 Die richtige Spielsteuerung für Mobile und Touch finden
Da wir ein Browsergame in HTML5 und JavaScript entwickeln wollten, war es mir wichtig, eine Steuerung zu finden, die sich sowohl für mobile Endgeräte mit Touchscreen als auch für den Desktop eignet. Ich entschied mich für eine One-Button-Mechanik, bei der ein Tap beziehungsweise Mausklick das Game vorantreibt. Weil der Spieler immer die gleiche Geste ausführt, kann er sich leichter auf die vermittelten Inhalte konzentrieren.
Den Fracking-Vorgang brach ich dann auf sieben Ansichten herunter und skizzierte dafür je einen Screen: einen Startbildschirm mit kurzer Erklärung, die Bohrung des Lochs, die Aufsprengung des Bohrlochs, das Mischen der Fracking-Flüssigkeit aus diversen giftigen Chemikalien und Wasser, das Einbringen der Flüssigkeit in den Boden, das Feedback über den Erfolg des Fracking-Vorgangs und die eventuelle Auswirkung auf die Umwelt sowie einen finalen Screen mit der Möglichkeit, erneut zu spielen.
4 Grafik erstellen
Ausgehend von den Skizzen der Level entwarf Minh die visuelle Anmutung von »Let’s Frack!«. Sie wählte eine klare, einfache Ästhetik in Anlehnung an Anleitungen oder Infografiken, um die wesentlichen Elemente zu betonen. In Illustrator legte sie sämtliche Elemente als Vektorgrafiken an und multiplizierte sie zum Schluss noch mit einer Textur.
Dann speicherte sie sie als PNG-Dateien. Um die Zeit optimal zu nutzen, hatte ich schon mal ohne Minhs Grafiken losgelegt und mit gemalten Vierecken gearbeitet. Als Minh die Grafik abgeschlossen hatte, konnte ich sie direkt in Construct 2 importieren und dort weiterverarbeiten.
5 Elemente und Verhalten von »Let’s Frack!« anlegen
Construct 2 hatte ich vor allem wegen des engen Zeitrahmens gewählt. Und wirklich: Vom Aufsetzen des Projekts über das Ansehen der Tutorials bis zur Realisierung des sich in die Erde bohrenden Rohrs dauerte es keine Dreiviertelstunde.
In Construct 2 gibt es pro Spiel mindestens ein Layout, in dem man die Objekte und Grafiken platziert, sowie mindestens ein Event Sheet, das alle logischen Abläufe im Spiel und die Beziehungen der Objekte untereinander verdeutlicht.
Die Engine arbeitet stark ereignisbasiert: Man muss genau überlegen, welches Objekt welche Eigenschaft ausführt und wie es sich zu anderen Objekten und Events verhält.
Ich legte also zunächst für jedes der sieben Ansichten jeweils ein Event Sheet und ein Layout an. Beim schnellen Prototyping hat das den Vorteil, dass es innerhalb der logischen Struktur keine Probleme mit Wechselwirkungen geben kann. Andererseits produziert man so sehr viel Code, und es sieht auch nicht besonders schön aus. Der falsche Ansatz, wollte man ernsthaft ein Game entwickeln. Dann nämlich würde man ein Event Sheet für alle Layouts beziehungsweise eines für die grundlegende Steuerung erstellen und gegebenenfalls noch ein weiteres, um das Menü und alle Prozesse, die sich außerhalb des Game Loops abspielen, zu definieren.
6 Game Loop erstellen und bearbeiten
Im Event Sheet findet man auch den Game Loop, bei Construct 2 heißt er »Every tick«. Der Loop bezeichnet die Schleife, die das Programm x-mal pro Sekunde durchläuft. Bei einem Spiel mit einer Framerate von 60 Bildern pro Sekunde wären das zum Beispiel 60 Mal innerhalb einer Sekunde. Ein One-Button-Game muss bei jedem Game Loop im System abfragen, ob die linke Maustaste schon gedrückt wurde.
Falls ja, resultiert daraus eine visuelle Veränderung: Bei »Let’s Frack!« bohrt sich zum Beispiel das Rohr tiefer in die Erde. So bewegt Move forward 10 pixels das Rohr 10 Pixel weiter nach unten. Damit es sich ausdehnt, statt sich mittig von seiner Ausgangsposition aus zu bewegen, muss man außerdem set width to tapCountPipe*20 eingeben. Durch die globale Variable tapCountPipe wird die Grafik um den Faktor 20 verlängert. Die Parameter definiert man jeweils im entsprechenden Event Sheet. So legte ich für die Maus unter Event Nummer 6 fest, dass bei jedem Loslassen der Maustaste (on Left button released) im System n=1 zur Variable tapCountPipe hinzugefügt wird.
Mit der zweiten wichtigen globalen Variable TapCountPipeMax*26 definierte ich, dass das Spiel nach 26 Klicks beziehungsweise Taps beendet ist, also das Rohr tief genug gebohrt wurde. Ist die maximale Klickzahl erreicht, fährt die Kamera nach oben und springt zum nächsten Event Sheet. Dort findet dann eine leichte Abwandlung dieses Prozesses statt – so lange, bis alle Level einmal durchgespielt sind und der Endbildschirm gezeigt wird.
7 Game exportieren und hochladen
Natürlich ist für das fertige Spiel ein localhost oder ein Webserver erforderlich. Man exportiert das Spiel einfach über »File > Export Project > Web/HTML5 Webseite« und bindet das gesamte Paket, bestehend aus einem »Images«- und/oder »Media«-Ordner, einer »index.html«-Datei und weiteren Skripten oder PNG-Dateien beispielsweise über ein FTP-Programm in den entsprechenden Ordner auf dem Webserver. Das Spiel testen kann man natürlich in Construct 2 selbst über den »Play«-Button in der Menüleiste. Spielbar ist unser grober Prototyp auf http://newsgameshack.thegoodevil.com/fracturing.
Durch die Kürze der Zeit mussten wir leider viele Aspekte an »Let’s Frack!« vernachlässigen. Beispielsweise hatten wir vorgesehen, dass der Spieler seine eigene Fracking-Flüssigkeit mischen kann, was das Spielergebnis beeinflussen sollte. Auch hatten wir zunächst erklärende Zwischengrafiken sowie ein Feedback darüber eingeplant, wie schnell der Spieler die jeweiligen Vorgänge durchgeführt hat. Die Grafiken sind teils nicht animiert, sondern werden nur eingeblendet. Und auch die journalistischen Inhalte müssten durch Experten verifiziert werden. All das möchten wir in einer finalen Spielversion verbessern – der Zeitplan dafür ist allerdings noch offen. Linda Kruse
Linda Kruse ist Gamedesignerin bei the Good Evil in Köln. Eigentlich wollte sie auf dem Newsgames Hackathon einen kleinen, aber runden Prototyp in JavaScript erstellen. Doch warum nicht etwas Neues ausprobieren? Wenn auch das Endergebnis, wie sie meint, noch recht unfertig ist – Construct 2 wird sie sicher wieder nutzen.
