interactive storytelling im web -...

Technische-Hochschule Nürnberg Georg Simon Ohm

Fakultät Elektrotechnik Feinwerktechnik Informationstechnik

Media Engineering

Bachelor Thesis von

Jessica Zaviska

Interactive Storytelling im Web

Erschaffen von Storywelten als experimentelles Spiel

SS 2018

Zaviska Jessica

Elektro-, Feinwerk-, Informationstechnik

Angaben des bzw. der Studierenden:

Name: Vorname: Matrikel-Nr.:

Fakultät: Studiengang:

Sommersemester 2018 Wintersemester

Titel der Abschlussarbeit:

Ich versichere, dass ich die Arbeit selbständig verfasst, nicht anderweitig für Prüfungszwecke vorgelegt, alle benutzten Quellen und

Hilfsmittel angegeben sowie wörtliche und sinngemäße Zitate als solche gekennzeichnet habe.

Ort, Datum, Unterschrift Studierende/Studierender

Die Entscheidung über die vollständige oder auszugsweise Veröffentlichung der Abschlussarbeit liegt grundsätzlich erst einmal allein in der Zuständigkeit der/des studentischen Verfasserin/Verfassers. Nach dem Urheberrechtsgesetz (UrhG) erwirbt die Verfasserin/der Ver- fasser einer Abschlussarbeit mit Anfertigung ihrer/seiner Arbeit das alleinige Urheberrecht und grundsätzlich auch die hieraus resultieren- den Nutzungsrechte wie z.B. Erstveröffentlichung (§ 12 UrhG), Verbreitung (§ 17 UrhG), Vervielfältigung (§ 16 UrhG), Online-Nutzung usw., also alle Rechte, die die nicht-kommerzielle oder kommerzielle Verwertung betreffen.

Die Hochschule und deren Beschäftigte werden Abschlussarbeiten oder Teile davon nicht ohne Zustimmung der/des studentischen Verfasserin/Verfassers veröffentlichen, insbesondere nicht öffentlich zugänglich in die Bibliothek der Hochschule einstellen.

Hiermit

genehmige ich, wenn und soweit keine entgegenstehenden Vereinbarungen mit Dritten getroffen worden sind,

genehmige ich nicht,

dass die oben genannte Abschlussarbeit durch die Technische Hochschule Nürnberg Georg Simon Ohm, ggf. nach Ablauf einer mittels eines auf der Abschlussarbeit aufgebrachten Sperrvermerks kenntlich gemachten Sperrfrist

von Jahren (0 - 5 Jahren ab Datum der Abgabe der Arbeit),

der Öffentlichkeit zugänglich gemacht wird. Im Falle der Genehmigung erfolgt diese unwiderruflich; hierzu wird der Abschlussarbeit ein Exemplar im digitalisierten PDF-Format auf einem Datenträger beigefügt. Bestimmungen der jeweils geltenden Studien- und Prüfungs- ordnung über Art und Umfang der im Rahmen der Arbeit abzugebenden Exemplare und Materialien werden hierdurch nicht berührt.

Ort, Datum, Unterschrift Studierende/Studierender

DokID: SB_0050_FO_Erklärung_zur_Veröffentlichung_der_Abschlussarbeit_prüfungsrechtliche Erklärung_public Vers. 1, 31.03.2017, A. Härtel (4.SB) 1/1

2760301

Media Engineering

Prüfungsrechtliche Erklärung der/des Studierenden

Interactive Storytelling im Web: Erschaffen von Storywelten als experimentelles Spiel

Erklärung zur Veröffentlichung der vorstehend bezeichneten Abschlussarbeit

Inhaltsverzeichnis

Abkürzungsverzeichnis................................................................................................................ 1

1 Einleitung ............................................................................................................................. 3

1.1 Zielsetzung und Schwerpunkt der Arbeit......................................................................... 3

1.2 Gliederung der Arbeit ..................................................................................................... 4

2 Storytelling........................................................................................................................... 6

2.1 Was ist Storytelling? ....................................................................................................... 6

2.2 Wie Geschichten wirken ................................................................................................. 7

2.3 Visual Storytelling .......................................................................................................... 8

3 Formen und Methoden: Der Weg zu einer erfolgreichen Geschichte .............................. 10

3.1 Osbornes Checkliste als Methode für eine neue Story ................................................... 10

3.2 Der Plot: Wahl eines Urthemas oder Konflikts .............................................................. 10

3.3 Archetypen nach Carl Gustav Jung ............................................................................... 13

3.4 Spannung und Aufmerksamkeit .................................................................................... 14

3.5 Dramaturgiemodelle als Mustervorlage ......................................................................... 15

3.5.1 Drei Akte nach Aristoteles .................................................................................... 16

3.5.2 Der Heros in tausend Gestalten nach Joseph Campbell .......................................... 16

3.5.3 Die Heldenreise nach Christopher Vogler .............................................................. 18

4 Games und Interactive Storys ........................................................................................... 21

4.1 Cut Scenes .................................................................................................................... 21

4.2 Erzählstrukturen in Games ............................................................................................ 21

4.3 Der Flow-Zustand ......................................................................................................... 24

4.4 Storyworlds .................................................................................................................. 25

5 Projektplanung eines interaktiven Webspiels................................................................... 26

5.1 Meilensteine ................................................................................................................. 26

5.2 Requirements ............................................................................................................... 27

5.2.1 Anforderungen an das Webspiel ............................................................................ 27

5.2.2 Wahl der Technologien ......................................................................................... 27

5.2.3 Webinterface: Use Cases ....................................................................................... 28

5.2.4 Webinterface: Seitenstruktur ................................................................................. 28

5.2.5 Webinterface: Mockups ........................................................................................ 29

5.3 Link zum Webspiel ....................................................................................................... 31

6 Konzeption ......................................................................................................................... 32

6.1 Main Story und Storywelten ......................................................................................... 32

6.2 Charaktere .................................................................................................................... 37

6.3 Gameplay ..................................................................................................................... 39

6.4 IST-Zustand: Gamestory ............................................................................................... 42

6.5 IST-Zustand: Erzählstruktur.......................................................................................... 46

7 Design ................................................................................................................................. 49

7.1 PNG Sprites.................................................................................................................. 49

7.2 Buttons ......................................................................................................................... 50

7.3 Character Design .......................................................................................................... 51

7.3.1 Sprite Shape Template .......................................................................................... 51

7.3.2 Damian Black ....................................................................................................... 52

7.3.3 Tamo Black .......................................................................................................... 56

7.3.4 Darconos .............................................................................................................. 56

7.3.5 Sir Lorcan ............................................................................................................. 57

7.3.6 Tumbras ............................................................................................................... 59

7.3.7 Sir Kian ................................................................................................................ 60

7.4 Bullets und Items .......................................................................................................... 60

7.5 Weapon Design ............................................................................................................ 61

7.6 Dialog Bilder ................................................................................................................ 62

7.7 Luftschiff ..................................................................................................................... 63

7.8 Level Design ................................................................................................................ 64

7.9 Tiled Map Editor: Tiles und tilemaps ............................................................................ 72

7.10 Cut Scenes ................................................................................................................ 74

7.11 Audio ....................................................................................................................... 77

8 Implementierung ............................................................................................................... 80

8.1 Einrichtung des Projekts ............................................................................................... 80

8.2 Ordner Struktur des Phaser Projekts .............................................................................. 82

8.3 Game Engine: Phaser .................................................................................................... 82

8.3.1 Game States .......................................................................................................... 83

8.3.2 Dialogsystem ........................................................................................................ 87

8.3.3 Responsive Webdesign: Game Scaling .................................................................. 90

8.3.4 Navigation Funktionalitäten .................................................................................. 93

8.3.5 Game Objekte ....................................................................................................... 94

8.3.6 Tilemaps ............................................................................................................... 98

8.3.7 Physic Engine: Arcade Physics ........................................................................... 100

8.4 Kampfsystem ............................................................................................................. 101

8.4.1 Lebenspunkte ...................................................................................................... 101

8.4.2 Angriff ................................................................................................................ 101

8.5 Performance Optimierung ........................................................................................... 104

8.5.1 PNGGauntlet ...................................................................................................... 104

8.5.2 Minifizierung und Konkatenation ........................................................................ 104

8.6 Webserver .................................................................................................................. 104

8.6.1 Lokaler Webserver .............................................................................................. 104

8.6.2 Live Webserver................................................................................................... 104

9 Zusammenfassung ........................................................................................................... 105

9.1 Fazit ........................................................................................................................... 105

9.2 Ausblick ..................................................................................................................... 107

Literaturverzeichnis ................................................................................................................ 108

Abbildungsverzeichnis ............................................................................................................. 110

Tabellenverzeichnis.................................................................................................................. 113

Anhang ..................................................................................................................................... 114

»I’ll be a story in your head.

But that’s ok.

We’re all stories, in the end.

Just make it a good one, eh?«

(The Eleventh Doctor, Season 5, Episode 13)

Abkürzungsverzeichnis 1

Abkürzungsverzeichnis

PNG Portable Network Graphics

ppi pixels per inch

px Pixel

IDE Integrierte Entwicklungsumgebung

HTML Hypertext Markup Language

CSS Cascading Style Sheets

JSON JavaScript Object Notation

ECMA European Computer Manufacturers Association

npm Node Package Manager

2 Abkürzungsverzeichnis

Einleitung 3

1 Einleitung

»Wir verstehen alles im menschlichen Leben durch Geschichten.« (Jean-Paul Sartre)

Bereits Kindern werden Geschichten erzählt, um sie einerseits zu unterhalten, andererseits auch die

Welt, das Leben sowie komplexe Sachverhalte zu erklären. Für Erwachsene werden allerdings abstrakte

Themen sowie die Welt nicht unbedingt auf Anhieb verständlicher. Oft passiert es, dass beim nüchternen Aufzählen bloßer Daten und Fakten die Aufmerksamkeit, die Konzentration und das Erinnerungsver-

mögen des Rezipienten sinkt. Dagegen bleiben gut erzählte Geschichten lange in Erinnerung und werden auch gerne weitererzählt. Denn schon immer erreichen, faszinieren, berühren und fesseln uns gute Ge-

schichten, aus denen wir auch lernen können. Nicht ohne Grund können durch die Imagination von

Geschichten, Methaphern, Aphorismen, Allegorien oder Bilder sowohl Informationen im Allgemeinen als auch komplexe Sachverhalte anschaulicher sowie verständlicher vermittelt werden. In Anbetracht

wie viele Unterhaltsmedien stets konsumiert werden, scheint auch der unlöschbare Durst nach guten

Erzählungen wie z. B. in Büchern, Filmen oder in Computerspielen gegenwärtig zu sein. Die Kunst des Erzählens bzw. Storytellings sollte deshalb als Erzählmethode in verschiedenen Einsatzgebieten, wie

z. B. in Bildung, Kommunikation, Journalismus, Marketing oder in den Unterhaltungsmedien nicht unterschätzt werden. Denn Geschichten können Menschen bewegen und erreichen, indem sie vom

schwer erreichbaren Gipel der Abstraktion zum leicht zugänglichen Tal der Konkretisierung hinabstei-

gen.

Interactive Storytelling

In den digitalen Medien gewinnt insbesondere Interactive Storytelling immer mehr an Bedeutung. Diese Art des Geschichtenerzählens ermöglicht dem Rezipienten, im Vergleich zu linearen Geschichten, mit

einer Story interagieren zu können. So können Reportagen oder sogar ganze Storywelten interaktiv er-

lebt, entdeckt oder durch eigene Entscheidungen beeinflusst werden. Dabei findet sich Storytelling in multimedialen Medienformaten, wie beispielsweise im Internet oder in Games, sowohl im frei erfunde-

nen als auch im non-fiktionalen Kontext wieder.

1.1 Zielsetzung und Schwerpunkt der Arbeit Diese Arbeit befasst sich im theoretischen Teil mit der Geschichte, Wirkung sowie Methoden des Story-tellings und legt dabei den Schwerpunkt auf das Visual und Interactive Storytelling in den digitalen

Medien sowie auf Games mit interaktiven Storys und Storywelten. Da der Fokus auf die Erschaffung

von fiktionalen Geschichten und Games liegt, werden andere Einsatzgebiete, wie z. B. Storytelling im Marketing oder in der Pädagogik nicht näher betrachtet. Der praktische Teil dieser Arbeit dokumentiert

die eigenständige Umsetzung eines interaktiven Webspiels, welches ein Storytelling-Game-Experiment

darstellen soll. Dabei liegt der Schwerpunkt des Gameplays auf das Storytelling, welches auf Basis der gewonnenen Erkenntnisse und Methoden der theoretischen Analyse beruht. Die genauen Ziele dieses

Webspiels sind: Planung bzw. Anforderungsklärung, Konzeption einer eigenen Geschichte mit Anpas-sung auf die Konzeption des Gameplays, Design und Implementierung. Nicht zu den Schwerpunkten

dieser Arbeit gehört allerdings die Musik. Aufgrund dessen werden die Musikstücke und Soundeffekte

nicht selbstständig erstellt. Dennoch werden sie von externen Quellen als unterstützendes Mittel bewusst ausgewählt, um ein immersives Spielerlebnis ermöglichen zu können. Auf diese Weise können Stim-

mung, Emotion und auditives Feedback transportiert werden.

Fragestellungen

Aus den bereits beschriebenen Zielen leiten sich folgende zentrale Fragestellungen ab:

• Was ist und wie wirkt Storytelling?

4 Einleitung

• Was ist Visual und Interactive Storytelling in den digitalen Medien? • Was ist das Geheimnis neuer Geschichten? Gibt es ein Erfolgsrezept für gute Geschichten? • Welche Methoden lehrt uns die Dramaturgie und wie können diese auf das Storytelling ange-

wendet werden? • Welche Erzählstrukturen in Games gibt es, um eine interaktive Gamestory erschaffen zu kön-

nen? • Welchen Zweck haben Storywelten in Games und wie können sie erschaffen werden? • Kann Storytelling als Methode für interaktive Gamestorys angwendet werden? (→ Diese Frage

wird im praktischen Teil als Experiment empirisch untersucht, indem das Webspiel mit dieser Methodik konzipiert wird.)

1.2 Gliederung der Arbeit Die vorliegende Bachelorarbeit gliedert sich in zwei Hauptteile, die aus einem theoretischen (Kap. 2 bis 4) und einem praktischen (Kap. 5 bis 8) Teil besteht. Die einzelnen Kapitel bauen inhaltlich aufeinander

auf, so dass der theoretische Teil eine Grundlage für die Konzeption des praktischen Teils darstellt.

Kapitel 2

Kapitel 2 beginnt mit einer Definition über den Begriff Storytelling und stellt anschließend einen histo-

rischen Bezug zu mythologischen sowie antiken Erzählungen her, um die Entwicklung des Geschichten-erzählens zu untersuchen. Desweiteren widmet sich Kapitel 2 im psycholigischen und neurowissen-

schaftlichen Kontext mit den Fragen, welche Funktionen und welche Wirkung Geschichten auf uns haben. Abschließend werden die Schwerpunkthemen Visual Storytelling und Interaktivität in digitalen

Medien erläutert.

Kapitel 3

Kernelement des dritten Kapitels ist die Untersuchung von Methoden und Mustervorlagen, die zu einer

erfolgreichen Geschichte führen. Als Methoden werden Osbornes Checkliste als eine Kreativtechnik für neue Storys, der Plot zur Wahl eines Themas sowie Jungs Archetypen für die wichtigsten Charakter-

figuren einer Story herangezogen. Zudem wird sich ergänzend mit Methoden für Spannung und Auf-

merksamkeit auseinandergesetzt. In Kapitel 3 werden außerdem weitere Mustervorlagen einer Story aus dem Themengebiet der Dramaturgie analysiert, um Kenntnisse über die Grundstruktur guter Geschich-

ten zu gewinnen. Diesbezüglich werden als Dramaturgiemodelle Aristoteles Theorien zur Dramaturgie,

Campbells Mythenforschung und Voglers Heldenreise sowie Archetypen untersucht.

Kapitel 4

In Kapitel 4 stehen Games und interaktive Storys im Fokus. Es werden die theoretischen Grundlagen für interaktive Erzählstrukturen, Cut Scenes, die Erreichung des Flow-Zustands und die Erschaffung

von Storywelten in Games gelegt.

Kapitel 5

Ab Kapitel 5 beginnt die Dokumentation über den praktischen Teil dieser Arbeit. Zur Planung eines

interaktiven Webspiels werden in diesem Kapitel die Meilensteine gelegt, die Technologien bestimmt und alle weiteren Anforderungen für das Webspiel und die Umsetzung geklärt.

Kapitel 6

Kapitel 6 widmet sich der Konzeption einer neuen bzw. eigenen Geschichte und einer dazugehörigen Storywelt. Für die Storyentwicklung und die Erschaffung von Charakteren werden Methoden aus Kapi-

tel 3 angewendet, die miteinander ergänzend kombiniert werden. Auf der Basis von Kapitel 4 wird der

Einleitung 5

Entwicklungsprozess von der Story bis zur Gamestory dargestellt, die die Konzeption einer interaktiven

Erzählstrukur für die Ausführung eines Gameplays beinhaltet.

Kapitel 7

Der Designprozess für die visuelle Umsetzung des Webspiels wird in Kapitel 7 dokumentiert. Es wird

die Herangehensweise der erstellten Grafiken, wie z. B. für das Character, Level oder Weapon Design, und der umgesetzten Videos für die Cut Scenes aufgelistet sowie beschrieben. Die Quellennachweise

der verwendeten Audio-Dateien werden in diesem Kapitel ebenfalls mit Bezug zum Verwendungszweck

angegeben.

Kapitel 8

Kapitel 8 dokumentiert alle Implementierungsschritte des Webspiels. Dazu zählen die Einrichtung des Projekts, die Programmierung des Spiels, die anschließende Perfomance Optimierung sowie das Ent-

wickeln auf dem lokalen Webserver und die Vorbereitungen für den live Websever.

6 Storytelling

2 Storytelling

2.1 Was ist Storytelling? Der Begriff Storytelling ist eine Zusammensetzung aus den englischen Wörtern Story und telling und wird mit Geschichtenerzählen übersetzt. Geschichten dienen nicht nur zur Unterhaltung, sondern sie

können auch unter anderem Wissen, Werte, Moral und Lebenserfahrung vermitteln. Beispielsweise in Form von »Erfahrungen, Erlebnissen, Überlieferungen, Ideen und Visionen als Grundlage menschlicher

Kommunikation«, sowie »Wissen, Geschichte und Regeln gesellschaftlichen Zusammenhalts«. ([2], S.

7) Storytelling kann zudem Lösungen von Problemen veranschaulichen, zum Nachdenken anregen und motivierend sein.

Storytelling als Begleiter der Menschheitsgeschichte

Storytelling ist laut Tobias Dennehy »ein Gefühl, […] Emotion, […] Erfahrung, […] Empathie. Ein

immer dagewesener Begleiter der Menschheitsgeschichte.«. ([2], S. 61) Storytelling ist keine neue Er-

findung, denn bereits mit visuellen Mitteln wurden schon immer Geschichten als »Methode, um gesam-meltes Wissen an nachfolgende Generationen zu überliefern« ([2], S. 1) erzählt. Heute werden Ge-

schichten nur bewusster wahrgenommen und detaillierter analysiert. [2] Die älteste Zeichnung der Welt (rote Scheibe von La Castillo) ist mind. 40.800 Jahre alt. Dieses Höhlengemälde hat nach Paläonthropo-

logen zwei Deutungen. Entweder soll es heilige Stätten markieren oder künstlerisch interpretiert, eine

Erzählung mittels Symbolsprache und Traumdeutung vermitteln. [5]

Mythologie als erfolgreiches Erzählkonzept

Bereits die Mythologie (altgriechisch mythous und lateinisch mythus: »Rede« oder »Laut«) war weltweit

ein erfolgreiches Konzept, um uns die Welt zu erklären. Es handelt sich dabei um einer der wirkungs-vollsten Erzählformen. Mythen wecken »unsere Neugierde und unser Interesse, mehr über uns selbst zu

erfahren, sowie unsere Sehnsucht, Sinnhaftigkeit in unserem Leben zu entdecken«. ([5], S. 21) Sie ver-mitteln darüber hinaus auch kulturelle Normen oder Werte. Noch heute werden traditionell in prägenden

Erzählkulturen, wie beispielsweise in Indien, Mythen der nächsten Generation weitererzählt. [5]

Antike Erzählungen: Ethos, Pathos und Logos

Auch in der Antike wurden griechische Mythen erzählt und gepflegt. Jedoch war der Wahrheitsanspruch

der Geschichten sehr hoch, weshalb die griechischen Scholastiker diese Erzählform kritisierten. Mythos war für die Vorsokratiker der Antike das Gegenteil von Logos. Deshalb haben sich die Gelehrten vor-

allem mit der Rede befasst. Die Rede wurde durch Aristoteles (384 – 322 v. Chr.) mit Ethos, Pathos und

Logos definiert. Ethos beschreibt die Glaubwürdigkeit einer guten Rede. Die Rede soll demnach allge-meingültige Werte vertreten. Mit Pathos soll die Rede mit Emotionen überzeugen. Durch Emotionen

wird der Rezipient inspiriert und sein Vorstellungsvermögen kann angeregt werden. Das letzte wichtige Element einer guten Rede ist Logos. Denn eine Rede braucht eine sinnvolle Struktur. Wichtig dabei ist

ein logischer Aufbau von Fakten, damit der Rezipient besser folgen und sich die Informationen merken

kann. Die Prinzipien Ethos, Pathos und Logos der Antike können nicht nur einer guten Rede dienlich sein, sondern auch für ein überzeugendes Storytelling. [5]

Wir alle sind Storyteller

Im Prinzip ist jeder von uns ein Geschichtenerzähler. Alltäglich definieren sich Menschen durch Ge-

schichten und bauen darauf ihre eigene Identität auf. Wir erzählen nicht nur Geschichten, wir interessie-

ren uns auch für fremde Lebensgeschichten und wollen daran teilhaben. Selbst bei einer Bewerbung

Storytelling 7

sind ein Lebenslauf und das Bewerbungsgespräch eine Art Storytelling, indem wir über uns selbst erzäh-

len. [2]

Einsatzgebiete des Storytellings

Storytelling begegnet uns alltäglich, sobald wir miteinander kommunizieren. Durch die bewusste Analy-

se des Geschichtenerzählens, wird heutzutage Storytelling als Methode in verschiedene Einsatzorte an-gewendet. Einsatzgebiete sind z. B. [2]: Unterhaltungsmedien (TV, Film, Game, Theater oder Printme-

dien), Pädagogik, Change-Management, Human-Resources, Vertrieb, Eventbereich, Museumspädago-

gik, Public Relations oder Marketing. Jedes Einsatzgebiet nutzt Storytelling auf ihre eigene Weise, um ihr Ziel zu erreichen. Diese Bachelorarbeit beschäftigt sich allerdings nur mit dem Storytelling in den

Unterhaltungsmedien.

2.2 Wie Geschichten wirken Zu unserer alltäglichen Kommunikation gehört das Erzählen von Geschichten dazu. Doch wie wirken Geschichten im menschlichen Gehirn? Welche Emotionen werden dabei ausgelöst? Und warum sind

Geschichten effektiver als eine reine Aufzählung von Daten und Fakten?

Warum unser Gehirn Geschichten besser verarbeiten kann

Durch Erzählungen werden im Gehirn Daten und Fakten verarbeitet und miteinander verknüpft. Das

Teilen unserer Gedanken, Ideen oder Sorgen bewirkt in uns ein befreites Gefühl, so dass wir uns danach

besser, verstanden, getröstet oder bekräftigt fühlen. Bei Erzählungen wird im menschlichen Gehirn der Bereich des limbischen Systems aktiviert. Dabei stellt das limbische System eine Verbindung zwischen

Erinnerungen und Emotionen her und erweckt zudem unsere Aufmerksamkeit sowie Vorstellungskraft. Es wird angenommen, dass unser Gehirn Geschichten als autoassoziative Muster speichert und aufruft.

Diese Muster beinhalten immer wieder vorkommende, gemeinsame Elemente und werden sowohl un-

verändert als auch strukturiert gespeichert. Aus diesen Gründen kann das Gehirn Informationen in Form von Geschichten besser und sehr effektiv verarbeiten. [2]

Emotionen als effektive Speicherung von Erfahrungen

Wer kennt es nicht – wenn wir schnelle Entscheidungen treffen müssen, entscheidet letztendlich unser

Bauchgefühl. Denn jede Entscheidung ist davon abhängig, welche Erfahrungen wir bisher gemacht

haben und welche Emotionen wir dabei fühlen. Unsere Emotionen sind schließlich gespeicherte Erfah-rungen. Auch Geschichten rufen Emotionen hervor. [2] Wir können uns deshalb Geschichten besser

merken. Laut dem Harvard-Professor der kognitiven Psychologie Jerome Brune können wir uns an Sto-rys sogar 22-mal besser erinnern. [5]

Funktionen von Geschichten

Erzählungen haben zwei Funktionen. Zum einen erwecken sie Emotionen und zum anderen können sie einen Lerneffekt erzielen. Denn durch Geschichten werden komplexe Sachverhalte verständlicher ver-

mittelt. [2]

Geschichten als mentale Simulationsräume

Aus der Sicht der Psychologie werden »Geschichten als mentale Simulationsräume und geistige Experi-

mentierfelder interpretiert«. ([5], S. 28) Wir können jederzeit geistige Handlungen erfahren, ohne sie dabei in der Realität zu erleben. Unsere Gedanken können deswegen Erfahrungen simulieren. Damit

Geschichten auf uns wirken können, brauchen wir eine Verbindung zur Hauptfigur bzw. zum Helden

einer Story. Mit dieser Person müssen wir uns identifizieren können, die für uns in unserem geistigen Simulationsraum jedes Abenteuer mit ihren Höhen und Tiefen durchlebt. [5]

8 Storytelling

Psychologische Wahrnehmung von Geschichten

In der kognitiven Psychologie werden die Funktionen von Geschichten in drei Bereiche unterteilt: Er-fahrungsabgleich, Stellvertreterlernen und Kontextualisierung. [5]

• Erfahrungsabgleich: Wenn wir etwas selbst schon erlebt haben, können wir Erzählungen

besser nachvollziehen und für andere mitfühlen. Unsere eigenen Erfahrungen werden mit Ge-

schichten stets verglichen. Zudem lernen wir darüber hinaus auch noch neue Möglichkeiten kennen, wie wir mit Ereignissen alternativ umgehen können.

• Stellvertreterlernen: Storys können uns neue Geschichten erzählen, die wir noch nicht selbst

erlebt haben. Geschichten sind allerdings auch nützlich, um uns an Erfahrungen teilhaben zu lassen, die wir persönlich nicht erfahren wollen. Wie beispielsweise Geschichten über Angst

oder Tod. Wir müssen diese Erfahrungen nicht selbst erleben, um daraus zu lernen. Wir lernen

in unserem mentalen Simulationsraum durch die Hauptfigur der Geschichte, welcher für uns alles stellvertretend durchlebt.

• Kontextualisierung: Während wir eine Geschichte erzählt bekommen, versuchen wir sie mit

Hilfe von Mustern zu erkennen und zu verstehen. Unsere eigenen Bedürfnisse und Ziele werden mit der Story im Zusammenhang gebracht. Wir erkennen die Hindernisse, die es dem Helden in

der Geschichte erschweren sein Ziel zu erreichen und suchen gleichzeitig nach Lösungen.

Warum wir uns Geschichten besser merken können

Laut Neuroforscher ist die Aktivierung der Großrinde, die Ausschüttung von Botenstoffen und die Syn-

chronisierung von Gehirnen dafür verantwortlich, warum wir uns Informationen in Form von Geschich-ten besser merken können. [5]

• Aktivierung der Großhirnrinde: Während wir reine Daten und Fakten hören, werden nur die

Hirnbereiche der Spracherkennung (Broca- und Wernicke-Areale) eingeschaltet. Beim Hören

einer Geschichte ist zudem auch noch die Inselrinde (cortex insula) aktiv. Die Inselrinde ist für

das assoziative Denken, den Geschmacks- und Geruchssinn, die emotionale Bewertung von Schmerz, die Fähigkeit von Emphatie und emotionale Empfindungen zuständig. Es werden hier-

bei dieselben Areale aktiviert, als würden wir die erzählte Geschichte selbst erleben.

• Ausschüttung von Botenstoffen: Durch die Botenstoffe machen sich die Geschichten auch im

Körper bemerkbar. Eine Geschichte kann uns zum Beispiel zum Weinen bringen oder unser

Herz schneller schlagen lassen.

• Synchronisierung von Gehirnen: Geschichten können Erzähler und Rezipienten miteinander

verbinden. Denn während dem Geschichtenerzählen sind, sowohl beim Sender als auch beim

Empfänger, die gleichen Hirnareale aktiviert.1 Uri Hasson führte dafür zahlreiche Experimente

durch, um dies nachzuweisen. Demzufolge ist es möglich »gezielt Gehirnregionen beim Zuhö-rer zu aktivieren und damit zu erreichen, dass ein Rezipient diese Ideen und Erfahrungen als

seine eigenen wahrnimmt«. [5]

2.3 Visual Storytelling Beim Visual Storytelling werden Geschichten visuell durch Bilder erzählt oder ergänzt. Bilder fördern insbesondere die Merkfähigkeit von Inhalten, da sie Emotionen hervorrufen. [2] Wie bereits in Kapitel

2.2 beschrieben wurde, sind Emotionen »gespeicherte Erfahrungen« [2], weswegen wir uns Geschichten

besser merken können.

1 Hassons These der Hirn-Koppelung (brain-to-brain coupling).

Storytelling 9

Die Bereiche »Comics«, »Scrollytelling«, »Videos und Filme«, »Präsentationen«, »Multimediales

Erzählen«2, »Augmented Reality«3, »Gamification«4, »Crossmediales Erzählen«5 und »Bildunterstütz-

tes Erzählen«6 gehören zu den Methoden und Erzählweisen des Visual Storytellings. Dabei werden diese Erzählformen auch miteinander vermischt, weshalb es keine Grenzen gibt. [2] Einer der neuen

Visual Storytelling Formaten des Webs ist z. B. das Scrollytelling.

Scrollytelling

Scrollytelling ist eine digitale Erzählform des Visual Storytellings, die auch unter den Begriffen Scrolly-

telling- oder Multimedia-Reportage geläufig ist. Das Kunstwort Scrollytelling ist eine Wortkombination aus Storytelling und Scrollen. Durch das vertikale oder horizontale Scrollen einer Website wird eine

multimediale Story mittels Bilder, Töne und Videos erzählt. Sie kann auch in manchen Fällen interaktiv erlebt werden. [2] Zu den ersten aufwendig erstellten Scrollytelling-Reportagen gehört Snow Fall: The

Avalanche at Tunnel Creekl [30], die von der New York Times 2012 veröffentlicht wurde. Ein weiteres

Beispiel für eine Multimedia-Reportage ist die 20 minütige, interaktive Webdokumentation Bear 71 [31], die ebenfalls im Jahr 2012 vom Filmproduzent National Film Board of Canada (NFB) publiziert

wurde. Diese Art der Erzählform wird allerdings nicht nur für Reportagen genutzt, sie findet sich auch

in anderen Bereichen wieder. Beispielsweise zeigt die Werbekampagne The hybrid graphic novel [32] von Peugeot HYbrid4 ein visuelles Scrollytelling in Form einer Graphic Novel. Die Website der Agentur

Fluger Design [33] nutzt ebenfalls Scrollytelling als Methode, um die Seite durchs Scrollen ab-wechslungsreich mit einem animierten Flugzeug sowie anderen Grafik- und Fotoelementen betrachten

zu können. Die Kurzgeschichte The Boat [34] von Lam Le ist ein Beispiel für eine rein illustrierte

Scrollytelling Variante. Scrollytelling findet sich sowohl in Multimedia-Reportagen als auch in der Wer-bung, in illustrierten Geschichten oder in anderen Webpräsenzen wieder. Sie ist eine interessante Erzähl-

form, um eine Website animiert und interaktiv erleben zu können.

Interaktivität in digitalen Medien

In den digitalen Medien gewinnt vorallem die Interaktivität immer mehr an Bedeutung. Simon Sturm

ist der Meinung, dass die digitalen Medien »teilweise fundamental die Art und Weise, wie wir Nachrich-ten aufnehmen und verarbeiten« verändern. ([4], S. 28)

Es gibt zwei Arten von Interaktivität, die technische und soziale Interaktivität. Die technische Interakti-

vität bezeichnet die Interaktion zwischen Menschen und Computer, wie z. B. das Bedienen von Be-nutzeroberflächen einer Website. Bei der sozialen Interaktivtät handelt es sich um die Kommunikation

zwischen Nutzern, wie beispielsweise über einen Chat oder durch soziale Netzwerke. [4]

2 Multimediales Erzählen: Verwendung von Text, Bild, Ton, Videos und Hyperlinks. 3 Augmented Reality (erweiterte Realität): Als »Holodeck des Storytellings« wird die Realität virtuell durch eine VR-Brille erweitert. 4 Gamification: Anwendung von Spielelementen im spielfremden Zusammenhang, um Motivationssteigerung zu erzielen. 5 Crossmediales Erzählen: Teile von Geschichten werden medienübergreifend über verschiedene Kanäle miteinander zu einer großen Story verbunden. 6 Bildunterstütztes Erzählen: Anwendung in Social-Media-Plattformen wie Instagram oder Facebook.

https://en.wikipedia.org/wiki/National_Film_Board_of_Canada

10 Formen und Methoden: Der Weg zu einer erfolgreichen Geschichte


Es gibt eigentlich kaum neue Geschichten. Erzählungen sind bloß »Varianten überzeitlicher und uni-

verseller Themen«, die gemeinsame Muster besitzen. Der Schlüssel zu neuen Geschichten ist im Prinzip das neue Interpretieren von »gewohnte Muster und Regeln« bzw. von alten Vorlagen. ([1], S. 32) Die

Frage ist nur, wie können wir eine gute Story erzählen, die die Aufmerksamkeit des Rezipienten fesseln kann? Für das Storytelling kann die Anwendung von Dramaturgiemodellen hilfreich sein. Welche Me-

thoden und Formen es gibt, um eine erfolgreiche Story zu kreieren, werden in diesem Kapitel näher

beschrieben.

3.1 Osbornes Checkliste als Methode für eine neue Story Alex Faickney Osborne (Erfinder des Brainstormings) hat eine Methode entwickelt, wie wir eine bereits existierende Story verändern und somit daraus eine originelle Geschichte erschaffen können. Es handelt

sich dabei um Osbornes »manipulativer Verben«, die das Bilden neuer Assoziationsketten unterstützen

soll. Zu den manipulativen Verben mit möglichen Fragestellungen (zusammengefasst von Werner T. Fuchs ([1], S. 33 f.)) gehören:

• Anders verwenden: »Wie kann ich die Idee anders verwenden? Für andere Personen, an ande-ren Orten, zu anderen Zeiten?«

• Anpassen: »Was ist ähnlich? Gibt es Parallelbeispiele? Was passiert, wenn sich eine Figur fügt, statt Widerstand zu leisten? Was kann nachgeahmt werden?«

• Verändern: »Kann ich Bedeutung, Farbe, Form, Aussehen, Zweck, Gefühl, Geruch, Bewe-gung, Klang, Schrift, Komposition, Grafik, Personeninventar oder die Kulisse ändern?«

• Vergrößern: »Was hinzufügen? […] Was lasse ich überproportional und in welche Richtung wachsen?«

• Verkleinern: »Was wegnehmen? Komprimieren, miniaturisieren, abwerten, untertreiben ab-schwächen, aufspalten, niedriger, kürzer, kleiner, leichter, windschlüpfriger machen?«

• Ersetzen: »Was oder wen kann ich ersetzen? Materialien, Personen, Orte, Räumlichkeiten, Be-dingungen, Positionen, Energiequellen, Handlungen, Zugänge, Beschreibungen, Dialoge, Be-standteile?«

• Umstellen: »Kann ich […] Ereignisse und Akte umordnen? […] Ende und Anfang, Ursache und Wirkung vertauschen?«

• Umkehren: »Positiv statt negativ? Lassen sich Rollen oder Aufgaben vertauschen?« • Kombinieren: Kann ich »Motive, Gruppen, Ideen, Zwecke, Ziele, Lösungen, Belohnungen,

Strafen, Ansprüche, Einsatzbereiche, Persönlichkeitseigenschaften« kombinieren?

3.2 Der Plot: Wahl eines Urthemas oder Konflikts In der Erzählkunst wird der Begriff Plot als Synonym für Handlung verwendet. Nach Werner T. Fuchs Meinung ist dieses Wort vielmehr ein »Synonym für das Thema, das die Motivation einzelner Handlun-

gen nachzeichnet, die kausalen Zusammenhänge der Erzählung offenbart und deshalb alle Ereignisse

unter ein Dach bringt« oder die »Antwort auf die Frage „What’s the story?“ Oder: „What’s the problem?“«. ([1], S. 67) Denn eine gute Geschichte basiert letztendlich immer auf ein Problem, welches

der Held einer Story zu bewältigen hat, um sein Ziel zu erreichen. Ein Plot stellt im Prinzip ein uni-verselles Urthema einer Geschichte dar, welches unter anderem auch an »Lebensabschnitte« anknüpft.

Besondere Aufmerksamkeit bekommen Storys, die an unsere Kindheit erinnern. Damit sind nicht nur

Kinderspiele oder Süßwaren gemeint, sondern auch zwischenmenschliche Beziehungen. Denn wir ent-wickeln uns gerade durch den Kontakt zur Außenwelt. Solche Geschichten wecken unsere Emotionen

Formen und Methoden: Der Weg zu einer erfolgreichen Geschichte 11

1. Abenteuer 2. Aufstieg 3. Außenseiter 4. Entdeckung 5. Fall 6. Flucht 7. Identität 8. Liebe 9. Maßlosigkeit 10. Opfer

11. Rache 12. Rätsel 13. Reifung 14. Rettung 15. Rivalität 16. Suche 17. Verbotene Liebe 18. Verfolgung 19. Vergebung 20. Verlierer

21. Versuchung 22. Verwandlung

und dadurch kann eine Verbindung aufgebaut werden. Außerdem ist es für die Aufmerksamkeit allge-

mein hilfreich, den Rezipienten an seine eigene Lebensgeschichte durch »Szenen, Erlebnisse oder Ob-

jekte« zu erinnern, die folgendes bewirken können [1]:

• »Sicherheitsgefühl erhöhen« • »Orientierung erleichtern« • »Gegenwart schaffen« • »Zielgruppen differenzierter ansprechen« • »Deutungen vorwegnehmen« • »Vermutungen wecken« • »Gehirn entlasten« • »Akzeptanz des Fremden erhöhen« • »Visionäres erden« • »Entdeckerfreuen ermöglichen«

Wahl eines Urthemas

Der Medienwissenschaftler Ronald B. Tobias hat folgende 22 Masterplots zusammengestellt, die be-

schreiben, woraus Geschichten gemacht sind [1]:

Im Folgenden werden lediglich die drei Masterplots Abenteuer, Flucht und Suche, die in der Auflistung fett markiert sind, exemplarisch näher beschrieben.

Masterplot 1: Abenteuer

Abenteuergeschichten sind wahrscheinlich deshalb so beliebt, weil der Held eines Abenteuers für uns stellvertretend alle Gefahren auf sich nimmt und auf der Suche nach seinem Glück ist. Ein Held verlässt

dafür seine Heimat, um eine gefährliche Reise beginnen zu können. Dieser Plot eignet sich mehr für körperliches statt geistiges Risiko des Helden. Außerdem braucht der Held einen stimmigen Charakter,

der sich auch von seiner Umwelt beeinflussen lässt. Denn es sind eher die Helden beliebt, die ihre Per-

sönlichkeit weiterentwickeln. [1]

Masterplot 6: Flucht

Bei Geschichten über eine Flucht lässt sich die Hauptfigur zwar unterstützen, handelt jedoch meist selbst, ohne auf Hilfe zu warten. Ein Gefängnis, welches mit einer Flucht stark assoziiert wird, gilt auch

als »Methapher für unfreiwillige Enge und langes Eingeschlossensein«. Ein Held kann daher den Drang

haben, sowohl räumlich von einem Ort als auch aus einer schwerwiegenden Situation fliehen zu wollen. Denn die Hauptmotivation des Helden ist, sich von den Hindernissen zu befreien, die das Erreichen

seines Ziels verhindern. Als Rezipient empfinden wir vorallem Mitgefühl für die Hauptfigur, wenn dieser ungerechtfertigt gefangen genommen wurde. Der Flüchtende stellt somit die Rolle des Opfers da,

welcher durch seinen stetigen Glauben und Kämpfen für die Freiheit das Erreichen seines Ziels verdient

hat. Eine besonders große Anerkennung bekommt der Held, wenn dieser sogar durch seinen eigenen


Fluchtplan entkommen kann. Doch selbst der beste Kämpfer kann Unterstützung von anderen gebrau-

chen. Gerade eine Story über eine Flucht kann uns Möglichkeiten offenbaren, wie wir uns Hilfe von

außen holen können. [1]

Masterplot 16: Suche

In Geschichten, die die Suche als Kernthema haben, sucht der Held entweder nach einer Person, einem bestimmten Ort oder wertvollen Gegenstand. Wichtig dabei ist es, dass es für den Helden von großer

Bedeutung ist und sich dadurch sein Leben verändert. Nur so ist die Hauptfigur auch bereit dafür zu

kämpfen und sich den Gefahren zu stellen. Es kann sich dabei auch um etwas Unsichtbares oder etwas, was gar nicht existiert, handeln. [1]

Masterplots als Gegensätze

Urthemen können, neben den Masterplots, auch als Gegensätze behandelt werden. Mit Polaritäten als

Urthema einer Geschichte zu arbeiten, kann »das Erkennen der Spannungsbögen« und des Handlungs-

ablaufs erleichtern sowie »positive und negative Aspekte ins Gleichgewicht« bringen. Werner T. Fuchs hat eine Liste von Gegensatzpaaren erstellt, die nicht vollständig ist und laut ihm ergänzt werden kann

([1], S. 112):

• Ankunft – Abschied • Belohnung – Strafe • Festhalten – Loslassen • Freiheit – Gefangenschaft • Freund – Feind • Geborgenheit – Einsamkeit • Gewinner – Verlierer • Gut – Böse • Hoffnung – Verzweiflung • Leben – Tod

Wahl eines Konflikts: Konflikte in einer Geschichte erregen beim Rezipienten Aufmerksamkeit. Wer-

ner T. Fuchs setzt den »Konflikt für die Story« mit dem »Klang für die Musik« gleich. ([1], S. 132) Demnach braucht eine gute Geschichte stets die Auseinandersetzung mit einem Konflikt. Konflikte ha-

ben verschiedene Ursachen. Die folgende Liste zeigt Konfliktarten mit ihren möglichen Ursachen, die

bei der Wahl eines Konflikts hilfreich sein kann [1]:

• Zielkonflikte: Beispielsweise können mehrere Personen zur selben Zeit unterschiedliche Ziele oder »gegensätzliche Absichten« haben.

• Verteilungskonflikte: Mögliche Ursachen dafür sind z. B. »ungerecht empfundene Zuteilung von Ressourcen« oder einschränkender Zugang zu wichtigen Dingen.

• Wahrnehmungskonflikt: Dazu zählen fehlende Emphatie zu anderen Denkweisen, subjektive Vorurteile und unterschiedliche Informationen, Kulturen oder Bewertungen.

• Rollenkonflikte: Wenn die Erwartungen nicht den »Aufgaben, Zuständigkeiten, Rechte und Pflichten einer Gruppenzugehörigkeit« entsprechen. Außerdem können auch Konflikte entste-hen, wenn man kein Verständnis dafür hat, dass jeder unterschiedliche Positionen und Aufgaben einnimmt. Die eigene Rolle wechseln zu können, kann ebenfalls zu Unzufriedenheit führen, wenn man diese Chance verpasst.

• Beziehungskonflikte: Beispielsweise ausgelöst durch Missverständnisse, unterschiedliche Emotionen, Vorurteile, unpassende Verhaltensmuster, Charakterunterschiede, nicht zielführen-de Strategien zur Konfliktlösung oder Aufrufen von alten und ungeklärten Wunden.

• Wertekonflikte: Bezüglich »Religionen, Ideologien, Weltbilder und Vorstellung von Gerech-tigkeit« sowie »Prinzipien«.

• Liebe – Hass • Mut – Angst • Opfer – Täter • Schönheit – Hässlichkeit • Stärke – Schwäche • Suchen – Finden • Treue – Betrug • Vergangenheit – Zukunft • Wahrheit – Lüge • Weisheit – Dummheit


• Defizitkonflikte: Dabei handelt es sich um »problematische Situationen, die sich durch eine Fehleinschätzung ergeben«. Diese Defizite können durch »Über- oder Fehleinschätzung der ei-genen Fertigkeiten« oder die Sichtweise, dass alles planbar ist, entstehen.

Die Konflikte einer Geschichte haben auch eine positive Wirkung auf das Geschehen. Denn sie machen

beispielsweise »Unsichtbares sichtbar«, »stärken den Veränderungswillen«, »fördern die Persönlich-keitsentwicklung« und »Kreativität«, »erzeugen Handlungsdruck«, »vertiefen zwischenmenschliche

Beziehungen« und »verbessern Entscheidungsstrategien«.

3.3 Archetypen nach Carl Gustav Jung Der Psychoanalytiker Carl Gustav Jung untersuchte die »psychologischen Muster« in der Kunst, Reli-

gion, Mythologie oder anderen Kulturen. Er bezeichnete den Begriff Archetypen als universelle Struktur von allgemeinen, symbolischen Bildern des »kollektiven Unbewussten«, die unabhängig von Zeit und

Kultur ist. Die Archetypen basieren auf »Ur-Erfahrung der Menschheit« von Geburt bis zum Tod. Sie sind vorallem als »Mustervorlage« einer Geschichte nützlich, da die universellen Bilder unsere Emo-

tionen und Sehnsüchte wecken ([2], S. 84). Im Folgenden werden die wichtigsten Archetypen Held,

Helfer, Helfer des Feindes und Feind vorgestellt.

Archetyp: Held

Ein Held spielt die Hauptfigur einer Geschichte, die nicht immer eine menschliche Figur sein muss. Dabei kann es sich auch um »Tiere, Roboter, Gegenstände oder personifizierte Eigenschaften« handeln.

[1] Aus dramaturgischer Sicht stellt ein Held eine »emotionale Verbindung« zu einem Themengebiet

her. Ein Held einer Geschichte muss nicht immer etwas Überwältigendes geleistet haben. Dennoch geht ein typischer Held »auf Reisen, gerät in Gefahr, besteht Prüfungen, trifft Entscheidungen, erfährt eine

Wandlung«. [3] Oft werden Helden mit Vorbildern gleichgesetzt. Jedoch haben Helden auch ihre Schwächen oder sind unbeliebt, weshalb ein Held kein Vorbild sein muss. Das muss allerdings nicht so

bleiben, denn durch eine Persönlichkeitsentwicklung des Helden können sie zum Vorbild werden. [1]

Funktionen des Helden: Die Hauptfigur muss Probleme und Hindernisse bewältigen, um sein Ziel zu

erreichen. Sie treibt die Geschichte voran und deckt andere Personen sowie Feinde auf. Beim Rezipien-ten löst ein Held vorallem Emotionen aus. [1]

Identität des Helden: Folgende Fragestellungen von Werner T. Fuchs können für die Erstellung eines

neuen Helden und seiner Persönlichkeitsmerkmale hilfreich sein ([1], S. 137 - 149):

• »Welche Einzigartigkeit will ich hervorheben? (z.B. Verhaltensweise, Sprech- und Gestikstil, […], Alter, Intelligenz, Tätigkeit, Persönlichkeit, Einstellung, Lebensart, Lebensort, Motivation, Charak-ter, Erscheinung)«

• »Was muss mein Held können, was andere nicht können?« • »Welches sind seine mächtigsten Feinde?« • »Welche Voraussetzungen muss er mitbringen, um den Kampf zu gewinnen?« • »Warum traut er sich die Aufgaben zu?« • »Weshalb ist er ein Einzelgänger?« • »Welche Botschaften soll der Held vermitteln?« • »Worüber lacht er?« • »Wo versteckt er sich?« • »Was tut er bei schlechter Laune?« • »Was ist ihm peinlich?« • »Was ist sein größter Wunsch? « • »Was würde er gerne an sich ändern?« • »Was würde er für kein Geld der Welt tun?« • »Was ist in seiner oder ihrer Handtasche?« • »Was findet er besonders ungerecht?«


• »Womit kann man ihm am meisten ärgern?« • »Wer ist sein ärgster Feind?« • »Worauf ist er besonders stolz?« • »Welche Verpflichtungen sind ihm ein Gräuel?« • »Was hat er verlernt?« • »Was fehlt dem Helden zur Vollkommenheit?« • »Welche dunklen Seiten versucht der Held zu verbergen?« • »Was verursacht dem Helden Albträume?« • »Welche negative Eigenschaft des Helden würde uns überraschen?« • »Welcher unbekannte Konkurrent könnte zur Gefahr werden?«

Archetyp: Helfer

Selbst der stärkste Held braucht immer jemanden, der ihn zur Seite steht und unterstützt. Damit gemeint

sind die Helfer des Helden.

Funktionen des Helfers: Die Aufgaben eines Helfers können vielfältig sein, um den Helden beim Errei-

chen seines Ziels zu helfen. Ein Helfer kann einen Helden »fordern und fördern«, »zum Verlassen der Komfortzone motivieren«, »Kenntnisse und Lösungswege einbringen«, »auf mögliche Gefahren hin-

weisen« oder die »Schwächen des Helden abfedern«. Er kann außerdem in die Rolle eines Mentors oder einer »Kontrastfigur« schlüpfen. [1]

Archetyp: Helfer des Feindes

Auch der Feind des Helden braucht Unterstützung von Helfern. Die Funktionen der Helfer des Feindes ändern sich dabei allerdings nicht. [1]

Archetyp: Feind

Der Feind des Helden gibt einer Geschichte die nötige Spannung. Ohne Hindernisse und Feinde ist die

Story eher uninteressant. Denn der Rezipient kann sich ansonsten denken, dass die Geschichte positiv

verlaufen wird. Laut Werner T. Fuchs kann nur durch ein »klares Feindbild […] die Identifikation mit dem Helden« entstehen und dabei dem Helden helfen, die richtige Waffe zu wählen. Auch wenn es viele

Feinde in einer Geschichte geben kann, ist es ratsam nur einen Hauptfeind des Helden zu kreieren. Andere Feinde können immer noch als die Helfer des Feindes auftreten. [1]

Funktionen des Feindes: Zu den Hauptaufgaben des Feindes gehören vorallem die Schwachstellen des

Helden sichtbar zu machen und ihm das Erreichen des Ziels durch Hindernisse zu erschweren. Zudem

kann ein Feind die »innere Konflikte des Helden widerspiegeln« oder sogar für den Helden »Gehilfe des Zufalls sein«. Beim Rezipienten kann der Feind des Helden auch starke Emotionen hervorrufen. [1]

3.4 Spannung und Aufmerksamkeit Dynamik durch Ziel, Bedürfnis, Angst und Hindernisse

»Klarheit geht im Kurzfilm immer vor Komplexität«, so lautet ein wichtiger Grundsatz nach Axel

Melzener. Für eine erfolgreiche (kurze) Geschichte müssen das »äußere Ziel« und das oftmals unbe-wusste »innere Bedürfnis« des Helden, wie »Liebe, Anerkennung und Zufriedenheit«, klar definiert

sein. Außerdem zählt Melzener noch die »größte Angst« des Helden, die überwunden werden muss, zu den wichtigsten Faktoren einer guten Geschichte. Damit mit diesen drei Faktoren Spannung erzeugt

werden kann, werden zudem noch Hindernisse benötigt, die den Weg zum Ziel erschweren. Dabei

können beispielsweise innere oder äußere Konflikte (größte Angst des Helden), Rivalität oder Interes-senkonflikte zwischen Protagonist und Antagonist im Wege stehen. [12]


Emotionale Elemente

Das Hauptziel der Dramaturgie ist vorallem die Aufmerksamkeit des Rezipienten aufrechtzuerhalten. Nur auf dieser Basis können alle weiteren anspruchsvollen Inhalte vermittelt und vom Rezipienten auf-

genommen werden. Wie können wir diese Aufmerksamkeit erhöhen? Pierre Kandorfer erfasste dafür eine Liste von emotionalen Elementen, die das Fesseln der Aufmerksamkeit fördern. Laut Simon Sturm

können diese sieben Elemente auch für das digitale Storytelling angewendet werden. Zu den emotiona-

len Elementen zählen »Kontraste und Paradoxien« (z. B. »ein Kontrast der Charaktere«), »Unwissenheit der Handelnden« (z. B. »weiß der Zuschauer mehr«), »Überraschungen« (z. B. unerwartete Wendung),

»Neugierde«, »Retardierung« (z. B. Verzögerung der Auflösung durch eine »Parrallelhandlung«), »Er-

regung« (z. B. »dramatische soziale Unterschiede«) und »Humor«. ([4], S. 34) Wichtig dabei ist es, den Zuschauer stets emotional anszusprechen.

Spannungsbögen

Ein »Spannungsbogen einer Story« ist sozusagen die »Wirbelsäule einer Geschichte«, die für die stetige

Aufmerksamkeit des Rezipienten sorgt. Ziel ist es, bereits zu Beginn einer Geschichte die Spannung

aufzubauen und den Konflikt im Verlauf der Geschichte langsam zu steigern. Wichtige Elemente einer Story sind dabei Dynamik, Gefühle und Veränderung. In parallelen Spannungsbögen werden neben dem

Hauptkonflikt einer Story, weitere Nebenhandlungen erzählt. Beispielsweise kann in einer Abenteuerge-schichte parallel auch eine Liebesgeschichte zwischen dem Helden und einer Frau vorkommen, die wei-

tere Spannung erzeugt. [2]

Verzögerungen

Der Verlauf einer Geschichte kann durch Verzögerungen bzw. Unterbrechungen des Hauptkonflikts,

wie beispielsweise durch Rückblenden oder Cliffhanger, mehr Spannung und Aufmerksamkeit erzeu-gen. Verzögerungen können unter anderem durch den Einblick in das »Innenleben einer Figur«, den

Wechsel der »Erzählperspektive«, die Wiederholung gleicher Informationen »mit einem anderen Me-

dium«, die Einführung von »Szenen aus Nebenhandlungen«, oder durch »gestellte Fragen«, die nicht gleich beantwortet werden, erzeugt werden. [1]

Methoden für den Beginn und das Ende einer Story

Eine Geschichte kann mit verschiedenen Strategien begonnen werden. Im Film wird beispielsweise gerne in der ersten Szene der Handlungsort oder ein »Bildrätsel« gezeigt, welches durch Entfernung des

Bildes in Wirklichkeit etwas anderes ist, als zunächst erwartet. Die ersten Bilder können auch eine Handlung zeigen, die auf das Hauptthema hinweisen. Der Einstieg kann aber auch ohne Bilder verlau-

fen, indem die Geschichte nur hörbar mit einem Dialog durch einen Erzähler oder eine Unterhaltung

beginnt. Zu den Methoden für das Ende eines Films zählen beispielsweise ein offenes Ende, ein Ab-schluss mit wirkungsvollen letzten Worten, ein »Zirkuläres Ende« (Anfangsbild wiederholt sich), »Kiss-

of« (besonders bei romantsichen Filmen), eine »Unheilvolle Ankündigung« (Andeutung, dass etwas noch nicht vorbei ist), plötzliches Ende mit einem »Schock« (besonders bei Horrorfilmen) oder ein

»Epilog« (weiterer Verlauf einer Erzählung, wie z. B. Personen weiter Leben oder eine Texttafel mit

historischen Fakten). [12]

3.5 Dramaturgiemodelle als Mustervorlage Der Begriff Dramaturgie leitet sich aus dem griechischen Wort dramaturgein ab und wird mit drama-tisch darstellen übersetzt. Es bedeutet soviel wie »die Lehre von Wesen, Wirkung und Formgesetzten

des Dramas«. ([4], S. 32)


3.5.1 Drei Akte nach Aristoteles Aristoteles beschäftigte sich mit Tragödien, Dichtungen und Komödien, um daraus dramaturgische Kriterien zu definieren. Für ihn ist eine Handlung eine »poetische Nachahmung der Wirklichkeit«, mit

dem Ziel »Läuterung und Reinigung«, »Vergnügen«, »Glückseligkeit und Enspannung« sowie »Bil-dung und Erziehung« zu vermitteln. [2] Zudem sind die drei Emotionen Mitleid (eleos), Furcht (phobos)

und Erleichterung (katharsis) für Aristoteles als Basis in der Dramaturgie besonders wichtig. Während

wir bei Mitleid für eine andere Person fühlen, richten sich bei Furcht die Gefühle an uns selbst. Wir können uns sowohl durch Furcht als auch durch Mitleid mit dem Helden identifizieren. Die Erleichte-

rung stellt den emotionalen Höhepunkt einer Geschichte dar, die die aufgebaute Spannung durch das Ende erleichternd auflöst. [12] Nach Aristoteles wird eine Geschichte in drei Akte Anfang, Mitte und

Ende eingeteilt. [2]

Die Exposition: Anfang einer Story

Der Anfang eines klassischen Drehbuchs wird auch als Exposition bezeichnet. Im ersten Akt wird der

Held und der Hauptkonflikt einer Geschichte vorgestellt. Das erste Bild einer audiovisuellen Story ver-

mittelt den ersten Eindruck über das Thema und die Atmosphäre der Geschichte. Deshalb sollte ein eindrucksvolles Bild gewählt werden. Selbst bei journalistischen Storys fesselt ein einführendes Bild

mehr als wenn gleich mit einem Text begonnen wird. Denn Informationen können über ein Bild schnel-ler erfasst werden. Die Exposition kann daher zum Beispiel auf einer Website mit einem visuellen Teaser

(Bild oder Video) begonnen werden. Ein Teaser entscheidet oftmals darüber, ob ein Rezipient weiterhin

interessiert ist, die Story zu konsumieren. Nach Vorstellung der Hauptfiguren kann mit dem ersten »Plot Point«, also das erste Ereignis, begonnen werden, die die Geschichte verändert. Zum Beispiel kann diese

Veränderung durch den Erhalt einer Botschaft ausgelöst werden. [4]

Die Entwicklung: Mitte einer Story

Beim zweiten Akt handelt es sich um die Mitte bzw. die Entwicklung einer Story. Im Vergleich zum

ersten und dritten Akt, stellt die Mitte den größten Teil einer Geschichte dar. In diesem Teil entwickelt sich der Konflikt der Story, sprich die Hindernisse des Helden werden dargestellt. Eine dramaturgische

Spannung wird hierbei durch eine sichtbare Entwicklung erzeugt, die evtl. als Höhepunkt eine unvorher-sehbare Wendung beinhaltet. [4]

Die Auflösung: Ende einer Story

Die Auflösung bzw. das Ende einer Geschichte kommt im dritten Akt vor. Im Schlussteil werden Fragen über den Ausgang des Konflikts aufgelöst. [4]

3.5.2 Der Heros in tausend Gestalten nach Joseph Campbell Der Ethnologe7 Joseph Campbell beruht sich bei seiner Mythenforschung auf die Archetypen nach Carl Gustav Jung und Aristoteles Dramentheorie. [2] Dabei möchte er das »Geheimnis der zeitlosen Vision«

lüften und ergründen, warum der Mythos überall gleich ist. ([9], S. 18) Seine Forschungsergebnisse fasst

er 1949 in seinem Buch »Der Heros in tausend Gestalten« zusammen. Dabei beschreibt er folgendes Muster einer »mythischen Abenteuerfahrt«:

»Der Heros verläßt die Welt […], besteht […] fabelartige Mächte und erringt einen entscheidenden Sieg, dann kehrt er […] von seiner geheimniserfüllten Fahrt zurück«. ([9], S. 42)

7 Ethnologie: Völkerkunde.


Zudem formuliert er dieses Prinzip auch als einen einheitlichen »Kern des Monomythos«: »Trennung –

Initiation – Rückkehr«. Laut Campbell hat ein Held im »Monomythos« besondere Begabungen, wo-

durch er durch andere geschätzt oder abgelehnt werden kann. [9] Joseph Campbell erkennt in seiner Mythenforschung eine allgemeingültige »archetypische Grundstruktur«, die in Geschichten aus allen

Kulturen vorkommt. [2] Diese Struktur wird nach Campbell [9] in 17 Stationen8 gegliedert, die ein Held auf seiner Abenteuerfahrt durchläuft:

1. Berufung: »Ein Versehen kann sich zum Schicksal entwickeln«. So können Fehlleistungen die Tür zu einer unerwarteten Welt öffnen. Laut Freud gibt es keine Zufälle, sondern unsere Hand-lungen basieren auf unterdrückte »Wünsche und Konflikte«. Der Held erhält eine schicksals-hafte Berufung, die sowohl verlockend als auch gefährlich ist. Die Heldenreise kann beispiels-weise in ein »fernes Land, ein Wald, ein unterirdisches Reich, […] ein entlegener Berggipfel oder eine tiefe Traumentrückung« führen. Dabei gibt es verschieden Möglichkeiten, wie eine Reise beginnen kann. Die Berufung kann unter anderem durch einen scheinbaren Zufall, durch eine Entführung oder die eigene Entscheidung ausgelöst werden.

2. Weigerung: Häufig versucht ein Held anfangs seiner Berufung auszuweichen, bevor er die Reise annimmt. Denn ein Abenteuer birgt immer viele Gefahren, wofür der Held zunächst nicht bereit ist. Diese Weigerung spiegelt sich immer in der »Hartnäckigkeit des Individuums« wider. Er sieht alles als »Bedrohung seines gegenwärtigen Systems von Idealen, Tugenden, Absichten und Vorteilen«. Vielleicht muss er auch einiges dafür aufgeben, weshalb er alles erst überden-ken muss.

3. Übernatürliche Hilfe: Sobald der Held seine Heldenreise annimmt, trifft er eine helfende und »schützende Figur«, die ihn mit nützlichen Dingen austattet oder mit Rat zur Seite steht, um sein Ziel erreichen zu können. Solch ein Helfer kann dem Helden beispielsweise in Form eines Mentors, Magiers oder Waldbewohners begegnen.

4. Das Überschreiten der ersten Schwelle: Der Held kann nun mit Hilfe einer schützenden Figur seine Reise beginnen. Schon bald trifft er auf seine erste Schwelle, einem »Torhüter, der am Eingang zu der Zone wacht, in der größere Kräfte am Werk sind«. Diese Grenze muss der Held überschreiten, damit er seine Reise fortsetzen kann.

5. Der Bauch des Walfisches: Das Bild des Walfischbauches ist ein »Symbol des Mutterschoßes« und stellt eine »Sphäre der Wiedergeburt« dar, die den Helden nach dem Überschreiten der ersten Schwelle erwartet. Ein Kampf scheint aussichtslos, stattdessen wird »der Held ins Unbe-kannte geschlungen« als hätte er es nicht überlebt. Diese scheinbare »Selbstvernichtung« lässt den Helden verschwinden. Der Held kehrt schließlich verwandelt zurück.

6. Der Weg der Prüfungen: Unterstützt und geführt von seinen schützenden Helfern wird der Held nun mit vielen Prüfungen konfrontiert, die er bestehen muss.

7. Die Begegnung mit der Göttin: Nachdem der Held alle Hindernisse überwunden hat, erscheint als letztes Abenteuer eine »mystische Hochzeit […] der siegreichen Heldenseele mit der gött-lichen Weltmutter«, die sich im »Dunkel der tiefsten Kammer des Herzens« befindet. Die Göttin »lockt, leitet und bittet ihn, seine Fesseln zu sprengen«. Durch das Bestehen dieser Offenbarung eignet sich der Held Wissen an und kann »über alle Grenzen hinauswachsen«. Dasselbe passiert, wenn es sich um eine Heldin handelt. Allerdings erscheint ihr dann keine Göttin, sondern ein himmlischer Geliebter.

8. Das Weib als Verführerin: »Das Weib ist das Leben«. Ein Held ist derjenige, der das Leben versteht und beherrscht. Die Prüfungen erweitern sein Bewusstsein, denn sie symbolisieren die »Krisenpunkte der Erkenntnis«. Es fällt uns deshalb so schwer diese Erkenntis zu erlangen, da wir oft das Leben nicht so wahrnehmen wollen, wie das Leben in Wirklichkeit ist. Statt unsere »wahre Natur« zu akzeptieren, deuten wir die Realität um, idealisieren alles oder geben für alles Schlechte anderen die Verantwortung.

9. Versöhnung mit dem Vater: Die »selbstgemachte«, scheinbare Bedrohung kann »entledigt« werden, indem die »Bindung ans Ich entledigt« wird. Der Held muss sich eingestehen, dass er

8 Kapitel 1 - Aufbruch: Station 1 bis 5; Kapitel 2 - Initiation: Station 6 bis 11; Kapitel 3 - Rückkehr: Station 12 bis 17.


tatsächlich vor sich selbst Angst hat, also sich selbst im Wege steht. Durch die Versöhnung kann er »gereinigt von Hoffnung und Furcht« die Rolle des Vaters einnehmen.

10. Apotheose: Der Held erreicht einen »göttlichen Zustand« und kann sich dadurch erheben und Erlösung erfahren.

11. Die endgültige Segnung: Die Segnung ist so zu verstehen, dass der Held die unvergängliche »Macht der Substanz« erhält, die durch die göttlichen Wächter des Elixiers beschützt wird.

12. Verweigerung der Rückkehr: Nach Erreichnung des Ziels muss der Held mit dem Elixier heimkehren. Oftmals wird jedoch diese Verantwortung abgelehnt, da der Held Zweifel be-kommt, ob seine Erkenntnis weitergegeben werden könnte. Manche Helden kehren sogar nie mehr zurück.

13. Die magische Flucht: Ein Held wird bei seiner Rückkehr durch schützende Mächte unterstützt, wenn er dafür bestimmt ist, mit dem erhaltenden Elixier in die Heimat zurückzukehren. Wenn jedoch die Wächter des Elixiers beraubt wurden oder der Held gegen ihren Willen heimkehren will, entwickelt sich seine Rückehr zu einer Flucht voll von »magischen Hindernissen« und unerwartenden Ereignissen.

14. Rettung von außen: Der Held muss von der Außenwelt zurückgeholt werden, wenn er im »Glück des Zustandes vollkommenen Seins, der dem Tod gleicht«, gefangen ist.

15. Rückkehr über die Schwelle: Es fällt dem Helden häufig schwer, die Schwelle in seine ver-gängliche, gemeine und gewöhnliche Welt zu überqueren. Wie soll er seine Welt denn über-zeugen, die ihn wahrscheinlich keinen Glauben schenken werden? Um seine Aufgabe erfüllen zu können, muss sich der Held dieser schwierigen Aufgabe noch stellen.

16. Herr der zwei Welten: Der Held verbindet die zwei Welten miteinander. 17. Freiheit zum Leben: Der Held hat dazu beigetragen, dass sich die Welt durch seine Erkennt-

nisse weiterentwickeln konnte. Diese Veränderung führt zur Freiheit des Lebens und der »Er-kenntnis der wahren Beziehung der vergehenden zeitlichen Erscheinung«.

3.5.3 Die Heldenreise nach Christopher Vogler Christopher Vogler verbindet 1949 in seinem Werk »The Hero’s Journey« Joseph Campbells Mythen-forschung und Carl Gustav Jungs Archetypen. Er entwirft damit ein Grundlagenhandbuch für Story-

teller, welches dem aktuellen Zeitgeist angepasst ist. Laut Vogler ist das Buch keine Erfindung, sondern

es basiert auf Beobachtungen, die unser Leben beschreiben. Dieses Buch kann somit auch als Lebens-handbuch genutzt werden, in welchem wir unsere eigenen Probleme wiedererkennen und nützliche Le-

bensstrategien finden können. Der Rezipient kann evtl. daraus noch neue Erkenntnisse schöpfen, indem er etwas über sich selbst oder die Welt lernt. Für Vogler müssen gute Geschichte vorallem unsere Emo-

tionen wecken können. [8]

Voglers und Campbells Heldenreise im Vergleich

Vogler: The Writer’s Journey [8] Campell: Der Heros in tausend Gestalten [9]

Akt 1 Aufbruch

Ordinary World

Call to Adventure Berufung

Refusal of the Call Weigerung

Meeting with the Mentor Übernatürliche Hilfe

Crossing the First Threshold Das Überschreiten der ersten Schwelle

Der Bauch des Walfisches

Akt 2 Initiation

Tests, Allies, Enemies Der Weg der Prüfungen

Approach to the Inmost Cave

Ordeal Die Begegnung mit der Göttin

Das Weib als Verführerin

Versöhnung mit dem Vater

Apotheose


Reward Die endgültige Segnung

Akt 3 Rückkehr

The Road Back Verweigerung der Rückkehr

Die magische Flucht

Rettung von außen

Rückkehr über die Schwelle

Resurrection Herr der zwei Welten

Return with the Elixir Freiheit zum Leben Tabelle 1: Voglers und Campbells Heldenreise im Vergleich

Voglers Heldenreise besteht aus 12 Station, die eine Vereinfachung von Campbells 17 Stationen dar-stellt. Christopher Vogler schreibt in seinem Buch »I’m retelling the hero myth in my own way, and you

should feel free to do the same«. ([8], S. 7) Somit basiert zwar seine Heldenreise auf Campbells Aben-teuerfahrt, jedoch handelt es sich dabei um seine eigene Interpretation, die nicht genau so übernommen

werden muss. Jeder Storyteller kann und soll die Heldenreise auf seine eigenen Bedürfnisse anpassen.

Die Heldenreise [8] in 12 Stationen:

1. Ordinary World: Die Story beginnt in der Alltagswelt des Helden, aus welcher er herausgeholt werden soll. Die Vorstellung dieser gewöhnlichen Welt ist deshalb wichtig, um sich von der neuen Welt abgrenzen zu können.

2. Call to Adventure: Eine Herausforderung, ein Abenteuer oder ein Konflikt steht dem Helden gegenüber. Diese Berufung verändert sein gewöhnliches Leben entscheidend, die auch das Ziel der Heldenreise definiert.

3. Refusal of the Call: Der Held begegnet hier die Furcht vor dem Unbekannten. Aus Angst, Unsicherheit, mangelnder Risikobereitschaft und Flexibilität weigert sich der Held, die Heraus-foderungen zunächst anzunehmen. Um sich überwinden zu können, braucht der Held evtl. einen Anstoß oder eine Ermutigung von der Außenwelt. Dabei kann es sich um Veränderungen der Umstände oder einen unterstützenden Mentor handeln.

4. Meeting with the Mentor: Manchmal muss ein Mentor den Helden dazu motivieren die Reise anzutreten. Der Mentor hilft dem Helden mit nützlichen magischen Gegenständen, Ratschlägen und anderen Vorbereitungen sich dem unbekannten Abenteuer zu stellen.

5. Crossing the First Threshold: Der Held muss die erste Schwelle überqueren, um in die neue Welt eintauchen zu können. Die erste Schwelle stellt einen Wendepunkt zwischen den ersten und zweiten Akt dar. Ab hier gibt es für den Helden kein Weg zurück und sein Abenteuer kann beginnen.

6. Tests, Allies, Enemies: Der Held entdeckt und erprobt die neue Welt mit all ihren Regeln, neuen Herausforderungen, Freunden und Feinden.

7. Approach to the Inmost Cave: Kurz vor dem Ziel erreicht der Held die zweite Schwelle zu dem gefährlichsten Tiefpunkt seiner Heldenreise, die tiefste Höhle. Dort erwartet ihn sein größter Feind. Bevor der Held die zweite Schwelle überschreitet, macht er oftmals eine strategi-sche Pause. Er bereitet sich für den bevorstehenden Kampf vor und plant zudem wie er den Schwellenhüter überlisten kann.

8. Ordeal: In dieser Prüfung wird über das Schicksal des Helden entschieden. Der Held stellt sich seiner größten Angst und wird mit einer tödlichen Gefahr konfrontiert. Der Kampf geht um Leben und Tod und er muss dabei scheinbar sterben, um wieder auferstehen zu können.

9. Reward: Nachdem der Held den Kampf gewonnen hat erhält der Held seine Belohnung oder den Schatz, den er gesucht hat.

10. The Road Back: Der Held kann zurück in seine Welt gehen. Dabei hat er auch sich selbst verändert, denn er ist nicht mehr die Person, die er zu Beginn seiner Reise war. Auf seiner Heimreise erwarten ihn jedoch noch weitere Gefahren und Prüfungen.

11. Resurrection: Der Held muss die dritte Schwelle überschreiten. Noch ein letztes Mal wird der Held geprüft, ob er die Lektionen der letzten Prüfung (Ordeal) auch wirklich gelernt hat, denn es besteht für ihn immer noch Lebensgefahr. Auch hier muss er sich verändern und wiederge-boren werden, um diese Prüfung bewältigen und heimkehren zu können.


12. Return with the Elixir: Der Held geht mit neuen Erkenntnissen und einem symbolischen Eli-xier in die gewöhnliche Welt zurück. Er kann durch einen Gegenstand, aber auch durch andere Werte, wie Freiheit oder Liebe, die Welt retten und verändern. Manchmal bringt der Held auch nur eine gute Geschichte mit, die er erzählen kann.

Archetypen nach Christopher Vogler

Für Vogler definieren Archetypen keine festen Rollen in einer Geschichte. Denn die Charaktere können flexibel, je nach gewünschtem Effekt, zwischen den Archetypen als Funktionen bzw. Masken wechseln.

Im Folgenden werden die Archetypen nach Vogler [8] aufgelistet:

• Held: Ein Held ist die Hauptfigur einer Story, der Hindernisse bewältigt, um sein Ziel zu errei-chen. Durch ihn sieht der Rezipient die Welt der erzählten Geschichte. Er besitzt sowohl univer-selle als auch einzigartige Charaktereigenschaften, so dass wir uns mit dieser Rolle identifzieren und wiederfinden können. Wie beispielsweise der Wunsch nach Liebe, frei zu sein oder zu über-leben. Dabei wird ein Held nicht perfekt dargestellt, damit er glaubwürdig und realistisch er-scheint. Der Hauptcharakter einer Geschichte ist immer derjenige, der sich am meisten weiter-entwickelt und gelernt hat.

• Mentor: Diese helfende Figur unterstützt den Helden beratend oder lehrend. Er beschützt und motiviert den Helden, gibt ihn nützliche Gegenstände und hilf ihm dabei, seine Ängste zu über-winden. Symbolisch gesehen nimmt der Mentor die Rolle der Eltern ein. Der Mentor kann manchmal sogar als Erfinder oder Wissenschaftler auftreten und dem Helden seine eigenen Er-findungen oder Ratschläge weitergeben, die er später auf seiner Reise gebrauchen kann. Dieser Helfer taucht immer dann auf, wenn er in kritischen Situationen gebraucht wird.

• Schwellenhüter: Die Wächter bewachen jeden Zugang zu einer neuen Welt, den der Held auf seiner Reise überschreiten muss. Dabei versuchen die Schwellenhüter ihm den Weg zu blockie-ren. Psychologisch gesehen repräsentieren diese Hindernisse unsere tiefen Ängste, die unsere Weiterentwicklung blockieren. Sie testen uns, ob wir auch wirklich bereit sind uns verändern zu wollen, in dem wir unsere Heldenreise annehmen. Die Hauptfunktion der Schwellenhüter ist demnach den Helden zu testen. Beispielsweise in Form eines Rätsels oder eines Tests.

• Herold: Ein Herold verkörpert einen Boten, der dem Helden im ersten Akt eine Botschaft bringt. Der Held wird gezwungen darauf zu reagieren bzw. eine Entscheidung zu treffen, denn die gewohnte Welt des Helden hat sich verändert. Der Bote kann in der realen Welt, aber auch in einem Traum oder als Idee erscheinen.

• Gestaltwandler: Diese Figur ist nicht vertauenswürdig oder berechenbar, denn sie kann uns verraten und ausspionieren. Der Gestaltenwandler kann als Maske von jeder Figur in einer Ge-schichte getragen werden. Beispielsweise nutzt ein Held diese Maske, um sein Ziel zu erreichen oder zu flüchten.

• Schatten: Der Schatten spiegelt die negative Seite, wie Hass oder Angst, in uns wider, die es zu überwinden gilt.

• Verbündete: Der Held braucht Freunde, die ihm auf seiner Reise helfend, kampfbereit und beratend zur Seite stehen.

• Trickster: Es handelt sich dabei um eine Figur, die sowohl humorvoll als auch raffiniert ist und die Story ausgleicht.

Wünsche vs. Bedürfnisse

Manchmal wünscht sich ein Held etwas so sehr, wie z. B. einen Schatz zu finden oder ein Spiel zu

gewinnen. Jedoch ist das, was er möchte, nicht immer das, was er wirklich braucht. Die wahren Bedürf-nisse kann der Held durch einige emotionale Lektionen lernen und herausfinden. Denn es geht nicht

immer darum, etwas zu gewinnen oder zu finden. Manchmal muss der Held beispielsweise lernen,

flexibler oder teamfähiger zu werden. Dadurch kann er sich weiterentwickeln und herausfinden, was er wirklich braucht. [8]

Games und Interactive Storys 21

4 Games und Interactive Storys

Spiele können uns »lehren, inspirieren und begeistern«. Sie regen vorallem unser Belohnungssystem an,

wodurch wir motiviert werden zu spielen. Diese »grundlegende menschliche Bedürfnisse« werden in

Spielen intensiver befriedigt als es zurzeit in der Realität üblich ist. [11] Demnach ist es kein Wunder, dass Games sehr beliebt sind. In diesem Kapitel wird sich nur mit Computer- und Videospielen ausein-

andergesetzt, die hier einfachheitshalber als Games oder Spiele bezeichnet werden.

Interactive Gamestorys

Die These »Filme werden Games und Games werden zu Filmen« verdeutlicht die stetige Entwicklung

von Games mit einem »filmischen Charakter« und »alternativen Erzählsträngen«. Maximilian Schenk, Geschäftsführer des Bundesverbands Interaktive Unterhaltungssoftware e.V., begründet dies wie folgt:

»Dass die Narration immer wichtiger wird, ist eine typische Entwicklung vieler Mediengattungen und

hängt insbesondere mit den erweiterten technischen und digitalen Möglichkeiten zusammen.« ([11], S. 95) Jedoch sind laut Robert Walter Geschichten keine Garantie für ein erfolgreiches Spiel. »Storys in

Spielen müssen sich immer dem Gameplay unterordnen.« ([11], S. 104) Denn ein Spiel kann durchaus ohne eine besondere Geschichte Spaß machen, umgekehrt allerdings nicht. Denn wenn das Gameplay

keinen Spaß macht, hilft leider auch die beste Geschichte nicht weiter. [11] Deshalb sollte bei der Ent-

wicklung eines narrativen und interaktiven Spiels die Spielemechanik nicht unterschätzt werden. Es gilt hierbei die interaktiven Erzählszenarien mit einem guten Gameplay zu verbinden. Für die Einbindung

von Geschichten in Games gibt es verschiedene Methoden, die in Kapitel 4.2 vorgestellt werden.

4.1 Cut Scenes Cut Scenes

Cut Scenes sind Videosequenzen, die in Games als narratives Mittel ohne Interaktionsmöglichkeit an

verschiedenen Punkten eingesetzt werden, um die Story fortzuführen. [11] Sie können zum Spielbeginn die Gamestory einleiten, alle spielbaren Abschnitte innerhalb der Erzählstruktur zusammenfügen sowie

das Spiel abschließen. [6] Dadurch ist es möglich, trotz Spielfreiheit, den Spieler gezielt durch die Story

zu führen. Cut Scenes werden auch dafür genutzt, um Ziele zu geben, dramaturgisch Spannung aufzu-bauen und mit Wendungen zu überraschen. [11] [6]

Informationsverteilung

Nicht nur über Cut Scenes kann die Gamestory erzählt werden, sondern auch über aktive oder passive

Dialoge und im Spiel auffindbare Elemente bzw. In-Game-Artefakte, wie Schriften, Audioaufnahmen

oder andere Informationsquellen. Elemente, die die Geschichte erzählen, werden als Informationsver-teilung bezeichnet. Bei optionalen Elementen steht es dem Spieler frei, ob er mehr erfahren möchte.

Zudem können auch durch bestimmte Aktionen des Spielers passive (»Mini-Cut Scenes, wie z. B. Ka-merafahrt nach Betreten eines Raumes«) oder aktive Ereignisse (z. B. Aufforderung: »schnelles Drücken

der richtigen Tasten«) ausgelöst werden. [11]

4.2 Erzählstrukturen in Games Gamestorys können entweder statisch oder dynamisch erzählt werden. Letzteres bedeutet für den

Spieler, den Storyverlauf interaktiv mit Entscheidungsoptionen beeinflussen zu können. Prinzipiell ist eine »feste Struktur […] das Grundgerüst für jede interaktive Story«, sodass eine Geschichte wie »meh-

rere kleine Bausteine« aufgebaut werden kann. Denn eine Geschiche besteht immer aus zusammenge-

setzten Ereignissen, die einer bestimmten Struktur folgen. Bei interaktiven Erzählungen gibt es mehrere, verschieden kombinierbare Ereignisse, die je nach Spielverhalten unterschiedlich eintreten können.


Somit hat der Spieler die Wahl verschiedene Storywege zu gehen. Damit für die Spieleentwicklung die

Anzahl der Entscheidungswege überschaubar und realisierbar bleiben, gibt es einige Methoden. [6]

Zwei Entscheidungsoptionen

Sobald ein Spieler zu einem bestimmten Zeitpunkt verschiedene Storywege wählen kann, ist es hilfreich

nur zwei Entscheidungsmöglichkeiten anzubieten. In vielen Spielen werden Fragen gestellt, die nur mit Ja oder Nein beantwortet werden können oder der Spieler muss sich für eine von zwei Möglichkeiten

entscheiden (z. B. »Die linke oder rechte Tür?«). Diese Methode erleichtert und senkt die Produktion

von Storywegen ernorm und geben dem Spieler trotzdem das Gefühl die Geschichte interaktiv beein-flussen zu können. [6]

Erzählstrukturen

Bei der folgenden Aufzählung handelt es sich um eine exemplarische Auswahl von interaktiven Erzähl-

methoden, die jedoch keine Vollständigkeit gewährleistet. Die Auswahl gibt einen Überblick von fünf

verschiedenen Modellen, wie eine Gamestory strukturiert aufgebaut werden kann. Im Folgenden werden das Perlenkettenmodell als statische, lineare Erzählstruktur und die Sequenzielle Struktur mit Seiten-

wegen, die Verzweigung mit Pflichtpfaden, das Flaschenprinzip und der Geschichtenautomat als dyna-

mische, interaktive Erzählstrukturen.

1. Perlenkettenmodell

Abbildung 1: Perlenkettenmodell

Das Perlenkettenmodell ist in Spielen eine beliebte Methode, um eine Story einzubinden. In Abb. 1 wird

die Story als Kette und das Gameplay als Perle dargestellt. Das Gameplay wird hierbei abwechselnd

durch narrative Zwischensequenzen bzw. Cut Scenes unterbrochen. Dabei können die Sequenzen so-wohl schriftlich (Text) als auch visuell (Bild, Animation, Video) dargestellt werden. Wichtig für das

Spielvergnügen ist eine »gute Balance zwischen Selbst- und Fremdbestimmung«. Der Spieler kann so-mit im gleichen Verhältnis passiv und aktiv unterhalten werden. [11]

2. Sequenzielle Struktur mit Seitenwegen

Abbildung 2: Sequenzielle Struktur mit Seitenwegen


Ähnlich wie beim Perlenkettenmodell wird die Abfolge der Ereignisse linear vorgegeben. Dabei kann

der Spieler an bestimmten Punkten (Kreis in Abb. 2) optionale Wege durchspielen, die ihm am Ende

wieder zurück zum Ursprung führen. [6]

3. Verzweigung mit Pflichtpfaden

Abbildung 3: Verzweigung mit Pflichtpfaden

Bei diesem Modell gibt es an bestimmten Punkten der Geschichte scheinbare »Seitenwege«, die eine

Wahlmöglichkeit der Story suggerieren. Jedoch bleibt die Story linear und unveränderbar, denn alle Optionen führen zum selben Ausgang. [6]

4. Flaschenhalsprinzip

Abbildung 4: Flaschenhalsprinzip

Das Flaschenhalsprinzip lässt die Wahl von verschiedenen Parallelgeschichten zu, jedoch führen auch

diese an einem späteren Zeitpunkt zu einem gemeinsamen Ausgangspunkt. Der Storyverlauf kann dem-nach vom Spieler im Mittelteil beeinflusst werden. Jedoch hat die Geschichte immer dasselbe Ende. [6]

5. Geschichtenautomat

Abbildung 5: Geschichtenautomat

Beim Modell des Geschichtenautomaten handelt es sich um ein Game, welches Geschichten generieren

kann. Denn eine Erzählung ist nichts anderes als eine »Abfolge von Ereignissen«, die nicht unbedingt

vorgegeben werden müssen. Der Spieler kann beim Geschichtenautomaten, wie beispielsweie im Computerspiel Die Sims, die Handlungen frei wählen und die Reihenfolge selbst bestimmen, wodurch

sich eine eigene Story entwickelt. Voraussetzung dafür ist, dass der Spieler mehrere Wahlmöglichkeiten hat das Spiel zu gestalten. Verschiedene Optionen führen allerdings zu weiteren vielen Optionen.

Schließlich können zu viele Endversionen einer Story entstehen, die nicht umgesetzt werden können.


Damit die Geschichte überschaubar bleibt, müssen alle optionalen Elemente immer wieder zusammen-

geführt werden. Frank Raki beschreibt das Modell des Geschichtenautomaten als ein »Patchwork einzel-

ner Elemente«, bei dem der Spieler die »Story-Elemente im narrativen Raum des Games« wählen kann. Während die Pflichtelemente den Spieler ans Ziel bringen, geben die optionalen Elemente der Geschich-

te eine persönliche Note. [11]

4.3 Der Flow-Zustand Wenn wir beim Spielen eines Games die Zeit und alles um sich herum vergessen, dann sind wir im Spiel voll und ganz versunken und befinden uns in einem Flow-Zustand. Die Flow-Theorie beschrieb Mihály

Csíkszentmihályi 1975 mit dem »Effekt, der beim Spieler eintritt, wenn er in der Lage ist, die Heraus-

forderung zu meistern«. Denn nachdem wir etwas mit Erfolg erreicht haben, wird unser Belohnungs-system angesprochen. Wir empfinden Freude und Zufriedenheit, da im Gehirn das Glückshormon Dopa-

min aktiviert wird. [11]

Ziele und Herausforderung

Einer der wichtigsten Voraussetzungen für Interesse und Aufmerksamkeit in Games sind Ziele. Spieler

werden belohnt und motiviert, wenn sie sich z. B. hochleveln, Gegenstände oder Punkte sammeln, ein Rätsel lösen, einen Feind bekämpfen oder die Welt retten können. Da sich die Story dem Gameplay

unterordnen muss, braucht der Spieler klare Ziele. Laut Frank Raki spielen im Gameplay vorallem Ob-

jekte wie »Waffen, Erste-Hilfe-Kästen, Rätsel, Strategien usw.« eine große Rolle und weniger »Men-schen und ihre Probleme«. Damit das Spiel spannend bleibt, braucht das Spiel auch Hindernisse, die es

dem Spieler erschweren, sein Ziel zu erreichen. Neben dem Hauptziel kann es auch mehrere Teilziele im Verlauf der Spielabschnitte geben. Dabei muss sich der Schwierigkeitsgrad der Hindernisse stetig

erhöhen, damit die Aufgaben nicht zu leicht erscheinen und das Spielinteresse aufrechterhalten bleibt.

[11]

Flow-Zustand aktivieren

Doch was ist nötig, damit dieser Flow-Zustand beim Spielen eintreten kann? Der Spieler braucht ein klares Ziel, eine Herausforderung (z. B. durch Hindernisse, Regeln, Zeitdruck und steigernde Schwie-

rigkeitsgrade), Entscheidungsfreiheit und Feedback über den Spielstand (z. B. durch Punktesystem,

Fortschrittsbalken, Zeitlimit, Lebensenergie oder Highscore). [11]

Schwierigkeitsstufen

Um den Flow-Zustand aufrechterhalten zu können, muss der Spieler mit angemessenen Schwierigkeits-stufen gefordert werden. Denn eine Über- oder Unterforderung der Aufgaben ist für das vertiefte Spie-

lerlebnis kontraproduktiv. [11] Die Schwierigkeit in Spielen kann häufig vom Benutzer zu Beginn eigen-

ständig gewählt werden (z. B. leicht, mittel, schwer). Es gibt aber auch Games, die das Spielniveau dynamisch anpassen oder keine Schwierigkeitsgrade haben. Feil und Scattergood nennen sechs Kri-

terien, die die Fähigkeiten des Spielers herausfordern können. Dazu zählen »Zeit«, »Geschicklichkeit«, »Ausdauer«, »Gedächtnis und Wissen«, »Klugheit und Logik«, »Steuerung« und »Umgang mit den

verfügbaren Ressourcen«. Die meisten Spiele haben dabei allerdings nicht alle Kriterien eingebunden.

Es hängt immer vom jeweiligen Game selbst ab, ob und wie viele Schwierigkeitenstufen notwendig sind. [6]


4.4 Storyworlds Storywelten in Games sind »schlichter«, aber auch »mächtiger« als die Realität. [11] In der Medien-branche werden fiktive Welten, die Geschichten erzählen, als Storyworlds bzw. Storywelten bezeichnet.

Beim Erschaffen von Storywelten werden weitaus mehr Details über die Welt konzipiert als der Rezi-

pient erzählt bekommt. »Je besser man eine Welt definiert, umso authentischer wirkt sie. Auch wenn viele Details, wie beim Eisberg, unter der Oberfläche versteckt sind, tragen sie jedoch den Teil, der

offenbart wird«, erklärt Jörg Ihle. Zudem verdeutlicht er, dass Games üblicherweise schon lange auf Weltkonzepten aufgebaut sind, da sie »nur begrenzte Erzählmöglichkeiten haben, dennoch aber kom-

plexe Welten abbilden können«. [7]

Hauptelemente einer Storyworld

Jörg Ihle nennt sechs Grundelemente [7], die nach seiner Empfehlung für das Erschaffen einer Storywelt

definiert werden sollten:

• Konzept: Die Beschreibung über die Auswirkung eines Schlüsselereignisses in der Storywelt (Fragen wie, was wäre, wenn…).

• Setting: Ort und Zeitraum der Welt. • Genre: Wahl eines Genres oder eine Kombination mehrerer Genres, wodurch eigene Klassifi-

kationen entstehen können. • Bewohner: Welche Bewohner bevölkern die Welt? Dabei kann es sich um Menschen, Fantasie-

wesen, wie Elfen oder Vampire, Helden, Götter, Tiere oder Pflanzen handeln. Selbst alle Gegen-stände, die Emotionen vermittelt oder sprechen können, zählen dazu.

• Regeln: In zwei Bereichen können Regeln aufgestellt werden: 1. »Naturgesetze« (wie physika-lische Gesetze, aber auch Magie) und 2. »Themen und Werte«.

• Konflikt: Es gibt drei Stufen von Konflikten: 1. »Persönliche/Umwelt: EMOTIO« (innere und äußere Konflikte eines Individuums), 2. »Gesellschaftliche/Politische: RATIO« (»kulturelle, politische oder wirtschaftliche Konflikte« einer Gemeinschaft) und 3. »Geistige: SPIRITO« (Konflikte über »Philosophien, Ideologien und Glauben«). Eine Storyworld, die auf Konflikten aller Stufen basiert, entspricht der Wirklichkeit am meisten. Bei den Konflikten geht es aller-dings nicht nur um Probleme, sondern auch um Gegensätze, die die Welt ins Gleichgewicht bringen.

26 Projektplanung eines interaktiven Webspiels


5.1 Meilensteine

Abbildung 6: Meilensteine

Theorie: Storytelling

Theorie: GamesKonzeption:

Story

Konzeption: Gameplay

Requirements Design

Implementierung Test Bug fixes

Performance Optimierung

Webserver Plakat

Projektplanung eines interaktiven Webspiels 27

5.2 Requirements

5.2.1 Anforderungen an das Webspiel • Game: 2D, experiementelles Spiel mit Schwerpunk Storytelling, Single-Player • Zielgruppe: Geschlecht: m/w, Sprache: deutsch, Alter: ab 12

Begründung für diese Altersfreigabe: Gemäß § 14 JuSchG.: »Diese Spiele sind bereits deutlich kampfbetonter. Die Spielszenarien sind […] futuristischen oder märchenhaft-mystischen Kontext angesiedelt, so dass sie ausreichend Distanzierungsmöglichkeiten für den Spieler bieten.« [13]

• Genre: Fantasy, Adventure und Rollenspiel • Zielplattformen: Desktop-Webbrowser • Eingabemethoden: Maus und Tastatur • Browser Optimierung: Firefox und Chrome • Desktop oder Mobile: Nur als Desktop-Anwendung, keine Mobile Optimierung • Testgeräte: 24 Zoll Monitor, 15 und 17 Zoll Notebooks • Mehrsprachigkeit: Nein, nur deutsch • Musik: Ja (TerraSound [14] und FreeSound Effects [15]) • Datenbank: Keine Datenbank notwendig • Versionierung: Ja (GitHub) • Webserver und Domain: Ja (STRATO) • Monetarisierung: Keine

5.2.2 Wahl der Technologien Implementierung

• JavaScript (ECMAScript 2015), JSON, HTML5 und CSS3 • Node.js (9.4.0 Current, latest feature): Serverseitige Plattform für JavaScript, um mit npm

(Node Package Manager) die Dependencies zu managen. • Gulp.js: Um das Phaser Projekt zu bauen. • Phaser CE (Community Edition) Version 2.10.3: HTML5 Game Framework, Game Engine

2D, kostenlos und Open Source, WebGL und Canvas rendering • cmder Console Emulator (Full Edition): Terminal • Visual Studio Code: Code-Editor für die Entwicklung von Webanwendungen • Yo (Yeoman.io): Programm zum Ausführen von Generatoren • Generator-Phaser-Plus v2.4.1: Ein npm Package, zum Bauen eines Phaser Projekts • GitHub: Zur Versionierung/Versionsverwaltung von Dateien, Code und Verzeichnissen • PNGGauntlet: Optimierung von PNG Dateien. • StarUML.io: UML Diagramme • WinSCP: FTP-Client

Design

• Moqups: Online Mockup, Wireframe & UI Protoryping Tool • Adobe Illustrator CC 2018: Vektorgrafik und Illustration • Adobe Animate CC 2018: Vektoranimation und -grafik • Adobe After Effects CC 2018: Special Effects und Animation • Adobe Media Encoder CC 2018: Bearbeitung von Mediendaten • Video Time Reversal 2: Video Bearbeitungsprogramm zur rückwärts Konventierung • Tiled Map Editor (Version 1.1.2): 2D Game Level Maps


5.2.3 Webinterface: Use Cases Das Webinterface soll folgende Anforderungen erfüllen: Nutzer können

• die Startseite sehen

• den Vollbildmodus aktivieren

• den Vollbildmodus deaktivieren

• die Steuerung einblenden

• die Steuerung ausblenden

• das Impressum sehen

• das Webspiel spielen

• Cut Scenes überspringen

• das Textfeld maximieren

• das Texfeld minimieren

• das Webspiel verlassen

Abbildung 7: Webinterface Game

"Black Air Knights", Use Case Diagram

5.2.4 Webinterface: Seitenstruktur Aus dem Use-Case-Diagramm des Webinterfaces ergibt sich folgende Seitenstruktur:

Abbildung 8: Webinterface Game

"Black Air Knights", Seitenstruktur

• index.html o Navigation

Use Case 1: view home Use Case 2: enter fullscreen Use Case 3: leave fullscreen Use Case 4: show control Use Case 5: hide control

o Game Use Case 7: play game Use Case 8: skip cut scene Use Case 9: maximize textbox Use Case 10: minimize textbox Use Case 11: quit game

• impressum.html o Use Case 6: view imprint


5.2.5 Webinterface: Mockups Die Seiten index.html und impressum.html sollen wie auf den folgenden Mockups aussehen:

Abbildung 9: Mockup Game "Black Air Knights", index.html

Abbildung 10: Mockup Game "Black Air Knights", index.html,

show control

Abbildung 11: Mockup Game "Black Air Knights",

index.html, view home, warning

Mockup: index.html

Die Seite index.html besteht aus den

Menüpunkten Home, Enter/Leave Full-

screen, Steuerung und Impressum. Zu-

dem wird auf der Seite zentriert und in

Dauerschleife ein Video/Intro abge-

spielt. Der Button Spielen startet das

Game.

Mockup: index.html (Steuerung)

Der Menüpunkt Steuerung auf der

Seite index.html blendet ein Textfeld

ein, welches die Steuerung des Web-

spiels erklärt. Mit dem Button Aus-

blenden wird dieses Texfeld wieder

ausgeblendet. Dieses Textfeld kann

auch während des Spielens angezeigt

werden, ohne dabei die Seite neu zu

laden, damit das Spiel nicht unterbro-

chen wird.

Mockup: index.html (Home)

Der Menüpunkt Home lädt die Seite

index.html. Um den User während

dem Spiel vor dem Verlust des Spiel-

stands zu warnen, wenn er auf Home

klickt, wird vor der Ausführung ein

Textfeld mit der Warnung »Achtung:

Der Sielstand geht dadurch verloren.«

eingeblendet. Mit dem Button Spiel

verlassen wird die index.html geladen.

Der Button Abbrechen blendet das

Textfeld wieder aus, so dass weiter

gespielt werden kann.


Abbildung 12: Mockup Game "Black Air Knights", impressum.html

Mockup: impressum.html

Die Seite impressum.html wird in ei-

nem neuen Tab geöffnet, damit der

Spielstand nicht verloren gehen kann.

Das Impressum besteht aus den Über-

schriften Impressum, Konzept, Design

und Programmierung sowie Verwende-

te Musik und Sound Effekte. Es werden

dabei Kontaktdaten sowie die Quellen

der verwendeten Musik angegeben.

Über den Menüpunkt Home wird die

Startseite wieder geladen.


5.3 Link zum Webspiel Bitte benutzen Sie Ihren Firefox oder Chrome Browser auf einem Desktop Rechner, da dieses Spiel für Desktop Monitore und diese Browser optimiert ist. Auf einem mobilen Endgerät oder Tablet wird das

Spiel dieser Bachelorarbeit nicht spielbar sein.

Das Spiel »Black Air Knights« ist unter folgendem Link aufrufbar:

https://zaviska-art.com/black-air-knights/

Falls Sie Probleme haben sollten, dieses Spiel über Ihr Internet fließend zu spielen oder Ihnen die

Ladezeit zu lange dauert, empfehle ich, dieses Webspiel über die im Anhang beigelegte DVD zu spielen.

Öffnen Sie dafür die Datei index.html mit Ihrem Firefox oder Chrome Browser.

Ordnerpfad der beigelegten DVD:

code → interactive-storytelling-im-web → dist → index.html

ACHTUNG: SPOILER ALARM

Ab der nächsten Seite wird die Entwicklung der Gamestory dokumentiert. Falls Sie dieses Spiel ohne

Vorwissen erleben möchten, empfehle ich Ihnen, es zu spielen, bevor Sie weiterlesen.

32 Konzeption

6 Konzeption

6.1 Main Story und Storywelten Wahl eines Urthemas

Die selbst erfundene Geschichte von »Black Air Knights« hat das Urthema Flucht als Kernthema. Die Beschreibung zum Masterplot Flucht wird in Kapitel 3.2 beschrieben.

Storyentwicklung nach Osbornes Checkliste und Voglers Heldenreise

Es wurde eine eigene Geschichte mithilfe von Osbornes Checkliste entwickelt. Als Vorlage wurde die Geschichte von Blaubart der Brüder Grimm gewählt, da sie recht kurz, aber zugleich (für mich per-

sönlich) sehr spannend ist. Um die Kreativitätstechnik von Osbornes Checkliste mit den Stationen von Voglers Heldenreise verbinden zu können, wurde die Geschichte von Blaubart zunächst selbst analysiert

und mit eigenen Worten den 12 Stationen der Heldenreise zugeordnet. Anschließend wurde diese Ge-

schichte nach Osbornes Checkliste verändert bzw. neu erfunden.

(SOLL-Zustand: Konzeption vor der Implementierung)

Voglers Heldenreise9: Stationen

Blaubart [10] von Brüder Grimm Veränderung von Blaubart durch Osbornes Checkliste10: Black Air Knights

AKT 1

Ordinary World

Ein Mann lebte mit seinen drei

Söhnen und einer schönen

Tochter im Wald.

1. Ort: Schwebende Stadt in den Wolken.

2. Handlung: Eine Familie (Eltern, ein Sohn

und zwei Töchter) lebte am Rande der schwe-

benden Stadt in einem kleinen Haus und führ-

ten ein Familienbetrieb mit einer Darcono-

Farm (Seepferdchen-Nutztiere zum Reiten und

Fliegen).

3. Held und Konflikt: Der Sohn Damian Black

träumte davon, einmal ein Luftritter, wie sein

Onkel, zu werden. Jedoch sollte er später ein-

mal die Farm übernehmen. Er übernahm be-

reits jetzt schon einige Aufgaben auf der Farm, die ihn sehr langweilten.

Call to Adventure

Einestages hielt ein goldener

Wagen mit sechs Pferden und

vielen Bedienten vor dem Haus.

Der König Blaubart stieg aus und

bat den Mann seine Tochter zur

Gemahlin zu nehmen.

4. Besuch: Am Abend als es schon dunkel war,

landete ein Luftschiff, angetrieben von vier

fliegenden Delphinen, vor dem Haus der Fami-

lie Black. Das Luftschiff gehörte den Luftrit-

tern, die neue Mitglieder suchten.

5. Angebot: Sir Lorcan, der Kapitän der Luft-

ritter, stieg aus dem Luftschiff und fragte die

Eltern, ob eines ihrer Kinder sich zum Luftrit-

ter ausbilden lassen und heute noch mitkom-

men will.

6. Bedenkzeit: Kapitän Sir Lorcan gab der Fa-milie etwas Bedenkzeit. Falls eines der Kinder

9 Siehe Beschreibung zu Voglers Heldenreise in Kapitel 3.5.3. 10 Siehe Beschreibung von Osbornes Checkliste in Kapitel 3.1.

Konzeption 33

mit der Ausbildung zum Luftritter beginnen

will, soll es noch diese Nacht auf das Luftschiff

kommen. Ansonsten würden sie, bevor die

Sonne aufgeht, weiterziehen.

Refusal of the Call

Obwohl der Mann von dem

blauen Bart des Königs etwas

erschrocken war, willigte er ein.

Seine Tochter war ebenfalls von

dem Anblick des blauen Barts

erschrocken, weswegen sie sich

weigerte.

7. Weigerung: Als Damian davon hörte, war er

so begeistert, dass er gleich mitkommen

wollte. Jedoch lehnten seine Eltern das Ange-

bot sofort ab.

8. Streit: Als der Kapitän sich wieder auf sein

Luftschiff zurückgezogen hat, versuchte

Damian seine Eltern umzustimmen. Doch es

führte nur zum Streit, weshalb er Hausarrest

bekam und auf sein Zimmer gehen sollte.

9. Arrest: Sein Zimmer wurde vorbeugend von

seinen Eltern abgeschlossen, damit er nicht

heimlich zum Luftschiff rausschleicht.

Meeting with the Mentor

Dem Vater gelang es, seine

Tochter zu überreden. Jedoch

bat sie ihre Brüder, ihr sofort zu

helfen, wenn sie sie schreien

hören. Ihre Brüder versprachen ihr zu helfen.

10. Vorbereitung: Damian wollte um jeden

Preis Luftritter werden, auch wenn er sich aus

dem Zimmer schleichen musste. Er bereitete

sich auf sein Abenteuer vor, indem er alles

Wichtige in einen Rucksack packte. 11. Erinnerung: Kurz bevor er gehen wollte,

sah er ein kurzes Leuchten in seinem Zimmer.

Es handelte sich um ein Amulett. Er erinnerte

sich, wie sein Onkel ihm es mit den Worten

»trage es auf Reisen, es wird dich in Not be-

schützen« schenkte. Schnell hat er es noch um

seinen Hals gelegt.

12. Tür: Er versuchte die Tür zu öffnen. Aber

als sie sich nicht öffnen lies, musste er einen

anderen Weg finden, um das Haus verlassen

zu können.

Crossing the First Threshold

Mit dem Wagen reiste sie mit

König Blaubart zu seinem Schloß.

13. Neue Welt: Er öffnete das Fenster, kletter-

te hinaus und schlich sich zum Luftschiff. Dort

angekommen wurde er herzlich vom Kapitän

Sir Lorcan empfangen. Damian musste nur

noch wählen, ob er die Schwert- oder Magie-

künste lernen will. Er entschied sich für die

Schwertkünste und so konnte sein Abenteuer

als Luftritter beginnen.

AKT 2

Tests, Allies, Enemies

Im Schloß war alles schön und

prächtig. Der König und sie als

neue Königin waren glücklich.

Alle Wünsche der Königin wur-

den erfüllt.

Doch einestages musste der

König eine große Reise antreten.

Er überließ ihr alle Schlüssel zum

ganzen Schloß. Er erlaubte ihr

jede Tür aufzuschließen bis auf

14. Luftschiffschule.: Das Luftschiff war mit

vielen Gemeinschaftsräumen zum Trainieren,

Speisen und Schlafen sehr gut ausgestattet. Es

hatte zudem noch eine große Bibliothek für

die Magierklasse und eine Waffenkammer für die Schwertkämpfer. Kapitän Sir Lorcan lehrte

die angehenden Luftritter, neben anderen

Mentoren, ebenfalls aus. Damian lernte viele

neue Leute kennen, darunter auch ein Lehr-

34 Konzeption

eine Kammer. Zu dieser verbote-

nen Kammer gehörte ein kleiner

goldener Schlüssel. Er drohte ihr

damit, dass ihr »Leben verfallen«

sein wird, wenn sie sich nicht an

diese Regel hält.

Sie öffnete jede Tür und sah

Räume voller Reichtum.

Nachdem sie alles gesehen

hatte, musste sie mit ihrer

Neugier kämpfen, nicht auch

noch die verbotene Kammer zu

öffnen. Sie dachte, dass sich

etwas Besonderes in dieser

Kammer befindet, weil der

Schlüssel aus Gold war.

Sie redete sich ein, dass sie doch

bestimmt niemand sieht, wenn

sie nur kurz die verbotene Tür

öffnet.

lingsmädchen in seinem Alter, die die Magie-

künste wählte. Sie freundeten sich an und

trainierten auch zusammen.

15. Angriff: Während der Ausbildungszeit

wurde das Schiff von Schattengeister angegrif-

fen. Alle Luftritter kämpften gegen die Schat-

tengeister und versuchten die Lehrlinge eben-

falls zu beschützen. Nur Damian war so mutig,

seine bisherigen Schwertkünste einzusetzen

und konnte ebenfalls die Gegener bekämpfen.

Kapitän Sir Lorcan war nach dem Kampf sehr

stolz auf Damians Kampfgeist und wurde

somit zu seinem Lieblingsschüler.

16. Prüfung: Eines Tages musste Kapitän Sir

Lorcan für einen kurzen Zeitraum das Luft-

schiff verlassen und übergab seinem Lieblings-

schüler Damian die Verantwortung für die

Waffenkammer, in dem er als einziger den dazughörigen Schlüssel bekam. Er durfte jede

Waffe ausprobieren bis auf das einzige golde-

ne Schwert aus der Kammer. Falls er sich nicht

an dieses Gebot hält, drohte ihm der Austritt

der Luftritter. Als er alleine in der Kammer

war, probierte er jede Waffe aus. Doch die

Neugier des verbotenen Schwerts wurde im-

mer größer bis er sich nicht mehr zusammen-

reißen konnte. Er dachte sich, dass es doch

niemand merkt, wenn er dieses Schwert nur

einmal kurz in den Händen hält.

Approach to the Inmost Cave

Sie öffnet die verbotene

Kammer.

Ein Strom Blut schwomm ihr

entgegen und sie sah tote

Frauen an den Wänden hängen.

Vor Schreck schlug sie die Tür

wieder zu.

Dabei fiel der goldene Schlüssel

in das Blut.

Sie versuchte den Schlüssel von

den Blutflecken zu reinigen,

jedoch war es zwecklos. Denn

das Blut kam immer wieder

erneut zum Vorschein.

Dann hatte sie die Idee den

Schlüssel über Nacht ins Heu zu

legen, so dass das Blut

aufgesaugt wird.

17. Das verbotene Schwert: Er öffnete die

Vitrine zu dem goldenen Schwert und nahm es

raus. Dann hebte er das Schwert in die Luft als

das Schwert plötzlich einen lauten Ton und

elektrischen Schlag von sich gab. Er ließ er-

schrocken das Schwert fallen.

18. Schattenreich öffnen: Plötzlich drehte sich

der Raum und es strömte Blut in den Raum

hinein. Wie ein Nebel bildete sich im Raum

eine rote Atmosphäre. Dann hörte er seltsame Schreie und Kettengeräusche. Er sah einige

Gefange, die in einzelne Zellen eingesperrt

waren und von Schattengeister bewacht wur-

den.

19. Schattenreich schließen: Er suchte eine

Waffe, um sich verteidigen zu können. Er

greifte zum goldenen Schwert. Doch als er

diesen wieder in die Luft hieb, verschwand der

rote Nebel wieder und der Raum drehte sich

erneut. Zurück in der alten Dimension, legte

er das Schwert in die Virtrine zurück. Jedoch

fing das Schwert an zu bluten. Damian ver-

suchte das Blut zu entfernen, aber das

Konzeption 35

Schwert hörte nicht auf zu bluten. Aus Panik

hat er ein Tuch darum gewickelt und es in eine

Truhe versteckt. Er hoffte, dass das Schwert

am nächsten Tag aufhört zu bluten.

Ordeal Am nächsten Tag kehrte König

Blaubart zurück. Er forderte

sofort die Schlüssel zurück und

zählte sie. Sie hoffte, dass er das

Fehlen des goldenen Schlüssels

nicht bemerkte. Jedoch fragte er,

wo der Schlüssel zur verbotenen

Kammer ist.

Sie log ihn an, dass sie den

Schlüssel im Heu verloren hat.

Der König glaubte ihr allerdings

nicht und wurde wütend. Er

sagte, dass sie die Kammer

betreten und den Schlüssel

wegen den Blutflecken ins Heu gelegt hat. Sie soll deswegen

jetzt sterben.

Daraufhin musste sie den

blutigen Schlüssel holen.

Sie bat den König, noch vor

ihrem Tod ihr Gebet zu machen.

Er erlaubte ihr dies.

Sie lief die Treppe hinauf und rief

aus dem Fenster um die Hilfe

ihrer Brüder.

Ihre Brüder hörten sie im Wald

und eilten mit ihren Pferden

sofort zu ihr.

Der König zog sie an ihren Haaren und wollte sie mit einem

Messer erstechen als plötzlich

die Brüder erschienen. Sie

befreiten ihre Schwester und

töteten den König, welcher

ebenfalls zu den toten Frauen in

der verbotenen Kammer

aufgehängt wurde.

20. Lorcans Rückkehr: Am nächsten Tag kam

Kapitän Sir Lorcan zurück auf das Luftschiff

und wollte von Damian sofort den Schlüssel

zur Waffenkammer zurückhaben. Er prüfte

mit Damian die Waffenkammer und fragte

ihn, wo das goldene Schwert denn sei. Damian

kam mit einer Ausrede, dass ihm das auch erst

jetzt auffällt und er es leider nicht weiß.

Kapitän Sir Lorcan war sehr enttäuscht und

wurde zornig. Er erkannte, dass er das

Schwert nur versteckt hat, weil es blutete,

nachdem er es trotz Verbots berührt hatte.

21. Verbannung: Nun sollte Damian bestraft

werden. Sir Lorcan streckte seine Hand aus

und das goldene Schwert flog in seine Hand.

Er öffnete das Schattenreich und sperrte Damian dort in eine Zelle ein.

22. Ausbruch: Damian sitzt hoffnunglos und

verzweifelt in seiner Zelle. Er wusste nicht, wie

er sich befreien sollte. Dann schaute er sich

sein Amulett von seinem Onkel an. Er dachte,

dieses Amulett würde ihn beschützen. Da es

für ihn in dieser Not nun nutzlos schien, fing

er das Weinen an, während er es in den Hän-

den hielt. Eine Träne fiel auf den Anhänger

und plötzlich fing es an, kurz zu leuchten. Er

rieb daraufhin mit seinem Hemd das Amulett

trocken. Nun leuchtete das Amulett länger

und ein kleines Lichtwesen kam aus dem

Stein. Es schien ihm helfen zu wollen und flog

zu einem Wächter, der gerade schlief, um ihn

die Schlüssel zu stehlen. Nun konnte Damian

seine Zelle öffnen und sich hinausschleichen.

Das Lichtwesen blieb beschützend an seiner

Seite. 23. Unerwartete Begegnung: Jedoch sahen

ihn ein paar Dämonen-Wächter. Damian

musste sich verteidigen und besiegte sie alle.

Eine dunkle Gestalt aus einer Zelle rufte ihn

plötzlich her und bat ihn um Hilfe. Es war ein

geschwächter Mann, der ihn sehr dankbar

war, dass er aus seiner Zelle befreit wurde.

Nun kamen weitere Dämonen und sie kämpf-

ten nun zu zweit. Der unbekannte Mann hatte

magische Kräfte und brauchte somit keine

Waffe, um zu kämpfen. Er war glücklich, dass

seine Kräfte wieder zurückkamen, denn in der

Zelle wurden sie absorbiert.

36 Konzeption

24. Endgegner: Als letzter Gegner erschien

Kapitän Sir Lorcan. Nach einem harten Kampf

besiegten sie auch ihn. Jedoch wurde Damian

am Ende des Kampfs schwer getroffen, so

dass er ohnmächtig zu Boden fiel.

Reward Die Rettung der Schwester und

die Gerechtigkeit durch Rache an

den möderischen König Blaubart.

25. Auferstehung: Damian wachte auf und

findet sich in einem Bett wieder. Der unbe-

kannte Mann sprach zu ihm und gab sich zu

erkennen. Er sagte, dass er Kian der richtige

Kapitän des königlichen Luftschiffs ist, welcher

von Sir Lorcan gefangen genommen wurde

und sein Luftschiff übernommen hatte.

24. Belohnung: Aus Dankbarkeit und zu Ehren

wurde Damian von Kapitän Sir Kian zum Luft-

ritter Black geschlagen und gehörte ab sofort

zum festen Bestandteil der königlichen Luft-

ritter.

25. Wunsch: Damian war sehr stolz, dass er

nun ein richtiger Luftritter wurde. Er bat

jedoch Sir Kian um einen Gefallen. Er wollte seine Familie für ein paar Tage besuchen und

sich für seine Flucht entschuldigen, um sich

richtig von seiner Familie verabschieden zu

können.

AKT 3

The Road Back

Die Brüder kehrten mit ihrer

Schwester nach Hause zurück.

26. Heimflug: Kapitän Sir Kian willigte ein und

das Luftschiff machte sich auf den Weg zur

Darcono-Farm.

Resurrection - 27. Wiedersehen: Damian hatte vor der

Reaktion seiner Eltern Angst und klopfte

vorsichtig an der Haustür. Seine Eltern und

Geschwister waren jedoch sehr glücklich ihn

wiederzusehen.

The Return with the Elixir

Das Schloß und alle Schätze des

Blaubarts gehörten nun der

Königin allein.

28. Versöhnung: Obwohl die Eltern gegen die

Luftritter Ausbildung waren, sind sie nun

richtig stolz auf ihn und schenkten ihm einen

Darcono, welcher ihn auf seinen Reisen

begleiten soll. Auch sein Onkel kam zu Besuch

und war sehr stolz auf den neuen Luftritter.

29. Abschied: Damian verabschiedete sich von

allen und stieg wieder in das Luftschiff ein.

Das Luftschiff hob ab und verschwand am

Horizont Richtung Sonnenuntergang. Tabelle 2: SOLL-Zustand: Storyentwicklung nach Osbornes Checkliste und Voglers Heldenreise

Konzeption 37

Konzeption der Hauptelemente der Storyworld von »Black Air Knights«

• Konzept: Was wäre, wenn die Erdoberfläche von einem magischen Meteoriten-Sturm getroffen

wurde und somit bewohnbare Erdstücke am Himmel schweben lässt? Ein Reich auf Wolken, schwebende Städte, Wälder, Wüsten, Flüsse, Wasserfälle und Seen. Der Meteoriten-Einschlag

hat die Meereswelt verzaubert und verändert. Meerestiere können seitdem fliegen, selbst wenn sie keine Flügel besitzen. Im Prinzip schwimmen sie in der Luft. Neue Lebewesen, wie gute

Licht- und böse Schattengeister, haben die Meteoriten ebenfalls mitgebracht, die für die Men-

schen als Energiequelle sehr nützlich wurden. Es gibt viele Luftschiffe und Königreiche.

• Setting: Schwebende Inseln auf Wolken des Königreichs Livania in einem Paralleluniversum

im fliegenden Zeitalter des 18. Jahrhunderts, nach Einschlag der magischen Meteoriten.

• Genre: Fantasy und Action-Adventure.

• Bewohner: Arme und reiche Menschen, Königsfamilie Livania, Luftritter, Luftpiraten, Magier,

fliegende Meerestiere, Drachen, Licht- und Schattengeister, Götter, Flora teilweise mit magi-schen Pflanzen, vielfältige Tierwesen von Wald-, Meeres- bis Wüstenfauna.

• Regeln: Die physikalischen Naturgesetze haben sich durch den magischen Meteoriten ver-

ändert. Meerestiere können fliegen. Selbst Menschen können mithilfe von Rüstungen mit Mete-oriten-Steinen und Lichtgeister fliegen. Die Welt hatte mit Schattengeister zu kämpfen, die seit

dem Meteoriten-Einschlag auf dieser Welt leben. Luftritter (Schwertkämpfer und Magier) be-schützten diese Welt und wurden als himmlische Helden verehrt. Es war eine große Ehre als

Luftritter zu dienen. Die allerbesten Luftritter gehörten der livanischen königlichen Garde an.

• Konflikt: o 1. Persönliche/Umwelt: Die Hauptfigur Damian Black möchte ein Luftritter werden,

aber seine Eltern erlauben ihm diesen Wunsch nicht, weil er später einmal die familien-

betriebene Darcono-Farm übernehmen soll (Zielkonflikt, siehe Kapitel 3.2). o 2. Gesellschaftliche/Politische: Die Bewohner der drei Himmelreiche werden von Dä-

monen und Monster bedroht. Es gibt Menschen, die sich mit den bösen Kräften ver-

bunden haben und ebenfalls gegen die guten Luftritter kämpfen. o 3. Geistige: Die Bewohner glauben an unterschiedliche Götter. Manche Götter haben

die bösen Dämonen und Monster, andere die guten Energiegeister als Verbündete. Dann gibt es aber auch Menschen, die sich ganz den Göttern abgewendet haben. Sie wollen

weder die Macht der Energiegeister noch der Dämonen nutzen und wünschen sich die

Welt vor dem Meteoriten-Sturm zurück.

6.2 Charaktere Archetypen nach Vogler (Heldenreise)

• Held und Schatten: Damian Black • Mentor: Luan Black, Sir Lorcan, Master Enno, Master Jukka • Schwellenhüter: Ava und Tamo Black, Sir Lorcan, Tumbras • Herold: Sir Lorcan • Gestaltenwandler: Sir Lorcan • Verbündete: Lina und Luan Black, Elea Noel, Sir Kian, Lumitras, Darconos • Trickster: Master Enno, Master Jukka

38 Konzeption

Characters and Relationships Map

Abbildung 13: Characters and Relationships Map

Konzeption 39

6.3 Gameplay Konzeption der interaktiven Erzählstruktur

(SOLL-Zustand: Stand vor der Implementierung)

Abbildung 14: SOLL-Zustand: Konzeption der interativen Erzählstruktur

Beschreibung der Erzählstruktur

Story-point

Station der Heldenreise

Cut Scene

Ort Hauptziel Gameplay

AKT 1

1 Ordinary World Ort, Handlung,

Held und Konflikt

1.1 Blacks

Darcono

Farm

Dracono-Farm

erkunden

Gegenstände

ansehen und

benutzen

2 Call to

Adventure

Besuch, Angebot,

Bedenkzeit

2.1 Blacks Haus Eltern

überreden

Interaktiver Dialog

3 Refusal of the

Call

Weigerung, Streit,

Arrest

3.1 Damians

Zimmer

Flucht

vorbereiten

Gegenstände

einsammeln

4 Meeting with

the Mentor

Vorbereitung,

Erinnerung, Tür

4.1 Damians

Zimmer

Fluchtweg und

Luftschiff finden

Zimmer erkunden,

zum Luftschiff gehen,

Zeitbegrenzung bis die Sonne aufgeht:

Luftschiff fliegt

weiter

5 Crossing the

First Threshold

Neue Welt

5.1 Luftschiff Kapitän Lorcan

treffen

Interaktiver Dialog:

Wahl der Kampfkunst

40 Konzeption

(Schwertkampf oder

Magie)

S Luftschiff Meister Enno

treffen

Interaktiver Dialog,

Schwert Tutorial

M Luftschiff Meister Yukka

treffen


Magie Tutorial

AKT 2

6.a Tests, Allies,

Enimies

Luftschiffschule

6.1 Luftschiff:

Arena

Magie Schülerin

Elea treffen


Training: Duell

6.2 Luftschiff:

Arena

Schwertkampf

Schülerin Elea

treffen


Training: Duell

6.3 Luftschiff:

Arena

Mit Elea

anfreunden

Interaktiver Dialog

6.b Tests, Allies,

Enimies Angriff

6.4 Luftschiff Schattengeister bekämpfen

Kampfsystem (Echtzeit oder

rundenbasiert), Elea

kämpft als Damian’s

Verbündete

6.c Tests, Allies,

Enimies Prüfung

6.5 Luftschiff:

Waffen-

kammer

Versuchung

widerstehen

Raum erkunden,

Gegenstände

ansehen, benutzen

6.6 Luftschiff:

Magier-

Bibilothek

Versuchung

widerstehen

Raum erkunden,

Gegenstände

ansehen, benutzen

7.a Approach to the

Inmost Cave

Das verbotene

Schwert,

Schattenreich

öffnen

7.b Approach to the

Inmost Cave Das verbotene

Buch,

Schattenreich

öffnen

7.1 Schatten-

reich

Das verbotene

Schwert finden

Zum Schwert rennen

und sich nicht von

den Schattengeistern

fangen lassen

(Hindernislauf mit

Zeitbegrenzung)

7.2 Schatten-

reich

Das verbotene

Buch finden

Zum Schwert rennen

und sich nicht von

den Schattengeistern

fangen lassen

(Hindernislauf mit

Zeitbegrenzung)

7.c Approach to the

Inmost Cave Schattenreich

schließen

7.3 Luftschiff: Waffen-

kammer

Das verbotene Schwert

verstecken

Raum nach Versteck-möglichkeit

durchsuchen

Konzeption 41

7.4 Luftschiff:

Magier-

Bibilothek

Das verbotene

Buch verstecken

Raum nach Versteck-

möglichkeit

durchsuchen

8.a Ordeal Lorcans Rückkehr

8.b Ordeal Verbannung

8.1 Luftschiff:

Waffen-

kammer

Falls das

Schwert

versteckt wurde:

Mit Lorcan

sprechen

Interaktiver Dialog

8.2 Luftschiff:

Magier-

Bibilothek

Falls das Buch

versteckt

wurde:

Mit Lorcan

sprechen

Interaktiver Dialog

8.3 Schatten-reich: Zelle

Fluchtweg finden

Zelle erkunden

8.c Ordeal Ausbruch,

Unerwartete

Begegnung

8.4 Schatten-

reich

Unbekannten

Mann helfen,

Schattengeister

bekämpfen

Kampfsystem,

unbekannter Mann

kämpft als Damians

Verbündeter

8.d Ordeal Endgegner

8.5 Schatten-

reich

Endgegner

Lorcan

bekämpfem

Kampfsystem,

unbekannter Mann

kämpft als Damians

Verbündeter

9 Reward Auferstehung,

Belohnung,

Wunsch

AKT 3

10 The Road Back Heimflug

10.1 Blacks Darcono

Farm

Damians Familie besuchen

Zum Haus gehen und an die Haustür

klopfen

11 Resurrection Wiedersehen

11.1 Blacks Haus Eltern

ansprechen

Interaktiver Dialog

12.a The Return with

the Elixier

Versöhnung

12.1 Blacks

Darcono

Farm

Luftschiff

betreten

Zum Luftschiff gehen

12.b The Return with the Elixier

Abschied

Tabelle 3: SOLL-Zustand: Beschreibung der Gamestory und des Gameplays

42 Konzeption

6.4 IST-Zustand: Gamestory Während der Implementierung wurde die Story aufgrund von neuen Ideen, Optimierungen, Zeitgründen oder technischen Möglichkeiten wie auch Einschränkungen verändert, verbessert, vereinfacht, erweitert

oder angepasst. Im Folgenden werden die Textpassagen des Erzählers aus dem fertigen Spiel chrono-

logisch aufgelistet. Die interaktiven Story-Abschnitte, wie Dialoge oder schriftliche Rückmeldungen des Gameplays werden dabei ausgelassen.


Black Air Knights: Story und Hauptziel des Spielers

AKT 1

Ordinary

World

KAPITEL 1: BLACKS DARCONO FARM

Familie Black lebte am Rande der schwebenden Stadt des Königreichs Livania. Sie arbeiteten auf der familiengeführten Darcono Farm. Damian war der älteste Sohn von Tamo und Ava Black und hatte eine jüngere Schwester namens Lina. Er musste viele Aufgaben auf der Darcono Farm übernehmen, die ihn allerdings sehr lang-weilten. Damian wollte vielmehr ein Luftritter, wie sein Onkel Luan Black, werden. Aber er sollte später einmal die Darcono Farm übernehmen. Hauptziel: Sammle mind. 10 Energie-Bälle und füttere damit die Darconos. Sprich danach mit Tamo Black.

Call to

Adventure T

KAPITEL 2: SIR LORCANS ANGEBOT

Kapitän Sir Lorcan bat Tamo Black, seinen Sohn zum Luftritter ausbilden zu lassen. Die Reise sollte für Damian noch heute beginnen. Damian war über diese Chance überaus glücklich... doch sein Vater lehnte das Angebot ab. Sir Lorcan gab der Familie Black Bedenkzeit. Das Luftschiff wartete nur eine Nacht. Damian sollte auf das Luftschiff kommen, noch bevor die Sonne aufgeht. Ansonsten wird das Luft-schiff ohne ihn weiterziehen. Hauptziel: Überzeuge Tamo davon, auf das Luftschiff gehen zu dürfen.

Refusal of

the Call 1

Meeting with

the Mentor

KAPITEL 3: DAMIANS FLUCHT

Damian bekam von seinem Vater Hausarrest und befand sich jetzt in seinem Zim-mer. Er wollte um jeden Preis Luftritter werden, auch wenn er sich aus dem Zimmer schleichen musste. Er bereitete sich auf sein Abenteuer vor, indem er alles Wichtige in einen Rucksack packte. Zudem erinnerte sich Damian, wie sein Luftritter-Onkel ihm vor einiger Zeit ein Amulett schenkte. Sein Onkel Luan gab es ihm mit den Worten »trage es auf Reisen, es wird dich in Not beschützen«. Dieses Amulett wollte Damian unbedingt mit-nehmen, nur hatte er vergessen, wo es sich befindet. Hauptziel: Schleiche dich aus dem Haus und steige in das Luftschiff ein. Vergesse nicht den Rucksack und das Amulett mitzunehmen.

Konzeption 43

Crossing the

First

Threshold

KAPITEL 4: DAS LUFTSCHIFF DER BLACK AIR KNIGHTS

Nachdem Damian es geschafft hatte, sich unbemerkt aus dem Haus zu schleichen, stieg er in das Luftschiff der Black Air Knights ein. Das Luftschiff war mit vielen Gemeinschaftsräumen zum Trainieren, Speisen und Schlafen ausgestattet. Es hatte zudem noch eine große Magier-Bibliothek und eine Waffenkammer. Im Luftschiff erwartete ihn Kapitän Sir Lorcan. Hauptziel: Spreche mit Sir Lorcan, wähle eine Ausbildungsklasse und bestehe die erste Kampfübung.

AKT 2

Tests, Allies,

Enemies

KAPITEL 5: DIE TUMBRAS: ANGRIFF DER SCHATTENGEISTER

Das Luftschiff wurde einestages von Schattengeistern angegriffen, die sich Tumbras nannten. Alle Luftritter kämpften gegen die Schattengeister und versuchten die Lehr-linge ebenfalls zu beschützen. Nur Damian war so mutig sich zu verteidigen und ebenfalls gegen die Tumbras zu kämpfen. Hauptziel: Besiege die Tumbras.

Tests, Allies,

Enemies

Weg des Schwertkämpfers

KAPITEL 6: DAS VERBOTENE SCHWERT

Nachdem Damian alle Tumbras be-siegen konnte, war Kapitän Sir Lorcan sehr stolz auf Damians Mut und Kampfgeist. Eines Tages musste Kapitän Sir Lorcan für einen kurzen Zeitraum das Luft-schiff verlassen und übergab seinem Lieblingsschüler Damian die Verant-wortung für die Kapitän-Waffenkam-mer. Damian bekam somit als einziger den Schlüssel zu dieser Waffenkam-mer. Er durfte jede Waffe ausprobieren bis auf das goldene Schwert aus der Kapitän-Waffenkammer. Falls er sich nicht an dieses Gebot hielt, drohte ihm der Austritt der Luftritter. Als er alleine in der Waffenkammer war, sah er sich fast jede Waffe an, doch seine Neugier wurde immer größer. Er dachte sich, dass es doch niemand merken würde, wenn er dieses goldene Schwert nur einmal kurz in den Händen hielt... Hauptziel: Berühre nicht das goldene Schwert.

Weg des Magiers

KAPITEL 6: DAS VERBOTENE BUCH

Nachdem Damian alle Tumbras besiegen konnte, war Kapitän Sir Lorcan sehr stolz auf Damians Mut und Kampfgeist. Eines Tages musste Kapitän Sir Lorcan für einen kurzen Zeitraum das Luftschiff ver-lassen und übergab seinem Lieblingsschü-ler Damian die Verantwortung für die Ka-pitän-Bibliothek. Damian bekam somit als einziger den Schlüssel zu dieser Biblio-thek. Er durfte jedes Buch lesen bis auf das goldene Buch aus der Kapitän-Bibliothek. Falls er sich nicht an dieses Gebot hielt, drohte ihm der Austritt der Luftritter. Als er alleine in der Bibliothek war, sah er sich fast jedes Buch an, doch seine Neugier wurde immer größer. Er dachte sich, dass es doch niemand merken würde, wenn er dieses goldene Buch nur einmal kurz in den Händen hielt... Hauptziel: Berühre nicht das goldene Buch.

44 Konzeption

Approach to

the Inmost

Cave

KAPITEL 7: DAS SCHATTENREICH

Plötzlich drehte sich der Raum und es strömte Blut in den Raum hinein. Wie ein Nebel bildete sich jetzt eine rote Atmosphäre im Raum. Damian hörte seltsame Schreie und Kettengeräusche. Er sah einige Gefangene, die ihn ein-zelne Zellen eingesperrt waren. Damian suchte das goldene Schwert, um damit wieder zurückkehren zu kön-nen. Hauptziel: Finde und berühre das gol-dene Schwert.


Plötzlich drehte sich der Raum und es strömte Blut in den Raum hinein. Wie ein Nebel bildete sich jetzt eine rote Atmos-phäre im Raum. Damian hörte seltsame Schreie und Kettengeräusche. Er sah eini-ge Gefangene, die ihn einzelne Zellen eingesperrt waren. Damian suchte das goldene Buch, um da-mit wieder zurückkehren zu können. Hauptziel: Finde und berühre das goldene Buch.

Ordeal KAPITEL 8: SIR LORCANS RÜCKKEHR

Nachdem Damian in letzter Minute zum goldenen Schwert griff, ver-schwand die rote Atmosphäre und der Raum drehte sich erneut zurück in die alte Dimension. Zunächst erleichtert über die Rückkehr musste Damian jedoch feststellen, dass das goldene Schwert anfing zu bluten. Damian versuchte das Blut zu entfer-nen, aber das Schwert hörte nicht auf zu bluten... Doch plötzlich trat Kapitän Sir Lorcan in die Waffenkammer ein... Hauptziel: Spreche mit Sir Lorcan.

KAPITEL 8: SIR LORCANS RÜCKKEHR

Nachdem Damian in letzter Minute zum goldenen Buch griff, verschwand die rote Atmosphäre und der Raum drehte sich erneut zurück in die alte Dimension. Zunächst erleichtert über die Rückkehr musste Damian jedoch feststellen, dass das goldene Buch anfing zu bluten. Damian versuchte das Blut zu entfernen, aber das Buch hörte nicht auf zu bluten... Doch plötzlich trat Kapitän Sir Lorcan in die Bibliothek ein... Hauptziel: Spreche mit Sir Lorcan.

Ordeal KAPITEL 9: DIE VERBANNUNG

Sir Lorcan streckte vor Zorn seine Hand aus und öffnete dadurch das Schattenreich, um Damian zu verbannen. Damian wurde zur Strafe dort in eine Zelle eingesperrt. Als Damian hoffnunglos und verzweifelt in seiner Zelle saß, wusste er nicht, wie er sich befreien sollte. Dann schaute er sich sein Amulett von seinem Onkel an... eine Träne fiel auf sein Amulett... Hauptziel: Finde einen Weg aus der Zelle auszubrechen.

Ordeal KAPITEL 10: DAMIANS AUSBRUCH

Nachdem Damian sein Amulett, aufgrund einer Träne, trockengerieben hatte, erschien ein Lumitra aus dem Stein. Lumitras waren gute Lichtgeister. Dieses Licht-wesen öffnete Damians verschlossene Zellentür und verschwand danach wieder. Nun konnte Damian aus seiner Zelle ausbrechen. Hauptziel: Breche aus deiner Zelle aus und suche den Ausgang.

Konzeption 45

Ordeal KAPITEL 11: SIR LORCANS VERWANDLUNG

Sir Lorcan zeigte sein wahres Gesicht. Hauptziel: Besiege den Schattengeist Lorcan.

Reward KAPITEL 12: SIR KIANS ERLÖSUNG

Nachdem das Schattenreich vollkommen verschwunden war, befand sich Damian wieder in einem Raum des Luftschiffs. Am Ende des Raums erwartete ihn ein Luftritter, den Damian bisher noch nie auf dem Luftschiff gesehen hatte. Dieser un-bekannte Luftritter bat Damian zu sich. Hauptziel: Spreche mit dem unbekannten Luftritter.

AKT 3

The Road

Back

Resurrection

The Return

with the

Elixir

KAPITEL 13: DIE HEIMREISE

Damian war wieder zurück auf der Darcono Farm und freute sich auf seine Familie, auch wenn er ein wenig Angst vor der Reaktion seines Vaters hatte... Hauptziel: Spreche mit deinem Vater Tamo. Damian entschuldigte sich für seine Flucht und erzählte ihm voller Begeisterung von seiner Reise, seinen Kämpfen und dass er zum Luftritter geschlagen wurde. Obwohl Damians Vater gegen die Ausbildung zum Luftritter war, ist er nun richtig stolz auf seinen Sohn und schenkte ihm einen Darcono, welcher ihn auf seinen Reisen begleiten soll. Außerdem erfuhr Damian, dass seine Schwester Lina stattdessen die Darcono Farm übernehmen wird. Damian verbrachte noch den ganzen Abend mit seiner Familie bis es wieder Zeit wurde Abschied zu nehmen. Denn das Luftschiff wartete bereits auf den Luftritter Damian Black.

Tabelle 4: IST-Zustand: Story und Hauptziel des Spielers

46 Konzeption

6.5 IST-Zustand: Erzählstruktur Überarbeitete Konzeption der interaktiven Erzählstruktur (Stand nach der Implementierung)

Wie bereits im letzten Kapitel IST-Zustand: Gamestory beschrieben, wurde während der Implementie-

rung die Story und damit auch die Erzählstruktur verändert. Im Folgenden werden die überarbeitete

Abbildung der interaktiven Erzählstruktur mit ihrer Beschreibung aufgeführt.

Abbildung 15: IST-Zustand: Konzeption der interativen Erzählstruktur

Beschreibung der Erzählstruktur

Story-point11


Cut Scene12

Ort Hauptziel Gameplay

AKT 1

A Ordinary

World

„Ordinary

World“

1 Blacks Darcono

Farm

Sammle mind. 10

Energie-Bälle und

füttere damit die

Darconos. Sprich

danach mit Tamo Black.

Interagieren,

Dialog

B Call to Adventure

„Airship Arrival”

11 Storypoints der Kapitel (1, 2, …) und Cut Scenes (A, B, …). 12 Beschreibung zu den erstellten Cut Scenes siehe Kapitel 7.10.

Konzeption 47

2 Blacks Darcono

Farm

Überzeuge Tamo

davon, auf das

Luftschiff gehen zu

dürfen.

Dialog

3.1 Refusal of

the Call

Meeting with

the Mentor

Damians

Zimmer

Schleiche dich aus

dem Haus und

steige in das

Luftschiff ein.

Vergesse nicht den

Rucksack und das

Amulett

mitzunehmen.

Interagieren

3.2 Blacks Darcono

Farm

In das Luftschiff

einsteigen.

Dialog

C Crossing the

First

Threshold

„Airship

Departure”

4 Luftschiff Spreche mit Sir

Lorcan, wähle eine

Ausbildungsklasse

und bestehe die

erste Kampfübung.

Dialog

4.1 Luftschiff Zerstöre drei

Truhen.

Kampfübung

mit Schwert

4.2 Luftschiff Zerstöre drei

Truhen.

Kampfübung

mit

Zauberstab

AKT 2

D Tests, Allies,

Enimies

„Tumbras”

5 Luftschiff Besiege die

Tumbras.

Kampf

6.1 Luftschiff:

Waffenkammer

Berühre nicht das

goldene Schwert.

Interagieren

6.2 Luftschiff:

Bibilothek

Berühre nicht das

goldene Buch.

Interagieren

E1 Approach to

the Inmost Cave

„Enter Shadow

Empire Armory“

E2 Approach to

the Inmost

Cave

„Enter Shadow

Empire Library“

7.1 Schattenreich Finde und berühre

das goldene

Schwert.

Interagieren

7.2 Schattenreich Finde und berühre

das goldene Buch.

Interagieren

F1 „Leave Shadow

Empire Armory”

F2 „Leave Shadow

Empire Library”

48 Konzeption

8.1 Ordeal Luftschiff:

Waffenkammer

Spreche mit Sir

Lorcan.

Dialog

8.2 Ordeal Luftschiff:

Bibilothek

Spreche mit Sir

Lorcan.

Dialog

9 Schattenreich:

Zelle

Finde einen Weg

aus der Zelle

auszubrechen.

Interagieren

G „Lumitra”

10 Schattenreich:

Zelle

Breche aus deiner

Zelle aus und suche

den Ausgang.

Interagieren,

Kampf

H „Lorcans

Transformation”

11 Schattenreich Besiege den

Schattengeist

Lorcan.

Endkampf

12 Reward Luftschiff Spreche mit dem

unbekannten

Luftritter.

Dialog

AKT 3

I The Road

Back

„Road Back”

13 Resurrection

The Return

with the

Elixier

Blacks Darcono

Farm

Spreche mit

deinem Vater

Tamo.

Dialog

Tabelle 5: IST-Zustand: Beschreibung der Gamestory und des Gameplays

Design 49

7 Design

7.1 PNG Sprites Für die Grafikobjekte im Spiel wurden PNG13 Sprites erstellt und verwendet. Bei einer PNG-Datei handelt es sich um ein verlustfreies Bitmap14 Grafikformat. Alle erstellten Grafiken, die in Kapitel 7

beschrieben werden, wurden ausschließlich als PNG Format mit einer Bildauflösung von 72 ppi15 ex-portiert und gespeichert. Denn für das Web reicht diese Bildauflösung aus, welche auch die Ladezeit

der Website reduziert.

Definition von Sprites

Bei einem Sprite handelt es sich um eine 2D Bitmap bzw. Rastergrafik, welches »direkt auf ein Render-ziel gezeichnet« wird. [19] Beispielsweise für 2D Spiele sind Sprites gut geeignet, um Grafikobjekte auf

einem unverändertem Hintergundbild als Einzelbild oder einem Set von Einzelbildern als Bewegungs-sprite darstellen zu können sowie Kollisionen zwischen Sprites zu erkennen. Der Hintergrund einer

Sprite Grafik ist dabei transparent, so dass sie passend vor dem Hintergrundbild eines Spiels einge-

bunden werden kann. Selbst Buttons können auf diese Weise grafisch erstellt werden und dadurch ihre Darstellung ändern. Somit muss die jeweilige Grafik nur einmal erstellt werden und kann immer wieder

nach Bedarf angezeigt werden. Dies spart Speicherplatz und reduziert auch den Arbeitsaufwand, da jede Position einer grafischen Animation oder eines Zustandes nur einmal erstellt werden muss. Im Code

werden dann die Größe des Rasters und die Koordinaten definiert, um den richtigen Ausschnitt des

Grafikobjekts und die Position des Sprites im Spiel zu bestimmen. Wie die PNG Sprites genau im Code eingebunden, deklariert und benutzt werden, wird in Kapitel 8.3.5 beschrieben.

Erstellung eines Sprites

Im Folgenden wird beschrieben, wie Sprites für das Spiel dieser Bachelorarbeit erstellt wurden. Für ein PNG Sprite muss zunächst ein neues Dokument in einem Bildbearbeitungsprogramm 16 mit gleich

großem Raster angelegt werden. Das Raster dient als Hilfslinie und ist während der Bearbeitung sicht-bar, welches später beim Export wieder entfernt oder unsichtbar gemacht wird. In jedem Raster wird

schließlich die benötigte Grafik erstellt. Dabei muss der Hintergrund am Ende transparent als PNG-

Datei exportiert und gespeichert werden. In Illustrator muss beim Export unbedingt ein Häckchen bei »Zeichenfläche verwenden« gesetzt werden, sonst kann es passsieren, dass nicht die erwartete Bildgröße

gespeichert wird. Die Zeichenfläche enstpricht der Bildbreite und -höhe des Dokuments, die beim Anlegen eines neuen Dokuments definiert wird.

Im Folgenden werden alle PNG Sprites (Buttons, Character Design, Bullets und Items) aufgelistet, die

im Webspiel verwendet werden.

13 PNG: Portable Network Graphics. Dieses Format wendet eine verlustfreie Bildkompression an. 14 Bitmap: Auch Pixel- oder Rastergrafik genannt. 15 ppi (pixels per inch): Auflösung für Bildschirme - die Pixeldichte beschreibt wie detailliert beispielsweise ein gerastertes Bild auf einem Monitor/Display dargestellt wird. 16 Für das Spiel dieser Bachelorarbeit wurde mit Adobe Illustrator gearbeitet, um PNG Sprites zu erstellen.

50 Design

7.2 Buttons Es wurden folgende drei Button Typen für das Webspiel benötigt: Ein Spielen, Weiter und Zurück Button. Der Button Spielen (Abb. 16) erscheint auf der Startseite der Website und startet das Spiel

»Black Air Knights«. Um die Cut Scenes überspringen zu können, gibt es den Button Weiter (Abb. 17).

Der Button Zurück (Abb. 18 und 75) erscheint, wenn der Spieler im Game besiegt wurde, um den letzten Spielstand laden zu können. Diese Buttons wurden in Adobe Illustrator als PNG Sprites erstellt, die

jeweils in einem Raster von einer Zeile und drei Spalten angelegt wurden. Dabei haben die Buttons jeweils eine Größe von 180x35 px (Breite x Höhe). Ein Button Typ besitzt demnach drei verschiedene

Zustände. Der erste Zustand (Button links) wird angezeigt, wenn sich der Mauszeiger außerhalb dieser

Objektgrafik befindet. Wenn der Mauszeiger über dem Button liegt, wird der zweite Zustand (Button Mitte) dargestellt. Der dritte Zustand (Button rechts) erscheint, wenn auf das Button-Objekt geklickt

wird. Für den Buttontext wurde die serifenlose Schriftart Mason Sans aus der Bibliothek von Adobe Typekit17 gewählt.

Abbildung 16: Play Button

Abbildung 17: Next Button

Abbildung 18: Back Button

17 Adobe Typekit stellt Schriftarten zur Verfügung: <https://typekit.com/>.

Design 51

7.3 Character Design

7.3.1 Sprite Shape Template

Abbildung 19: Sketch, Sprite Shape Template (Idle And Walk)

Abbildung 20: Sprite Shape Template (Idle And Walk)

Vor den Charakter Entwürfen, wurde zu-nächst eine minimalistische Vorlage für

die Animation (Idle und Walk) mit Pro-potionen einer Figur erstellt. Um eine

Gehbewegung über ein Sprite mit weni-

gen Bilden simulieren zu können, werden die wichtigsten Momente einer Gehbe-

wegung benötigt. Deshalb wurde sich zu-

nächst mit der Animationslehre aus dem Buch The Animator’s Survival Kit [20]

auseinandergesetzt. Anschließend wur-den ein paar Skizzen von Gehbewegun-

gen (Abb. 19) angefertigt.

Das fertige Sprite Shape Template (Abb. 20) besteht aus zehn Bildern (Raster: eine Zeile, zehn

Spalten):

• Bilder 1 bis 4: Nach links gehen (Walk), Gesicht schaut nach links

• Bild 5: Figur stehend, untätig (Idle), Gesicht schaut nach links

• Bild 6: Figur stehend, untätig (Idle), Gesicht schaut nach rechts

• Bilder 7 bis 10: Nach rechts gehen (Walk), Gesicht schaut nach rechts

52 Design

7.3.2 Damian Black Die Hauptfigur und der Held der Geschichte ist Damian Black. Damian ist der Sohn von Tamo Black und repräsentiert einen jungen herangwachsenden Mann. Seine Merkmale sind sein schwarzes, asym-

metrisch gestyltes Haar und seine blauen Augen. Zunächst wurden Skizzen für Damians Gesicht (Abb.

21) gezeichnet. Darauf basierend wurde dieser Charakter digital in Illustrator grafisch weiterentwickelt.

Abbildung 21: Sketch, Character Design, Damian Black

DAMIAN BLACK: BODY PARTS

Um die 2D Figur später für die Geh- und Angriffbewegungen leichter und effizienter verändern zu

können, wurde die Figur in Illustrator zusammengesetzt aus Body Parts gezeichnet. Die einzeln er-

stellten Körperteile bestehen aus Kopf, Oberkörper, Ober- und Unterarme, Ober- und Unterschenkel sowie rechter und linker Fuß (Abb. 22).

Abbildung 22: Character Design, Damian Black, Body Parts

Design 53

DAMIAN BLACK: IDLE AND WALK

Mit Hilfe der vorher erstellten Body Parts wurde Damians Gehbewegungen in Illustrator als PNG Sprite erstellt. Der Gehbewegungssprite (Abb. 23) besteht aus zehn Bildern (Raster: eine Zeile, zehn Spalten):




• Bilder 7 bis 10: Nach rechts gehen (Walk), Gesicht schaut nach rechts BLAC

Abbildung 23: Character Design, Damian Black, Idle And Walk

DAMIAN BLACK MIT AMULETT: IDLE AND WALK

Im Verlauf der Gamestory wird Damian ein Amulett um seinen Hals legen, welches er von seinem

Onkel Luan geschenkt bekommen hat. Deshalb wurde der zuletzt beschriebene Sprite (Abb. 23) mit

einem Amulett (Abb. 24) ergänzt. Damian’s hellblaues Amulett zeigt das Zeichen des Königreichs Livania. Da sein Onkel ein Luftritter bei der königlichen Garde ist, konnte er Damian damit ein ganz

besonderes köngliches Geschenk machen.

Abbildung 24: Character Design, Damian Black, Amulet, Idle And Walk

54 Design

DAMIAN BLACK ALS SCHWERTKÄMPFER: IDLE, WALK AND ATTACK

Abbildung 25: Sketch, Character Design, Sword Attack

Abbildung 26: Character Design, Damian Black, Sword Idle, Attack And Walk

Sobald die Hauptfigur ein Schwertkämpfer

wird, braucht sie nicht nur eine Rüstung und ein Schwert, sondern auch einen Sprite mit

Geh- und Angriffbewegungen. Beide An-

wendungsfälle (Walk und Attack) müssen in einem Sprite zusammengefasst werden, da

später im Code nur auf einen Sprite für den

Schwertkämpfer zugegriffen wird. Für den Schwertangriff wurde zuerst eine Skizze

(Abb. 25) angefertig, um die Angriffbewe-gung in einzelne Bewegungsschritten zu ent-

werfen. Damians Rüstung wurde auch in

Body Parts (Abb. 22) unterteilt, die auf Sir Lorcans Rüstung basieren und optisch etwas

verändert wurden.

Die Merkmale des Schwertkämpfers sind eine schwarz-, silber- und metallfarbige

Rüstung mit einer hellblauen Gürtel-Brosche

und einem silbernen Schwert.

Der fertige Angriffs- und Gehbewegungssprite (Abb. 26) besteht aus 20 Bildern (Raster: zwei Zeilen, zehn Spalten):

Erste Zeile

• Bilder 1 bis 5: Mit Schwert nach links attackieren (Attack)

• Bilder 6 bis 10: Mit Schwert nach rechts attackieren (Attack)

Zweite Zeile





Design 55

DAMIAN BLACK ALS MAGIER: IDLE, WALK AND ATTACK

Für die Magierfigur wurde ein Sprite erstellt, welcher ebenfalls aus Angriff- und Gehbewegungen zusammengefasst ist. Die Merkmale des Magiers sind eine schwarz-, silber- und metallfarbige Rüstung

mit einer hellblauen Gürtel-Brosche. Es handelt sich dabei um die selbe Rüstung wie beim Schwert-

kämpfer. Statt einem Schwert trägt der Magier einen geschwungenen magischen Stab (Waffenbeschrei-bung siehe Kapitel 7.5).

Der fertige Angriffs- und Gehbewegungssprite (Abb. 27) besteht aus zwölf Bildern (Raster: zwei Zeilen,

sechs Spalten):

Erste Zeile


• Bilder 1 bis 2: Mit Zauberstab nach rechts attackieren (Attack)


Zweite Zeile


• Bilder 12 bis 11: Mit Zauberstab nach rechts attackieren (Attack)


Abbildung 27: Character Design, Damian Black, Magic Idle, Attack And Walk

56 Design

7.3.3 Tamo Black TAMO BLACK: EINZELBILD SPRITE

Abbildung 28: Character

Design, Tamo Black,

Einzelbild Sprite

7.3.4 Darconos DARCONOS: DARCONO UND BABY DARCONO

Bei den Darconos handelt es sich um Seepferdchen, die sich nach dem Meteoriteneinschlag zu sehr

großen, fliegenden Seepferdchen weiterentwickelt haben. Sie brauchen auch kein Wasser mehr, um sich fortbewegen zu können, da sie auch in der Luft atmen, schweben und fliegen können. Die Bezeichnung

Darcono wurde für die Geschichte frei erfunden. Für die Darcono Farm wurden ein erwachsener und ein junger Darcono (Abb. 29, 3. und 4. Figur) erstellt.

Abbildung 29: Character Design, Darconos, Design Entwicklung

Die Figur Tamo Black ist Damians Vater, welcher einen strengen und

sturen Charakter hat. Aus Zeitgründen wurde Tamo’s Erscheinungsbild herunter priorisiert, da dieser Charakter auch nur eine Nebenrolle in der

Geschichte einnimmt. Diese Figur wurde daher vereinfacht und mini-

malistisch als Schattenfigur erstellt. Tamos Merkmal ist, dass er seine Hände in die Hüfte stemmt, um Überlegenheit, Entschossenheit und

Strenge zu verkörpern. Da Tamo sich im Spiel nicht bewegt, wurde nur ein Einzelbild als Sprite (Abb. 28) erstellt.

Design 57

7.3.5 Sir Lorcan SIR LORCAN: BODY PARTS

Sir Lorcan ist der Kapitän des Luftschiffs der Black Air Knights. Die einzeln erstellten Körperteile

bestehen aus zwei Köpfen (jeweils blaue und rote Augen), Oberkörper, Oberarme, linker Unterarm, rechter Unterarm mit Schwert, Ober- und Unterschenkel integriert mit Füßen (Abb. 30). Die Merkmale

von Sir Lorcans Rüstung sind eine schwarz-, silber- und metallfarbige Rüstung mit einer roten Gürtel-

Brosche und einem silbernen Schwert. Lorcans Gesicht wird durch einen Helm vollständig bedeckt. Seine Augen leuchten dabei hellblau. Wenn Lorcan wütend wird, leuchten seine Augen rot. Deshalb

wurden zwei Kopf Varianten erstellt.

Abbildung 30: Character Design, Sir Lorcan, Body Parts

SIR LORCAN: IDLE AND WALK

Der fertige Gehbewegungssprite von (Abb. 31) besteht aus zehn Bildern (Raster: eine Zeile, zehn

Spalten):





Abbildung 31: Character Design, Sir Lorcan, Idle And Walk

58 Design

SIR LORCAN MIT ROTEN AUGEN: IDLE AND WALK

Im Verlauf der Gamestory werden Lorcans Augen rot. Deshalb wurde der zuletzt beschriebene Sprite (Abb. 31) mit roten Augen (Abb. 32) verändert.

Abbildung 32: Character Design, Sir Lorcan, Red Eyes, Idle And Walk

SIR LORCAN ALS SCHATTENGEIST: EINZELBILD SPRITE

Abbildung 33: Character Design, Sir Lorcan, Schattengeist

Sir Lorcan verwandelt sich

im Endkampf zu einem

Schattengeist. Diese Figur ist überwiegend, wie ein

Schatten, schwarz gestaltet.

Er hat insgesamt acht Au-gen. Davon zwei rote und

sechs weiße Augen, die rot umrahmt sind. Um seine

Schultern und Arme herum

treten rote Stacheln hervor. Sein Haar sticht ebenfalls

gezackt hervor und ist mit roten Akzenten gefärbt.

Sein Mund ist weit geöffnet

und grinst schelmisch. Aus seinem Mund leuchtet es

orange hervor. Das Erschei-nungsbild seiner sechs Bei-

ne und zwei Arme erinnern

an Tentakeln eines Okto-pus, da Oktopusse acht

Tentakeln besitzen. Durch diese Merkmale wirkt Sir

Lorcan als Schattengeist

sehr bedrohlich, monströs und unheimlich. Da sich

dieser Charakter in der Luft

frontal und schwebend be-wegt, wurde nur ein Einzel-

bild als Sprite (Abb. 33) benötigt und erstellt.

Design 59

7.3.6 Tumbras TUMBRAS: EINZELBILD SPRITE

Tumbras sind Schattengeister und die Gegner der Luftritter. Sie greifen das Luftschiff an und lauern im

Schattenreich. Basierend auf vorher erstellten Skizzen (Abb. 34) wurden in Illustrator zwei Versionen erstellt. Version 2 (Abb. 35, 2. Figur) wurde schließlich als Einzelbild im Game eingesetzt. Ähnlich wie

beim Schattengeist Lorcan haben die Tumbras eine schwarze Gestalt, um wie ein Schatten zu wirken.

Die Merkmale dieser Schattengeister sind zwei Hörner, ein großes, grün umrandetes Auge mit einer schlitzarigen Pupille, ein weit geöffneter Mund mit spitzen Zähnen, zwei Arme mit jeweils drei langen

Krallen und rot akzentuierte Stacheln um die Schulter herum.

Abbildung 34: Sketch, Character Design, Tumbras

Abbildung 35: Character Design, Tumbras, Version 1 und 2

60 Design

7.3.7 Sir Kian SIR KIAN: EINZELBILD SPRITE

Abbildung 36: Character Design, Sir Kian

7.4 Bullets und Items

Abbildung 37: Purple Bullet

Abbildung 38: Green Bullet

Bei den Bullets handelt es sich um Kugeln bzw. Geschosse, die durch magi-sche Angriffe erzeugt und geschossen werden. Sie wurden ebenfalls als

PNG Sprites erstellt und sind 100x100 px groß. Die Bullets haben eine bumerang-förmige Gestalt, leuchten von Innen weiß und scheinen nach

Außen auf transparentem Hintergrund lila (Abb. 37) oder grün (Abb. 38).

Der Bullet in Lila gehört zur Damian’s magischen Waffe und der grüne Bullet kann durch Lorcan als Schattengeist geschossen werden.

Für das Webspiel wurden folgende Items bzw. Gegenstände erstellt: Ruck-

sack, Truhe und Marker (Abb. 40). Der blaue und gelbe leuchtende Kreis (Abb. 40) sowie das explode Sprite (Abb. 39) wurden aus Zeitgründen nicht

selbst erstellt, sondern stammen aus den Phaser Beispielen [18]. Beim Mar-

ker (Abb. 40, 3. Bild) handelt es sich um ein PNG Objekt, welches einen bestimmten Punkt im Spielraum markieren soll, um Interaktionen auslösen

zu können. Beispielsweise wurde dieser Marker im Room Level (Abb. 55) eingesetzt, um mit der Tür, den Schubladen oder dem Fenster interagieren

zu können. Damit diese Marker im Spiel nicht mehr sichtbar sind, wurden

sie anschließend im Code unsichtbar gemacht.

Bei dem Chrakter Sir Kian handelt es sich um den

echten Kapitän der Black Air Knights, welcher von Sir Lorcan in der Schattenwelt gefangen genommen wur-

de. Sir Kians Merkmale sind eine schwarz-, silber- und metallfarbige Rüstung mit einer hellblauen Gür-

tel-Brosche, einem goldenen Schwert und das hell-

blaue Zeichen des Königreichs Livania auf seinem Helm. Da Sir Kian sich im Spiel nicht bewegt, reichte

es aus ein Einzelbild als Sprite (Abb. 36) zu erstellen erstellt.

Design 61

Abbildung 39: Explode

Abbildung 40: Items: Rucksack, Truhe, Marker, blauer und gelber leuchtender Kreis

7.5 Weapon Design

Abbildung 41: Sketch, Weapon Design, Magic Weapon

Abbildung 42: Weapon Design, Magic Weapon

Abbildung 43: Weapon Design, Sword

Waffe des Magiers

Für Damian als Magier wurde eine magi-

sche Waffe entwickelt. Es sollte dabei kein

gewöhnlicher Zauberstab werden. Der Stab sollte wie eine Pistole in der Hand gehalten

werden können. Dafür wurden zunächst ein paar Skizzen angefertigt (Abb. 41).

Damians magische Waffe (Abb. 42) besteht

aus einem dunkelbraunen, geschwungenen Stab aus Holz mit einem großen, lila Kris-

tall, welches passend zu dem lila Bullet

(Abb. 37) leuchtet.

Waffe des Schwertkämpfers

Für Damian als Schwertkämpfer wurde ein

silbernes Schwert entwickelt (Abb. 44). Auch Sir Lorcan trägt dieses Schwert.

62 Design

Abbildung 44: Weapon Design, Golden Sword

Abbildung 45: Weapon Design, Golden Book

7.6 Dialog Bilder Für die Dialoge im Spiel wurden Dialogbilder für die Charaktere Damian Black, Tamo Black, Sir Lorcan

und Sir Kian erstellt (Abb. 46). Dadurch soll visuell das Lesen der Dialogtexte erleichtert werden. Die

Dialogbilder sind rund ausgeschnitten und haben eine Größe von 100 x 100 px. Sie zeigen jeweils das Gesicht der Charaktere auf einem hellblauen Hintergrund.

Abbildung 46: Dialogbilder von Damian Black, Tamo Black, Sir Lorcan und Sir Kian

Das goldene Schwert

Das goldene Schwert befindet sich auf dem Luftschiff der Black Air Knights in

der Waffenkammer (Abb. 44). Sir Kian trägt später dieses Schwert.

Das goldene Buch

Das goldene Buch befindet sich auf dem Luftschiff der Black Air Knights in der

Bibliothek (Abb. 45). Auf dem Buch Co-ver ist ein Emblem zu sehen, welches

überkreuzt ein silbernes Schwert mit ei-

nem Zauberstab zeigt.

Design 63

7.7 Luftschiff

Abbildung 47: Sketch, Airships

Abbildung 48: Delphine des Luftschiffs

Abbildung 49: Luftschiff der Black Air Knights mit geschlossener und geöffneter Tür

Zunächst wurden für das Erschei-

nungsbild des Luftschiffs verschie-dene Skizzen entworfen (Abb. 47).

Das Luftschiff sollte zudem von

vier Delphinen gezogen werden. Für die Delphine wurden vorerst

auch ein paar Entwürfe gemacht (Abb. 48). Das fertig erstellte Luft-

schiff besteht aus zwei Varianten

(Abb. 49), welche sich lediglich im Erscheinungsbild der Türen unter-

scheiden (geschlossene und geöff-

nete Tür mit Leiter). Während die Delphine in den Farben Schwarz,

Gold, Gelb, Weiß und Grau ge-staltet sind, wurde das Luftschiff

mit den Farben Schwarz, Gold,

Gelb und Dunkelblau erstellt. Oberhalb am länglich geförmten

Ballon des Luftschiffs wird zudem die Rückenflosse eines Delphins

angedeutet.

64 Design

7.8 Level Design STORYBOARD: ACT 1

In Abb. 50 ist ein skizzenhaftes Storyboard zu sehen, welches für den ersten Akt erstellt wurde. Darauf

aufbauend wurden die Hintergründe für das Level Design grafisch in Illustrator umgesetzt. Weitere Skizzen wurden für den zweiten und dritten Akt nicht mehr gezeichnet, da sich überwiegend an der

Erzählstruktur in Kapitel 6.3 orientiert wurde, welches als Storyboard in schriftliche Form diente.

Abbildung 50: Sketch, Storyboard, Act 1

Design 65

DESIGN ENTWICKLUNG DER DARCONO FARM

Abbildung 51: Farm Background Image, Version 1

Abbildung 52: Farm Background Image, Version 2

KAPITEL 1: BLACKS DARCONO FARM

Storypoint 1 (Farm.js)

Abbildung 53: Farm Level, Example Scenario

KAPITEL 2: SIR LORCANS ANGEBOT

Storypoint 2 (FarmAfterVisit.js)

Abbildung 54: Farm After Visit Level, Example Scenario

Titel: Farm Level © 2018

Beschreibung: Dieses Beispielszenario zeigt

einen Ausschnitt aus dem Farm Level. Damian

steht vor dem Darcono Stahl. Auf dem Boden

liegen gelb leuchtende Bälle, die Damian auf-

sammeln muss, um die Darconos damit füt-

tern zu können.

Technologie: Illustrator CC

Größe (B x H): 3840 x 900 px

Titel: Farm After Visit Level © 2018

Beschreibung: Hierbei handelt es sich um fast

den selben Hintergrund wie beim Farm Level,

welcher mit dem gelandetem Luftschiff er-

gänzt wurde. In dieser Szene versucht Damian seinen Vater zu überreden, auf das Luftschiff

gehen zu dürfen.


Größe (B x H): 3840 x 900 px

Die Hintergründe wurden in Illustrator über viele Ebenen, Schicht für Schicht aufge-

baut, wie in den Beispielbildern der Farm

zu sehen ist (Abb. 51, 52 und 53). Denn das Arbeiten mit Ebenen in Illustrator erleich-

tert das Bearbeiten von bestimmten Grafik-elementen. So können sie gezielt modifi-

ziert werden, ohne dabei andere Bildebenen

ungewollt zu verändern. Das Level Design der Farm stellt eine idyllische Landschaft

mit Bergen, Bäumen und einem See dar.

Während sich der Sonnenuntergang im Wasser spiegelt, leuchten am oberen Bild-

rand die Sterne.

66 Design

KAPITEL 3: DAMIANS FLUCHT

Storypoint 3.1 (Room.js)

Abbildung 55: Room Level, Example Scenario

Storypoint 3.2 (FarmEscapeWay.js)

Abbildung 56: Farm Escape Way Level, Example Scenario 1

Abbildung 57: Farm Escape Way Level, Example Scenario 2

KAPITEL 4: DAS LUFTSCHIFF DER BLACK AIR KNIGHTS

Storypoint 4 (Ship.js)

Abbildung 58: Ship Level, Example Scenario

Titel: Room Level © 2018

Beschreibung: In diesem Level ist Damians

Zimmer zu sehen, in welchem einiges zu ent-decken gibt. Zudem gibt es hier zwei mögliche

Ausgänge: Die Tür und das Fenster. Auf

welche Weise ihm wohl die Flucht gelingen

kann?


Größe (B x H): 1920 x 900 px

Titel: Farm Escape Way Level © 2018 Beschreibung: Wie in diesem Beispielszenario

(Abb. 56) zu sehen ist, muss Damian aus dem

Fenster klettern, um aus seinem Zimmer flie-

hen zu können. Dieses Hintergrundbild ähnelt

dem Farm After Visit Level. Allerdings ist es

Mitten in der Nacht, weshalb der Sonnen-

untergang nicht mehr zu sehen ist. Auch die Haustür ist jetzt verschlossen. Somit kann sich

Damian unbemerkt zum Luftschiff schleichen

(Abb. 57). Kapitän Sir Lorcan wartet auch

schon draußen vor dem Luftschiff auf ihn.

Damian muss nur noch einsteigen.


Größe (B x H): 3840 x 900 px

Titel: Ship Level © 2018

Beschreibung: Dieses Level zeigt einen Raum

im Luftschiff, in welchem Damian von Kapitän

Sir Lorcan begrüßt wird. Der Saal ist mit

großen Fenstern und dunkelblauen Vorhän-

gen ausgestattet. Aus den Fenstern ist eine

Wolkenlandschaft mit vielen Sternen am Him-

mel zu sehen. Technologie: Illustrator CC

Größe (B x H): 3840 x 900 px

Design 67

Storypoint 4.1 (Ship.js)

Abbildung 59: Ship Level, Example Scenario (Knight)

Storypoint 4.2 (Ship.js)

Abbildung 60: Ship Level, Example Scenario (Mage)

KAPITEL 5: DIE TUMBRAS

Storypoint 5 (ShipEnimies.js)

Abbildung 61: Ship Enimies Level, Example Scenario (Knight)

KAPITEL 6: DAS VERBOTENE SCHWERT

Storypoint 6.1 (ShipTestArmory.js)

Abbildung 62: Ship Test Armory Level, Example Scenario

Beschreibung: Immer noch im selben Level,

einen Raum weiter, erwartet Damian die erste

Kampfübung. Er soll hüpfende Truhen mit sei-

nem Schwert als Schwertkämpfer zerstören.

Beschreibung: In diesem Beispielszenario ist

Damian als Magier zu sehen.

Hierbei geht es um die selbe Kampfübung, wie bereits in Storypoint 4.1 beschrieben wurde.

Titel: Ship Enimies Level © 2018

Beschreibung: In diesem Level handelt es sich

um dasselbe Hintergrundbild, wie im Ship Le-

vel zu sehen ist. Es sind in diesem Szenario

Tumbras in das Luftschiff eingedrungen, die

Damian bekämpfen muss.


Größe (B x H): 3840 x 900 px

Titel: Ship Test Armory Level © 2018 Beschreibung: Dieser Raum zeigt die Waffen-

kammer des Luftschiffs. Vor jedem Fenster ist

ein Schwert auf einem Sockel ausgestellt. An

der Wand hängen zudem zwei überkreuzte

Schwerter. Das goldene Schwert befindet sich

auf einem Sockel mitten im Raum.


Größe (B x H): 3840 x 900 px

68 Design

KAPITEL 6: DAS VERBOTENE BUCH

Storypoint 6.2 (ShipTestLibrary.js)

Abbildung 63: Ship Test Library Level, Example Scenario


Storypoint 7.1 (ShipShadowEmpireArmory.js)

Abbildung 64: Ship Shadow Empire Armory Level,

Example Scenario

Storypoint 7.2 (ShipShadowEmpireLibrary.js)

Abbildung 65: Ship Shadow Empire Library Level,

Example Scenario

Titel: Ship Shadow Empire Armory Level © 2018

Beschreibung: In der Schattenwelt angekommen,

findet sich Damian in einem Raum mit roten Nebel

wieder, welches auf dem Kopf gedreht ist. Wäh-

rend im Hintergrund viele Gefängiszellen in der Luft hängen, brennt am Boden ein großes Feuer.

Am Ende des Raums befindet sich das goldene

Schwert.


Größe (B x H): 3840 x 900 px

Titel: Ship Shadow Empire Library Level © 2018

Beschreibung: Dieses Level zeigt das selbe Szena-

rio, wie im Ship Shadow Empire Armory Level. Statt

dem goldenen Schwert, befindet sich hier das gol-

dene Buch.


Größe (B x H): 3840 x 900 px

Titel: Ship Test Library Level © 2018

Beschreibung: Das Pendant der Waffenkammer

stellt die Bibliothek des Luftschiffs dar. Statt der

Schwerter, sind geöffnete Zauberbücher vor den Fenstern ausgestellt. An der Wand hängt

ein Buch, welches sich mit einem Zauberstab

überkreuzt. Das goldene Buch befindet sich

ebenfalls mitten im Raum auf einem Sockel.


Größe (B x H): 3840 x 900 px

Design 69

KAPITEL 8: SIR LORCANS RÜCKKEHR

Storypoint 8.1 (ShipTestArmoryBack.js)

Abbildung 66: Ship Test Armory Back Level, Example Scenario

Storypoint 8.2 (ShipTestLibraryBack.js)

Abbildung 67: ShipTest Library Back Level, Example Scenario

KAPITEL 9: DIE VERBANNUNG

Storypoint 9 (ShipShadowEmpireCell.js)

Abbildung 68: Ship Shadow Empire Cell Level,

Example Scenario (Mage)

Titel: Ship Test Armory Back Level © 2018 Beschreibung: Zurück in der Waffenkammer,

hat sich der Raum kaum verändert. Nur das

goldene Schwert hat angefangen zu bluten.


Größe (B x H): 3840 x 900 px

Titel: Ship Test Library Back Level © 2018

Beschreibung: Auch hier zurück in der Biblio-

thek hat sich nur das goldene Buch in ein blu-

tendes Buch verändert.


Größe (B x H): 3840 x 900 px

Titel: Ship Shadow Empire Cell Level © 2018

Beschreibung: Dieses Level zeigt den Helden in

einer Gefängniszelle eingesperrt. Damian wurde in das Schattenreich verbannt.


Größe (B x H): 1920 x 900 px

70 Design

KAPITEL 10: DAMIANS AUSBRUCH

Storypoint 10 (ShipShadowEmpireCellEscape.js)

Abbildung 69: Ship Shadow Empire Cell Escape Level,

Example Scenario 1 (Mage)

Abbildung 70: Ship Shadow Empire Cell Escape Level,

Example Scenario 2 (Mage)

KAPITEL 11: SIR LORCANS VERWANDLUNG

Storypoint 11 (ShipShadowEmpireFinalFight.js)

Abbildung 71: Ship Shadow Empire Final Fight Level,

Example Scenario (Mage)

KAPITEL 12: SIR KIANS ERLÖSUNG

Storypoint 11 (ShipReward.js)

Abbildung 72: Ship Reward Level, Example Scenario (Mage)

Titel: Ship Shadow Empire Cell Escape Level

© 2018

Beschreibung: Während sich der Spieler in anderen Levels bisher nur nach links oder

rechts bewegen konnte, geht es bei diesem

Lebel abwärts. Oben in Damians Zelle ange-

fangen (Abb. 69), wartet unten Sir Lorcan auf

Damian (Abb. 70). Auf dem Weg nach unten,

kann Damian einen Gefangenen befreien, der

ihn um Hilfe bittet. Allerdings ändert sich da-

durch nicht der Spielverlauf. Technologie: Illustrator CC

Größe (B x H): 1920 x 2700 px

Titel: Ship Shadow Empire Final Fight Level

© 2018

Beschreibung: Nach Sir Lorcans Verwandlung

erwartet Damian der Endkampf. Sir Lorcan als

Schattengeist transformiert stellt den End-

boss des Spiels dar. Das Hintergrundbild äh-nelt dem vorherigem Level Design.


Größe (B x H): 1920 x 900 px

Titel: Ship Reward Level © 2018

Beschreibung: Nach dem Boss Kampf findet sich Damian auf dem Luftschiff wieder. Es

handelt sich dabei um dasselbe Level Design,

wie im Ship Level bereits beschrieben wurde.

Am Ende des Raums wartet Sir Kian auf den

Helden.


Größe (B x H): 1920 x 900 px

Design 71

KAPITEL 13: DIE HEIMREISE

Storypoint 11 (FarmBack.js)

Abbildung 73: Farm Back Level, Example Scenario (Mage)

THE END

The End State (TheEnd.js)

Abbildung 74: The End State

GAME OVER

Game Over State (GameOver.js)

Abbildung 75: Game Over State

Loading…

Loading (Preloader.js)

Abbildung 76: Loading

Titel: Farm Back Level © 2018

Beschreibung: In die Heimat zurückgekehrt

zeigt dieses Beispielszenario Blacks Darcono

Farm. Für dieses Level wurde das Design vom

Farm Level wiederverwendet.


Größe (B x H): 3840 x 900 px

Titel: The End State © 2018

Beschreibung: Das Ende der Geschichet wird

durch den Text The End dargestellt. Im Hinter-

grund steigen, wie Luftblasen, kleine blau

leuchtende Kreise auf. Technologie: Illustrator CC

Schriftart: Mason Sans (Adobe Typekit)

Größe (B x H): 350 x 110 px

Titel: Game Over State © 2018

Beschreibung: Der Text Game Over wird auf

einem schwarzen Hintergrund angzeigt. Da-

runter befindet sich ein Zurück Button, wel-

ches den letzten Spielstand lädt.




Titel: Loading © 2018

Beschreibung: Der Anzeigetext Loading wir

ebenfalls auf einem schwarzen Hintergrund angezeigt. Er erscheint immer dann, wenn der

Browser im Hintergrund das Spiel lädt. Bei

sehr kurzen Ladezeiten, wird dieses Bild aller-

dings kaum bis gar nicht wahrgenommen.




72 Design

7.9 Tiled Map Editor: Tiles und tilemaps Mit dem kostenlosen Programm Tiled Map Editor [21] können tilemaps bzw. Karten erstellt werden, um damit Level Maps für 2D Spiele zu bauen. Eine tilemap besteht aus kleinen, quadratischen Bildern,

die tiles bzw. Kacheln genannt werden. In einer tilemap können die Levelgröße definiert und Kollisionen

sowie Objekte gebaut werden. Jedes Level des Webspiels »Black Air Knights« hat eine tilemap, welches mit dem Tiled Map Editor erstellt wurde. Wie genau eine tilemap erstellt wird, wird im Folgenden am

Beispiel Farm Level (Abb. 53) beschrieben.

Erstellung einer tilemap am Beispiel Farm Level

Neue Karte anlegen

Wenn eine neue Karte angelegt wird, können die Breite und Höhe

der Kacheln für die Kartengröße sowie die Kachelgröße festge-legt werden. Da das Hintergrundbild des Farm Levels eine größe

von 3840 x 900 px hat, wurde die neue Karte (Abb. 77) mit 128

für die Breite und mit 30 Kacheln für die Höhe angelegt. Die Kachelgröße entspricht dabei 30 x 30 px.

Abbildung 77: Tiled Map Editor,

New Tilemap 3840 x 900 px

Tiles und Tilesets

Abbildung 78: Tile,

tiles-ground.png

Abbildung 79: Tile,

tiles_ball.png

Abbildung 80: Tiled Map

Editor, Tilesets, tiles-ground

Zunächst müssen für eine tilemap quardatische Bilder (tiles) in

der Kachelgröße 30 x 30 px erstellt werden, da diese Größe in

der neuen Karte definiert wurde. Für das Webspiel wurden ins-gesamt zwei PNG-Bilder in Illustrator erstellt. Das erste Bild

»tiles-ground« (Abb. 78) besteht aus vier Kacheln, die im Tile Layer die Bodenfläche und Hindernisse bilden. Das zweite Bild

»tiles_ball« (Abb. 79) besteht aus einer Kachel, die im Object

Layer als Objekt eingebunden wurde. Im Farm Level wurden beide tiles (Abb. 78 und 79) eingesetzt. Um diese PNG Bilder

als tiles in der tilemap nutzen zu können, muss für jedes Bild ein neuer Tileset im Tiled Map Editor angelegt werden (Abb.

80).

Design 73

Tile Layer

Auf der Tile Layer Ebene »tile-layer_ground« (Abb. 81) werden schließ-lich die Kollisionsflächen mit den zuvor erstellten tiles aus dem Tileset

(Abb. 80) gebaut. Diese Kacheln bilden dann sozusagen den Boden, auf dem sich die Sprite Figuren bewegen können.

Abbildung 81: Tile Map Editor,

Layers, Farm Level, Detail

Object Layer

Auf der Object Layer Ebene »object-layer_balls« (Abb. 81) werden die Objekte »tiles_ball« (Abb. 80) eingesetzt. Diese Objekte stellen die gelben Bälle aus dem Farm Level dar, die vom Spieler eingesam-

melt werden sollen. In Abb. 82 ist die fertige tilemap zu sehen. Zum Vergleich zeigen die Abbildungen 83 und 84 eine Gegenüberstellung der tilemaps aus dem Tiled Map Editor und dem Farm Level. Zum

Schluss muss die tilemap noch als JSON (JavaScript Object Notation) Datei exportiert werden, damit

sie im Code eingebunden werden kann. Wie genau die tilemaps im Code verwendet werden, wird in Kapitel 8.3.6 beschrieben.

Abbildung 82: Tilemap,

Farm Level, Tile And

Object Layer


Farm Level, Detail


Farm Level, Detail, Final

74 Design

7.10 Cut Scenes Zur Erstellung der unten aufgelisteten Videos wurden hauptsächlich die Adobe Programme Animate CC, After Effects CC, Illustrator CC und Media Encoder CC der Creative Cloud Student and Teacher

Edition verwendet. Außerdem wurde für einen Anwendungsfall (für Cut Scene F1 und F2) das

kostenlose Tool Video Time Reversal (Version 2.08) benötigt, um ein bereits erstelltes Video rückwärts konvertieren zu können. Die Bildelemente in den Videos wurden mit Illustrator CC als Vektorgrafiken

erstellt und schließlich in Animate CC importiert, um diese zu einem Video zu schneiden und zu ani-mieren. Die Musikstücke wurden ebenfalls in Animate CC importiert und verarbeitet. Einzige Aus-

nahme stellt das Video von »Black Air Knights: Intro« dar. Denn diese Animation benötigte zusätzlich

noch After Effects CC, um einen Wolken bzw. Rauch/Text Effekt darstellen zu können. Der i-Punkt aus dem Word »AIR« wurde dabei zunächst in Illustrator CC als Vektorgrafik erstellt, in Animate CC mit

einem Glüheffekt animiert und schließlich in After Effects CC weiterverarbeitet. Jedes Video wurde am Ende noch mit dem Programm Media Encoder CC in das richtige Format (H.264, MP4) konvertiert, um

im Phaser-Code eingebunden und im Web ausführbar werden zu können. Im Folgenden werden alle

zwölf Videos, die für das Webspiel erstellt wurden, mit einer Beschreibung aufgelistet.

Startseite Titel: Black Air Knights: Intro © 2018

Handlung: Eine Wolke bewegt sich von links nach rechts und

hinterlässt nach und nach Buchstaben, die den Titel »BLACK AIR

KNIGHTS« ergeben.

Technologie: After Effects CC, Animate CC, Illustrator CC und

Media Encoder CC Schriftart: Mason Sans (Adobe Typekit)

Sound: Haunted Forest © Dag Reinbott

Größe (B x H): 1920 x 1080 px Format: H.26418, MP4-Datei

Länge: 01:15 min

Abbildung 85: Black Air Knights: Intro:

blackAirKnights_intro.mp4

Cut Scene A

Titel: Ordinary World © 2018

Handlung: Fische fliegen in der Luft und ein Luftschiff, gezogen

von vier Delphinen, fliegt zu einer schwebende Stadt in den

Wolken. Technologie: Animate CC, Illustrator CC und Media Encoder CC

Sound: Forgotten Paradise © Dag Reinbott

Größe (B x H): 1920 x 1080 px

Format: H.264, MP4-Datei

Länge: 01:20 min

Abbildung 86: Ordinary World:

ordinary_world.mp4

18 H.264-Standard: Ein digitales Encoding-Format für hochauflösende Videos zur Videokompression.

Design 75

Cut Scene B

Titel: Airship Arrival © 2018

Handlung: Während sich Damian und sein Vater vor der Haustür

auf der Darcono Farm unterhalten, landet ein Luftschiff vor

ihrem Haus. Der Kapitän des Luftschiffs steigt aus und macht

ihnen ein Angebot. Technologie: Animate CC, Illustrator CC und Media Encoder CC

Sound: Deep Impact © Dag Reinbott


Länge: 01:05 min

Abbildung 87: Airship Arrival:

airship_arrival.mp4

Cut Scene C

Titel: Airship Departure © 2018

Handlung: Das Luftschiff verlässt die Darcono Farm und fliegt

wieder weg. Technologie: Animate CC, Illustrator CC und Media Encoder CC

Sound: Deep Impact © Dag Reinbott


Länge: 00:15 min

Abbildung 88: Airship Departure:

airship_departure.mp4

Cut Scene D

Titel: Tumbras © 2018

Handlung: Das Luftschiff wird von Tumbras, den

Schattengeistern, angegriffen.

Technologie: Animate CC, Illustrator CC und Media Encoder CC

Sound: Pole Position © Dag Reinbott


Länge: 00:03 min

Abbildung 89: Tumbras: tumbras.mp4

Cut Scene E1

Titel: Enter Shadow Empire Armory © 2018

Handlung: Die Waffenkammer dreht sich auf den Kopf, Blut

strömt hinein und der Raum verwandelt sich zum Schattenreich.


Sound: Crazy Brain © Mike Koenig Größe (B x H): 1920 x 1080 px


Länge: 00:17 min

Abbildung 90: Enter Shadow Empire Armory:

enter_shadow_empire_armory.mp4

76 Design

Cut Scene E1

Titel: Enter Shadow Empire Library © 2018

Handlung: Handlung: Die Bibliothek dreht sich auf den Kopf, Blut

strömt hinein und der Raum verwandelt sich zum Schattenreich.




Länge: 00:17 min

Abbildung 91: Enter Shadow Empire Library:

enter_shadow_empire_library.mp4

Cut Scene F1

Titel: Leave Shadow Empire Armory © 2018

Handlung: Das Schattenreich dreht sich auf den Kopf und

verwandelt sich zurück in die Waffenkammer.

Technologie: Animate CC, Illustrator CC, Media Encoder CC und

Video Time Reversal 2



Länge: 00:17 min

Abbildung 92: Leave Shadow Empire Armory:

leave_shadow_empire_armory.mp4

Cut Scene F2

Titel: Leave Shadow Empire Library © 2018

Handlung: Das Schattenreich dreht sich auf den Kopf und

verwandelt sich zurück in die Bibliothek. Technologie: Animate CC, Illustrator CC, Media Encoder CC und

Video Time Reversal 2

Sound: Crazy Brain © Mike Koenig


Länge: 00:17 min

Abbildung 93: Leave Shadow Empire Library:

leave_shadow_empire_library.mp4

Cut Scene G

Titel: Lumitra © 2018

Handlung: Ein Lumitra (Lichtgeist) erscheint aus dem Amulett.


Sound: Appear © KP

Größe (B x H): 1920 x 1080 px Format: H.264, MP4-Datei Länge: 00:05 min

Abbildung 94: Lumitra: lumitra.mp4

Design 77

Cut Scene H

Titel: Lorcans Transformation © 2018

Handlung: Kapitän Sir Lorcan verwandelt sich in einen

Schattengeist.


Sound: Scary And Eerie © Mark DiAngelo Größe (B x H): 1920 x 1080 px


Länge: 00:10 min

Abbildung 95: Lorcans Transformation:

lorcans_transformation.mp4

Cut Scene I Titel: Road Back © 2018

Handlung: Das Luftschiff fliegt zur Darcono Farm zurück.


Sound: Forgotten Paradise © Dag Reinbott

Größe (B x H): 1920 x 1080 px

Format: H.264, MP4-Datei Länge: 00:04 min

Abbildung 96: Road Back: road_back.mp4

7.11 Audio Musik und Sound Effekte vermitteln Emotionen, Stimmungen und geben Rückmeldung bei Inter-aktionen. Die Erstellung von Sound Design ist allerdings nicht Schwerpunkt dieser Arbeit. Zudem wäre

es zeitlich und aufgrund fehlender Skills auch nicht möglich gewesen, die Musik und Sound Effekte

selbst zu erstellen. Dennoch ist die Musik für die Immersion eines Spiels von wichtiger Bedeutung. Daher wurden lizenzfreie und kostenlose Musikstücke und Sound Effekte für dieses Spiel ausgewählt,

um die gewünschten Effekte und Emotionen transportieren zu können. Die für dieses Spiel erstellten Cut Scenes wurden auch von der Musik beeinflusst und inspiriert. Denn die meisten Videos wurden

passend zum Takt der Musikstücke geschnitten, um mehr Stimmigkeit und Einklang zu erzielen. Die

verwendete Musik und Soundeffekte werden mit Quellenangaben und Verwendungszweck im Folgen-den aufgelistet.

1. Verwendete Musik

Quelle: TerraSound [14]

Musiktitel / Audio-Designer Verwendungszweck

Accelerator © Dag Reinbott Levels / States

• ShipShadowEmpireFinalFight.js

Beautiful Mood © Dag Reinbott Levels / States

• ShipReward.js

• TheEnd.js

Criminal Cat © Dag Reinbott Levels / States

• Room.js

• FarmEscapeWay.js

78 Design

Dance of the Imps © Dag Reinbott Levels / States

• ShipTestArmory.js

• ShipTestLibrary.js

• ShipTestArmoryBack.js

• ShipTestLibraryBack.js

Deep Impact © Dag Reinbott Cut Scenes

• airship_arrival.mp4

• airship_departure.mp4

Levels / State

• AirshipArrival.js

• AirshipDeparture.js

Fantastic Journey © Dag Reinbott Levels / States

• Ship.js

Forgotten Caves © Dag Reinbott Levels / States

• ShipShadowEmpireArmory.js

• ShipShadowEmpireLibrary.js

• ShipShadowEmpireCell.js

• ShipShadowEmpireCellEscape.js

Forgotten Paradise © Dag Reinbott Cut Scenes

• ordinary_world.mp4

• road_back.mp4

Levels / State

• OrdinaryWorld.js

• RoadBack.js

Haunted Forest © Dag Reinbott Levels / States

• Intro.js

• GameOver.js

• ToBeContinued.js

Liquid Energy © Dag Reinbott Levels / States

• Ship.js

Piano Rain © Dag Reinbott Levels / States

• Farm.js

• FarmAfterVist.js

• FarmBack.js

Pole Position © Dag Reinbott Cut Scene

• tumbras.mp4 Level / State

• Tumbras.js

• ShipEnimies.js

Tabelle 6: Verwendete Musik mit Verwendungszweck

Design 79

2. Verwendete Sound Effekte

Quelle: Free Sound Effects [15]

Musiktitel / Audio-Designer Verwendungszweck

Big Bomb © Sandyrb Treffer beim Kampf / Zerstören

Barret Sniper Rifle © Mike Koenig Zauberstab

Sword Swing © Mike Koenig Schwert

Crazy Brain © Mike Koenig Cut Scenes

• EnterShadowEmpireArmory.mp4

• EnterShadowEmpireLibrary.mp4

• LeaveShadowEmpireArmory.mp4

• LeaveShadowEmpireLibrary.mp4

Appear © KP • Cut Scene: lumitra.mp4

• Level / State: Lumitra.js

• Truhen erscheinen

• Lumitra erscheint

Drawer Opening © Mike Koenig Schublade öffnen

Door Unlock © Mike Koenig Verschlossene Tür versuchen zu öffnen

Click Sound © Mike Koenig Rucksack aufheben

Old Door Creaking Sound © Stephan Fenster öffnen

Ting Sound © Popup Pixels Ball aufheben / Darconos füttern

No Mercy © Hipis • Cut Scene: lorcans_transformation.mp4

• Level / State: LorcansTransformation.js

Scary And Eerie © Mark DiAngelo • Cut Scene: lorcans_transformation.mp4

• Level / State: LorcansTransformation.js

Tabelle 7: Verwendete Sound Effekte mit Verwendungszweck

80 Implementierung

8 Implementierung

Das Webspiel »Black Air Knights« wurde mit den Technologien JavaScript (ECMAScript 201519),

JSON, Node.js, HTML5 und CSS3 implementiert. Dabei bietet ECMAScript 2015 einige erweiterte

Funktionen, wie z. B. das Definieren von »Klassen« und Objekten mit einem Modulsystem (import und export), die den Code viel übersichtlicher und kürzer machen. Zwar werden für einige Features noch ein

Transpiler (z. B. JavaScript Transpiler Babel) benötigt, dennoch wird durch ECMAScript 2015 der Code

mit einer besseren Qualität übersichtlicher und wartbarer. Als Game Engine wurde das Framework Phaser CE eingesetzt. Die kostenfreie Open-Source-Software Visual Studio Code von Microsoft wurde

als integrierte Entwicklungsumgebung (IDE) zum Programmieren verwendet. Dieser Code-Editor ist für die Entwicklung von Webanwendungen geeignet und unterstützt die Technologien, die für dieses

Projekt verwendet wurden. Die Projektarbeit wurde zur Versionsverwaltung von Dateien, Code und

Verzeichnissen über Github versioniert:

https://github.com/zaviska/interactive-storytelling-im-web/

Abbildung 97: Github, Detail, Stand April 2018

8.1 Einrichtung des Projekts

1) Visual Studio Code (IDE) installiert

2) cmder Console Emulator, Full Edition (Terminal für Windows) installiert 3) Node.js 9.4.0 Current, latest feature (serverseitige Plattform für JavaScript) installiert

Node.js beinhaltet npm (Package/Dependency Manager für JavaScript)

4) Yo (Yeoman.io) zum Ausführen von Generatoren über npm im cmder installiert: npm install -g yo

5) Generator-Phaser-Plus v2.4.1 (npm Package) zum Aufsetzen eines Phaser Projekts über npm im

cmder installiert: npm install –-global generator-phaser-plus

6) Generator-Phaser-Plus (Abb. 98) über yo im cmder ausgeführt: yo generator-phaser-plus

19 Die alte Bezeichnung von ECMAScript 2015 ist ECMAScript 6. Dabei handelt es sich um eine ECMAScript standardisierte Skriptsprache, die im Jahr 2015 durch die Normungsorganisation Ecma International veröffentlicht wurde.

Implementierung 81

Baut ein neues Phaser Projekt mit Arcade Physics, P2, Babel und ECMAScript.

Legt im Projekt die JSON-Datei package.json (Abb. 98) an, in welcher alle

Dependencies (Software Abhängigkeiten) definiert sind. 7) Dependencies über npm im cmder installiert:

npm install

Legt im Projekt den Ordner node_modules (Abb. 99) an, in welchem alle Dependencies, wie z.B. Gulp, Babel oder Phaser, installiert sind.

Gulp.js: Ein Build-Tool, um während der Entwicklung Aufgaben zu automatisieren. Im Ordner gulpfile.js befinden sich folgende JavaScript Konfigurationen:

• dev.js (zum Entwickeln auf dem lokalen Server, wird mit npm start

ausgeführt) Aufgaben sind z.B.: Live Reload: Aktualisierung des Codes während der Entwicklung

Debug Messages

• dist.js (Konfiguration für die Optimierung) Aufgaben sind z.B.:

Komprimierung von JavaScript, HTML und CSS

Erstellung eines dist Ordners, in welchem die optimierten Dateien für

den live Webserver kopiert werden. Wird mit npm run dist ausgeführt.

Statische Code-Analyse.

Wird mit npm run lint ausgeführt.

Babel: Wandelt für dieses Projekt ECMAScript 2015 in ECMAScript 5 um, damit

aktuelle Browser den Code lesen und ausführen können.

Phaser: Ein HTML5 game framework und 2D Game Engine mit WebGL und Canvas rendering. Generator-Phaser-Plus hat das Framework Phaser CE (Community Edition) Version 2.10.3 installiert.

Abbildung 98: Ausführung von Generator-Phaser-Plus v2.4.1

82 Implementierung

8.2 Ordner Struktur des Phaser Projekts

Nachdem das Phaser Projekt durch den Generator aufgesetzt wurde, ergibt

sich folgende Ordner Struktur (Abb. 99):

Davon wurden folgende Dateien und Ordner im Verlauf der Entwicklung

angelegt:

dist-Ordner JavaScript Dateien im state-Ordner textbox-Ordner audio, image und video Dateien im assets-Ordner impressum.html sytle.css

Abbildung 99:

Visual Studio Code,

Phaser, File Structure,

Stand April 2018

8.3 Game Engine: Phaser Phaser ist ein HTML5 Game Framework für Desktop und Mobile, welches in JavaScript geschrieben ist. Dieses Framework ist Open Source und basiert auf Pixi.js für Canvas20 und WebGL21 rendering.

[23] Entwickelt wurde Phaser von Photon Storm (Richard Davey). [24] Phaser 2 wurde im November

2016 zur Community Edition Phaser CE, bei welcher die Version 2.10.3 der aktuelle Release (Veröffentlichung) ist. [24] Das Framework Phaser ist für JavaScript Entwickler und als Anfänger in

der Spieleentwicklung gut geeignet.

Begründung für Phaser 2 bzw. Phaser CE (Community Edition)

Dieses kostenlose Framework bietet eine umfangreiche API22 Dokumentation [17] [23] und viele prakti-

sche Code Anwendungsbeispiele [18] für Phaser 2 [16], die den Einstieg erleichtern und schnelle Erfol-ge ermöglichen. Die Vorteile eines Frameworks sind im Allgemeinen: Kosten (die meisten Frameworks

sind kostenlos verfügbar), Dokumentation, Community und Unterstützung (durch die Dokumentation,

einem Support-Team oder einer Community können schnell Antworten gefunden werden), Geschwin-digkeitsvorteil (Entwicklungszeit einfacher und schneller durch vorgefertigten Funktionen und Code-

20 Canvas ist ein HTML-Element, welches eine leere, Pixel-basierte Leinwand ist. Auf ihr können mit JavaScript 2D Grafiken gezeichnet werden. 21 Die JavaScript API WebGL (Web Graphics Library) basiert auf OpenGL ES (Open Graphics Library for Embedded Systems) und rendert 3D Grafiken. 22 API: application programming interace, eine Programmierschnittstelle.

Implementierung 83

Strukturen). Dagegen sind die Nachteile eines Frameworks: Codeballast (selten werden bei einer vorge-

gebenen Struktur alle Möglichkeiten des Frameworks benutzt. Deshalb kann es zu Ballast von unge-

nutztem Code kommen) und Strukturelle Einschränkungen (diese Grenzen entstehen durch die vorgege-ben Struktur. Es ist zudem schwieriger bestehende Funktionalitäten zu ändern als diese neu zu schrei-

ben). Auch wenn Phaser ein paar Einschränkungen hat, überwiegen allerdings die Vorteile eines Frame-works, wie z. B. in kurzer Zeit ein komplexes Spiel entwickeln zu können. Phaser 3 stand zum Zeitpunkt

des Projektstarts nur als Beta-Version23 zur Verfügung stand. Deshalb fiel die Wahl auf Phaser 2, um

mit einer stabilen Version zu entwickeln und auf die Code Beispiele zurück greifen zu können.

8.3.1 Game States Das Webspiel besteht aus einer Reihe von State-Objekten, die miteinander verbunden sind. Dabei ent-

spricht jeder Level und jede Cut Scene genau einem State, die im Canvas gerendert werden. In einem State kann ein neues State mit der Methode start(key: String) gestartet werden. Beispielsweise

wird im State Preloader.js der State Intro.js gestartet, welcher die erste Cut Scene (Intro) auf der Startseite abspielt. In states.js werden alle Game States deklariert und exportiert, so dass die States über

einen Key-String aufgerufen werden können.

Preloader.js

1 this.state.start('Intro');

states.js

1 export {default as Intro} from './states/Intro';

Die verwendeten Hauptmethoden der Klasse State sind

• init(): Erste Methode (Initial State app.js), die noch vor allen anderen Methoden ausgeführt

wird, um die Anwendung zu konfigurieren, zu bauen sowie zu starten.

• preload(): Lädt externe Game Assets, wie z. B. Bilder, Sprites, Sounds, Videos oder Tilmaps.

Diese Methode wurde in Preloader.js benutzt, um alle Assets zu laden, die im ganzen Spiel

benötigt werden. Zudem hat jeder State aus Performance Gründen noch eine eigene Preload-

Funktion, damit nur die Assets geladen werden, die im aktuellem Level gebraucht werden.

• create(): Eine State Initialisierung, die einmal ausgeführt wird, nachdem alle Assets geladen

wurden.

• update(): Diese Methode wird nach der State Initialisierung aufgerufen. Es handelt sich dabei

um einen Live Reload während dem Spielen, welcher das Level in regelmäßigen Zeitabständen

aktualisiert und dabei Funktionen aufrufen kann.

• resize(): Skaliert die Höhe und Breite des Spiels jedesmal neu, wenn sich die Größe des

Browsers ändert.

23 Beta-Version: Eine Version, die noch nicht fertiggestellt ist. Sie besitzt zwar schon die Grundfunktionen, wurde aber noch nicht auf Fehler getestet.

84 Implementierung

8.3.1.1 State Diagramm

Abbildung 100: State Diagram

Initial State

In app.js wird die Anwendung initialisiert. Dieser State importiert alle Game States und Konfigurations-

einstellungen, fügt alle erforderlichen States hinzu und startet das Spiel.

Hauptmethode

init() (Beschreibung siehe in Kapitel 8.3.1).

Boot State

Die Datei Boot.js ist der erste State, welches das Spiels einstellt. Dieser State lädt das Bild für den Loading Screen, skaliert das Spiel, setzt den Pfad für die Assets und richtet weitere Einstellungen ein.

Hauptmethoden

preload() und create() (siehe Beschreibung in Kapitel 8.3.1).

Preload State

In Preloader.js werden externe Assets geladen.

Hauptmethoden

preload() und create() (siehe Beschreibung in Kapitel 8.3.1).

Intro State

In Intro.js wird die erste Cut Scene (Intro-Video) auf der Startseite (index.html) gestartet. Wenn auf dem Spielen-Button geklickt wird, startet das erste State der Game States.

Implementierung 85

Game States Das Spiel besteht aus 11 Cut Scenes (

AirshipArrival.js, AirshipDeparture.js, EnterShadowEmpireArmory.js, EnterShadowEmpireLibrary.js, LeaveShadowEmpireArmory.js, LeaveShadowEmpireLibrary.js, LorcansTransformation.js, Lumitra.js, OrdinaryWorld.js, RoadBack.js, Tumbras.js

)

und 18 Levels (

Farm.js, FarmAfterVisit.js, FarmBack.js, FarmEscapeWay.js, Room.js, Ship.js, ShipEnimies.js, ShipReward.js, ShipShadowEmpireArmory.js, ShipShadowEmpireLibrary.js, ShipShadowEmpireCell.js, ShipShadowEmpireCellEscape.js, ShipShadowEmpireFinalFight.js, ShipShadowEmpireLibrary.js, ShipTestArmory.js, ShipTestArmoryBack.js, ShipTestLibrary.js, ShipTestLibraryBack.js,

)

Jede Game State hat eine eigene Game Logik (siehe Beschreibung in Kapitel 8.3.1.2)

Game Over State

In GameOver.js wird ein Game Over Screen angezeigt. Wenn auf dem Zurück-Button geklickt wird,

startet der letzte Game State neu.

Hauptmethoden

preload() und create() (siehe Beschreibung in Kapitel 8.3.1)

The End State

TheEnd.js zeigt ein The End Screen an.

Hauptmethoden

preload() und create() (siehe Beschreibung in Kapitel 8.3.1)

86 Implementierung

8.3.1.2 Game Logik

Game State: Level

Hauptmethoden

preload(), create() und update() (siehe Beschreibung in Kapitel 8.3.1)

Abbildung 101: Game Logic, Game State, Level

Game State: Cut Scene

Hauptmethoden

preload(), create() und resize() (siehe Beschreibung in Kapitel 8.3.1)

Abbildung 102: Game Logic, Game State, Cut Scene

Implementierung 87

8.3.2 Dialogsystem Gerenderte Typographie auf einem Canvas behält ihre Position bei, wenn sich die Game World eines Levels bewegt. Deshalb wurde ein HTML Gerüst um das Canvas gebaut, welches den Textbereich, vom

Canvas Element unabhängig, fixiert darstellen kann. Um einen Erzählertext und Dialoge mit Antwort-möglichkeiten innerhalb eines HTML Texfeldes anzeigen zu können, wurde ein eigenes Dialogsystem

entwickelt.

1. Klassendiagramm

Abbildung 103: Dialogsystem, Klassendiagramm

Klasse TextBoxController

• Ziel: Zum Managen des Dialogsystems. • addText()

Fügt neuen Text in eine Liste ein. Rendert diese Liste neu.

• renderText() Beim Rendern wird das gesamte Textfeld neu generiert und an den DOM gehängt. Nur das letzte Element in der Liste kann klickbar sein. Der Text wird nach ganz unten gescrollt.

Klasse Text

• Ziel: Zum Anzeigen eines Textes (Erzählertext der Gamestory). • render()

Rendert den Erzählertext.

88 Implementierung

Klasse Dialog

• Ziel: Zum Rendern eines Dialogtextes mit Dialogbild und dazugehörigem Namen. • render()

Fügt das Dialogbild aus der Klasse Person hinzu. Fügt den Namen aus der Klasse Person hinzu. Rendert den Dialogtext.

Klasse Person

• Ziel: Zum Erzeugen eines Objektes mit Namen und Code für das Dialogbild. • Das Objekt soll nicht geändert werden können (keine Setter-Methoden). • getName()

Das Attribut name wird gesetzt. • getCode()

Das Attribute code wird gesetzt. Das Attribut code enthält einen String, welches auf einen Klassenselektor im sytle.css

verweist, in welchem sich die url der Bild-Ressource befindet.

style.css

1 .picture.damian { 2 background-image: url('assets/image/dialog/damian_100x100px.png'); 3 }

Klasse Decision

• Ziel: Zum Erstellen einer Liste von Answer-Objekten. • render(clickable)

Erstellt eine Liste mit Antwortmöglichkeiten aus der Klasse Answer. Durch den Parameter clickable können die Antworten entweder klickbar oder nicht

klickbar gerendert werden.

Klasse Answer

• Ziel: Zum Erzeugen eines Objektes mit Text und Callback. • getText()

Das Attribut text wird gesetzt. • getCallBack()

Das Attribute callBack wird gesetzt. Der CallBack beinhaltet eine JavaScript-Funktion.

2. Einbindung des Dialogsystems

Klassen importieren

• Alle verwendeten Klassen müssen importiert werden. • Die Klasse TextBoxController wird in die Datei app.js importiert, da nur ein Objekt

dieser Klasse erzeugt werden soll. • Am Beispiel Farm Level (Farm.js) werden die Klassen Text, Person, Dialog, Decision und

Answer benötigt und mit import importiert.

app.js

1 import { TextBoxController } from './textbox/TextBoxController';

Farm.js

1 import { Text } from "../textbox/api/Text";

Implementierung 89

2 import { Person } from "../textbox/api/Person"; 3 import { Dialog } from "../textbox/api/Dialog"; 4 import { Decision } from "../textbox/api/Decision"; 5 import { Answer } from "../textbox/api/Answer";

Erzählertext hinzufügen

• new Text(text: String) erstellt ein neues Objekt zum Anzeigen des Textes. • addText(text: Text) fügt ein neues Objekt hinzu.

Farm.js (Create)

1 let textBox = this.game.textBox; 2 textBox.addText(new Text("KAPITEL 1: BLACK'S DARCONO FARM <hr>"));

Abbildung 104: Dialogsystem im Textfeld: Text (Erzählertext), Beispiel: Farm Level

Dialog hinzufügen

• new Person(name: String, code: String) erstellt ein neues Objekt mit Namen und Code für das Dialogbild.

• new Dialog(text: String, person: Person) erstellt ein neues Objekt zum Anzeigen eines Dialogtextes.

FarmEscapeWay.js (Update)

1 let lorcanPerson = new Person("Sir Lorcan", "lorcan"); 2 this.game.textBox.addText(new Dialog("Möchtest du einsteigen?", lorcanPerson));

Decision hinzufügen

• new Answer(text: String, callBack: Function) erstellt ein Objekt mit Text und Callback, welches durch let nur im Block gilt

• new Decision(answers: Array[Answer]) erstellt eine Liste von Answer-Objekten • Die JavaScript-Funktion des CallBacks callBack: Function wird an die globale Umgebung

window gehangen, damit von außen auf Phaser Funktionalität zugegriffen werden kann.

FarmEscapeWay.js (Update)

1 window.waitAnswer = function() { 2 textBox.addText(new Dialog("Komme wieder, wenn du bereit bist.",

lorcanPerson)); 3 } 4 window.startCutSceneAirshipDeparture = function() { 5 that.escapeWayBackgroundSound.destroy(); 6 that.state.start('AirshipDeparture'); 7 } 8 let questionAnswer = [ 9 new Answer("Ja, ich möchte einsteigen.", "startCutSceneAirshipDeparture"), 10 new Answer("Noch nicht.", "waitAnswer") 11 ]; 12 this.game.textBox.addText(new Decision(questionAnswer));

90 Implementierung

Das Code-Beispiel aus FarmEscapeWay.js sieht dann final im Webspiel wie in Abb. 105 aus:

Abbildung 105: Dialogsystem im Textfeld: Dialog, Decision und Answer, Beispiel: Fram Escape Way Level

8.3.3 Responsive Webdesign: Game Scaling

Herausforderung

Phaser ist darauf ausgelegt ein Webspiel auf einem Canvas-Element zu rendern. Mit dem ScaleManger

von Phaser wird die Größe des Spiels responsive skaliert, so dass sich die Ausgabe des Canvas der Größe des Browserfensters anpassen kann.

Da sich allerdings das Texfeld des Dialogsystems und die Navigation außerhalb des Canvas befindet,

musste das Game Scaling im Canvas mit dem responsiven HTML und CSS verbunden werden. Dies

wurde zu einer Herausfoderung, denn der ScaleManager im Canvas lieferte kein einheitliches und

zuverlässiges Gesamtergebnis. Während ein Game State responsive dargestellt wurde, konnte beispiels-

weise in einem anderen Level das Canvas-Element nicht vollständig angezeigt werden. Somit wurde z. B. die untere Hälfte der Game World (Canvas) durch das Textfeld verdeckt. Auch die Videos der Cut

Scenes wurden z. B. im Vollbildmodus nicht responsive, sondern abgeschnitten, dargestellt.

Zusammenfassung der Anforderungen

1. Canvas-Größe und -Position konfigurieren.

2. Canvas mit HTML/CSS verbinden.

3. Level States (Canvas) skalieren. 4. Cut Scene States (Canvas) skalieren und Textfeld (HTML) ausblenden.

Implementierung 91

Das Website-Layout, welches Canvas mit HTML/CSS Bereiche verbindet, sieht wie folgt aus:

Abbildung 106: HTML und CANVAS Bereiche im Browserfenster

Abbildung 107: HTML und CANVAS Bereiche im Browserfenster, Beispiel: Farm Escape Way Level

Lösungsschritte

1. Canvas-Größe und -Position konfigurieren

Zunächst wird in der Datei config.js die Canvas-Größe mit 1920 x 900 px (Breite x Höhe) konfiguriert. Damit wid die Größe gesetzt, die der Levels entspricht. Außerdem wird noch der optionale Parameter

parent deklariert, welcher dem Key "game" zugewiesen wurde. Dieser Parameter ist das DOM

Element, in welchem das Canvas eingefügt wird. Im HTML index.html kann somit über die DOM id

<div id="game"></div> die Position des Canvas bestimmt werden. Dies wurde gemacht, damit das

Canvas zwischen der Navigation und des Textfeldes positioniert wird.

config.js

1 export const width = 1920; 2 export const height = 900; 3 4 export const parent = "game";

92 Implementierung

2. Canvas mit HTML/CSS verbinden: Berechnung der Canvas-Höhe

Im HTML index.html entspricht die id="game" nicht nur dem Parameter parent, sondern auch einem

CSS-Selektor. Diese id ist in style.css definiert und berechnet damit die Höhe und Breite des Canvas.

Dabei wird die Höhe der Navigation mit 200 px und des Texfeldes mit 38 px der gesamten Browser-fensterhöhe (100 vh: viewport height → entspricht 100% Höhe in Relation zur Fenstergröße) abge-

zogen, um die Höhe des Canvas zu erhalten.

style.css

1 #game { 2 height: calc(100vh - 238px); 3 width: 100vw; 4 }

3. Level States (Canvas) skalieren

Der Skalierungsmodus wird mit dem ScaleManger auf SHOW_ALL gesetzt und jeweils dem

scaleMode (→ benutzt den ScaleManager, wenn der Fullscreen Modus deaktiviert ist) sowie dem

fullScreenMode (→ benutzt den ScaleManager, wenn der Fullscreen Modus aktiviert ist) innerhalb

der Create-Funktion (z. B. in Farm.js) zugewiesen. Mit SHOW_ALL wird ein Level State automatische

responsive skaliert, ohne dabei eine eigene Methode zusätzlich schreiben zu müssen.

Farm.js (Create)

1 this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; 2 this.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;

4. Cut Scene States (Canvas) skalieren und Textfeld (HTML) ausblenden

Um die Cut Scene (→ Video in der Größe 1920 x 1080 px) relativ zum gesamten Browserfenster wieder-geben zu können, wurde der Skalierungsmodus mit dem ScaleManger auf RESIZE gesetzt und jeweils

dem scaleMode sowie dem fullScreenMode innerhalb der Create-Funktion (z. B. in Ordinary

World.js) zugewiesen. Bei RESIZE muss zusätzlich eine eigene Resize-Methode geschrieben werden.

Die Methode resize(x, y) berechnet die Videogröße sowie die Position des Buttons in Relation zur

aktuellen Fenstergröße, welche jedesmal ausgeführt wird, wenn sich die Browserfenstergröße ändert. Damit die Videogröße auch richtig berechnet wird, wenn ein State einen neuen Cut Scene State startet,

wird diese Methode einmal mit this.resize(this.game.width, this.game.height) in der

create() Funktion aufgerufen.

OrdinaryWorld.js (Resize)

1 resize (x, y) { 2 var scaleModiferX = x/1920; 3 var scaleModiferY = y/1080; 4 var videoScale = Math.min(scaleModiferX, scaleModiferY); 5 this.game.videoImage.scale.set(videoScale); 6 this.game.nextButton.x = scaleModiferX*1710; 7 this.game.nextButton.y = scaleModiferY*10; 8 this.game.nextButton.scale.set(videoScale); 9 }

Damit das Texfeld während der Cut Scene nicht zu sehen ist, wird es innerhalb der Create-Funktion mit

hideNavigation() ausgeblendet. Die Methode showNavigation() blendet es wieder ein, die

aufgerufen wird, nachdem das Video vollständig abgespielt wurde. Diese Methoden verändern die CSS-

Properties height und display des Canvas und des Texfeldes und werden in app.js definiert.

Implementierung 93

app.js

1 game.hideNavigation = function () { 2 document.getElementById('game').style.height = "100vh"; 3 document.getElementById('textbox').style.display = "none"; 4 } 5 game.showNavigation = function() { 6 document.getElementById('game').style.height = "calc(100vh - 238px)"; 7 document.getElementById('textbox').style.display = "block"; 8 }

8.3.4 Navigation Funktionalitäten Für die Website-Navigation wurden folgende Menüpunkte in index.html implementiert:

• Home • Enter/Leave Fullscreen • Steuerung • Impressum • Texfeld maximieren/minmieren

Im Folgenden werden nur die Home und Fullscreen Funktionalitäten beschrieben. Die Funktion Steue-rung entspricht der Implementierung der Funktion Home (Anforderung/Darstellung siehe Kapitel 5.2.5).

Beim Menüpunkt Impressum wird lediglich ein neues HTML-Dokument in einem neuen Tab aufge-

rufen. Der Link Texfeld maximieren/minimieren befindet sich im Textfeld des Dialogssystems und be-sitzt eine onclick-Funktion toogleTextbox(), die das Texfeld auf das ganze Browserfenster vergrö-

ßern oder zurück in ihrer ursprünglichen Größe verkleinern kann. Da die Textfeld Funktion der Imple-mentierung der Fullscreen Funktion entspricht, wird darauf ebenfalls nicht näher eingegangen.

Home Funktion

Der Menüpunkt Home soll die Startseite index.html aufrufen. Damit das Webspiel nicht ungewollt

unterbrochen wird, enthält der Link des Menüpunkts Home die onclick-Funktion openPopupHome().

Damit wird ein Textfeld mit der Information, dass der Spielstand dadurch verloren geht, eingeblendet.

Der Benutzer kann im nächsten Schritt entweder den Vorgang abbrechen cancelPopupHome()→ hidePopupHome() und damit das Texfeld ausblenden oder das Spiel verlassen openHome(), um die

Startseite aufrufen zu können.

index.html

1 function openPopupHome() { 2 hidePopupControl(); 3 document.getElementById("popupContentHome").style.display = "block"; 4 } 5 function hidePopupHome() { 6 document.getElementById("popupContentHome").style.display = "none"; 7 } 8 function openHome() { 9 hidePopupHome(); 10 self.location.href="index.html"; 11 } 12 function cancelPopupHome() { 13 hidePopupHome(); 14 }

94 Implementierung

Fullscreen Funktion

Die Fullscreen Funktion von Phaser wird nur auf das Canvas-Element angewendet, weshalb sie für die Webspiel-Anforderung nicht genutzt werden konnte. Die Website soll nämlich das Canvas-Element

zusammen mit der Navigation und dem Textfeld im Vollbildmodus anzeigen können. Deshalb wurden zwei Fullscreen Funktionen geschrieben, die der Browser unterstützt. Die Themen Fullscreen Funktion

und Responsive Game Scaling überschneiden sich dabei. Wie genau der Fullscreen Modus responsive

implementiert wird, wurde bereits im letzten Kapitel 8.3.3 beschrieben. Die Methode toggleFullscreen() kann die Zustände true und false umschalten, den Vollbild-

modus aktivieren oder deaktivieren und den Text des Menüpunkts in Enter oder Leave Fullscreen än-dern. Diese Funktion wird ausgeführt, wenn auf dem Menüpunkt Fullscreen geklickt wird.

index.html

1 let toggler = true; 2 function toggleFullscreen() { 3 if(toggler) { 4 window.app.enterFullscreen(document.documentElement); 5 toggler = false; 6 document.getElementById("fullscreenButton").innerHTML = "Leave

Fullscreen"; 7 } else { 8 window.app.exitFullscreen(); 9 toggler = true; 10 document.getElementById("fullscreenButton").innerHTML = "Enter

Fullscreen"; 11 } 12 }

8.3.5 Game Objekte Bilder bzw. Sprites, Tilemaps, Text, Buttons, Sound, Video, etc. werden mit game.add der Klasse

GameObjectFactory(game) in die Game World hinzugefügt, so dass sie als Objekte genutzt werden

können. Dafür werden die benötigten externen Assets, wie Bilder, Sound-Dateien oder Videos, zunächst

in einem State über die Preload-Funktion mit load der Klasse Loader hinzugefügt. Dabei werden sie

wie folgt geladen: PNG Sprites mit load.spritesheet, PNG Bilder mit load.image, JSON-Datei-

en mit load.tilemap, Sound-Dateien mit load.audio und Videos mit load.video.

8.3.5.1 Sprite

Ein PNG Sprite wird mit game.add.sprite(x: Number, y: Number, key: String, frame:

String|Number) in der Create-Funktion hinzugefügt. Auf diese Weise werden unter anderem die

Charaktere in die Game World gezeichnet. Dabei bestimmen die Koordinaten die Position oder den Startpunkt des Sprites und der Key-String, welches PNG Sprite verwendet werden soll. Welcher Frame

bei einem Sprite für die Animation genau gerendert werden soll, wird in Kapitel 8.3.5.7 beschrieben.

Sprite-Objekte können nicht nur animiert, sondern sich durch eine Physic Engine (siehe in Kapitel 8.3.7) auch über eine definierte Schwerkraft bewegen sowie Kollisionen erkennen.

Farm.js (Preload)

1 this.load.spritesheet('damian', 'image/characters/damian/damian_room_210x495px.png', 210, 495);

Farm.js (Create)

this.player = this.game.add.sprite(700, 800, 'damian'); 1

Implementierung 95

8.3.5.2 TitleSprite

Der TitleSprite ist ein Game Objekt, welches als Textur oder Bild skaliert, wiederholt und gescrollt

werden kann. [23] Damit können Hintergrundbilder gebaut und in die Game World integriert werden. Ein Hintergrundbild kann z. B. auch aus Wiederholungen einer Textur gebaut werden, so dass nur ein

schmales Bild einer Textur geladen werden muss – vorausgsetzt, dass eine wiederholende Struktur

gewünscht ist. Andernfalls muss ein gesamtes Hintergrundbild grafisch erstellt und geladen werden. Mit game.add.titleSprite(x: Number, y: Number, width: Number, height: Number,

key: String, frame: String|Number) werden Hintergrundbilder mit Angaben von Koordi-

naten, Bildbreite- und höhe sowie optional mit Sprite-Frame (falls spritesheet, nicht bei image)

hinzugefügt. Dabei ist es noch wichtig anzugeben, wie groß die Game World insgesamt sein soll, damit eine Spielfigur nicht aus dem Hintergrundbild des Levels fällt. Die World Größe entspricht der gesamten

Größe des Hintergrundbildes und wird mit world.setBounds(x: Number, y: Number, width:

Number, hight: Number) gesetzt.

Farm.js (Preload)

this.load.image('background', 'image/background/house_farm_3840x900px.png');

Farm.js (Create)

1 this.background = this.game.add.tileSprite(0, 0, 3840, 900, 'background'); 2 this.game.world.setBounds(0, 0, 3840, 900);

8.3.5.3 Text

Um ein Text-Objekt auf dem Canvas rendern zu können, werden mit game.add.text(x: Number,

y: Number, text: String, style: Object) die Koordinaten, der Textinhalt und optional der

CSS-Style mit Angaben von Hintergrundfarbe, Schriftgröße, -art und -farbe definiert und hinzugefügt.

Farm.js (Create)

1 var style = { font: "20px Hind, Arial", fill: "#19de65", backgroundColor: "black"};

2 this.ballText = this.game.add.text(3500, 400, "Gesammelte Energie-Bälle: "+this.ballCount, style);

8.3.5.4 Button

Buttons können als PNG Sprite Objekte erstellt und über Events auf dem Canvas gezeichnet werden, so

dass sie sich wie ein Button verhalten. Insofern ist ein Button-Objekt sozusagen ein erweiterter Sprite. Mit game.add.button(x: Number, y: Number, key: String, callback: Function,

callBackContext, overFrame: String|Integer, outFrame: String|Integer,

downFrame: String|Integer) kann ein Button hinzugefügt werden. Die Position des Buttons wird

über die X- und Y-Koordinaten bestimmt. Der Key-String verweist auf den PNG Sprite, welcher in der Preload-Funktion geladen wird. Danach wird die Callback-Funktion definiert. Um die verschiedenen

Bilder der Button-Zustände zuweisen zu können, gibt es die Parameter overFrame (Mauszeiger auf dem Button), outFrame (Mauszeiger außerhalb des Buttons) und downFrame (Button wird geklickt). Die

Zahlen verweisen dabei auf die Frames des Sprites. Der erste Frame des Sprites entspricht der Zahl 0,

das Zweite der Zahl 1 usw.

Farm.js (Create)

1 this.game.nextButton = this.game.add.button(1710, 10, 'playButton', onClickNextButton, this, 1, 0, 2);

96 Implementierung

8.3.5.5 Sound

Mit der Klasse Sound werden Sound-Objekte erstellt, die unter anderem abgespielt, gestopt oder in

Dauerschleife wiedergegeben werden können. Die externen Assets bzw. Audio-Dateien werden in der

Create-Funktion mit game.add.audio (key: String) hinzugefügt. Die Audio-Dateien wurden in

den Game States entweder als Hintergrundmusik in Dauerschleife oder als Sound Effekt für eine be-

stimmte Interaktion verwendet. Die Methode loopFull() spielt den Sound in Dauerschleife ab, die

im Beispiel Ship Level ebenfalls in der Create-Funktion ausgeführt wird, um die Hintergrundmusik

direkt nach dem Laden des Game States hören zu können. Sound Effekte werden mit der Methode

play(key: String) innerhalb der Update-Funktion aufgerufen, nachdem ein Event ausgelöst wurde.

Ship.js (Preload)

1 this.load.audio('airhsip_sound','audio/airship/fantastic_journey_terrasoun_de.mp3');

2 this.load.audio('sword_sound','audio/sound_effects/sword/sword_swing.mp3');

Ship.js (Create)

1 this.airshipBackgroundSound = this.game.add.audio('airhsip_sound'); 2 this.airshipBackgroundSound.loopFull(); 3 this.swordSound = this.game.add.audio('sword_sound');

Ship.js (Update)

1 this.swordSound.play();

8.3.5.6 Video

In der Create-Funktion werden mit game.add.video(key: String) die Videos hinzugefügt.

Zusätzlich werden mit addToWorld(x: Number, y: Number) die Koordinaten des Videos auf dem

Canvas bestimmt. Die Cut Scenes im Webspiel sollen automatisch zum nächsten Game State wechseln, nachdem das Video fertig abgespielt wurde. Über onComplete.add(listener: Function) wird

erkannt, wann ein Video fertig abgespielt ist, so dass danach die nächste Funktion ausgeführt werden

kann. Auf der Startseite wird das Video Intro solange in Dauerschleife abgespielt bis auf dem Spielen

Button geklickt wurde. Bei einem Video kann mit play(true) in der Create-Funktion eine Dauer-

schleife erzeugt werden.

8.3.5.7 Animation Der AnimationManager kann mit sprite.animation Sprite-Objekte animieren. Um eine neue

Animation hinzuzufügen, wird die Methode add(name: String, frames: Array[],

frameRate: Number, useNumericIndex: Boolean) verwendet. Im Beispiel Farm.js werden

die Gehbewegungen von der Spielfigur Damian definiert. Während Zeile 2 die Reihenfolge der Sprite-

Frames [4, 3, 2, 1, 0] für die Gehbewegung nach links festlegt, beschreibt Zeile 3 die Frame-Reihenfolge

[5, 6, 7, 8, 9] für die Gehbewegung nach rechts. Die frameRate mit dem Wert 8 definiert dabei die

Animationsgeschwindigkeit. Der letzte Paramter setzt den useNumericIndex auf true, um die

Frames numerisch aufrufen zu können.

Farm.js (Create)

1 this.player = this.game.add.sprite(700, 800, 'damian');

2 this.player.animations.add('left', [4, 3, 2, 1, 0], 8, true);

3 this.player.animations.add('right', [5, 6, 7, 8, 9], 8, true);

Implementierung 97

In der Update-Funktion werden schließlich die Bedingungen implementiert, die bestimmen, wann wel-

che Animationen (z. B. left) mit animations.play(name: String) abgespielt werden sollen.

Die Spielfigur soll demnach die Animation left abspielen, wenn die linke Pfeiltaste oder die A-Taste

gedrückt wird. Sobald der Spieler die Taste loslässt, wird die Methode animations.stop() ausge-

führt, die die Animation anhält. Damit die Spielfigur im Ruhezustand durch den richtigen Frame (Ge-

sicht nach links ausgerichtet) dargestellt wird, erhält sie die Zuweisung zum 4. Frame. Nach diesem Prinzip werden sowohl die Geh- als auch die Angriffbewegungen implementiert.

Farm.js (Update)

1 if (this.cursors.left.isDown || this.aKey.isDown) {

2 this.player.body.velocity.x = -350;

3 if (this.facing != 'left') {

4 this.player.animations.play('left');

5 this.facing = 'left';

6 }

7 }

8 if (this.facing != 'idle') {

9 this.player.animations.stop();

10 if (this.facing == 'left') { 11 this.player.frame = 4; 12 }

8.3.5.8 Tweens

Tween-Objekte werden mit game.add.tween(Object) erstellt. Ein Tween, welches einem

Objekt hinzugefügt wurde, kann Eigenschaften eines Objekts für einen bestimmten Zeitraum

ändern. Es können dabei auch mehrere Tweens auf dasselbe Objekt hinzugefügt werden. [23]

Damit können z. B. Sprites mit to(properties: Object [, duration: Number] [, ease: Function|String] [, autoStart: Boolean] [, delay: Number] [, repeat: Number]

[, yoyo: Boolean]) bewegt, skaliert oder andere Eigenschaften modifiziert werden. Wäh-

rend über ein Animations-Objekt die Frame-Reihenfolge eines Sprites definiert ist, beschreibt

ein Tween-Objekt z. B. die Zielposition eines Objekts oder die Dauer einer Animation. Mit

einem Tween kann sich ein Sprite-Objekt von seinem Startpunkt aus bis zu einer bestimmten

Position bewegen. Somit können Objekte automatisch bewegt und dabei Animationen abge-

spielt werden, ohne dass dabei die Interaktion eines Spielers über Maus oder Tastatur notwendig

ist. Auf diese Weise wurde der Sprite von Sir Lorcan, wie z. B. im Ship Test Library Back

Level, mit der X-Koordinate 0 als Startpunkt und X-Koordinate 1200 mit { x: 1200 } als

Endpunkt mit einer Dauer von 3 Sekunden (lorcanMoveSpeed = 3000) automatisch bewegt.

ShipTestLibraryBack.js (Create)

1 this.lorcan = this.game.add.sprite(0, 300, 'lorcan'); 2 this.lorcanMoveSpeed = 3000; 3 this.lorcanMovePosition = 1200;

ShipTestLibraryBack.js (Update)

1 if (this.lorcan.x === 0) { 2 this.game.add.tween(this.lorcan).to( { x: +this.lorcanMovePosition },

this.lorcanMoveSpeed, Phaser.Easing.Linear.None, true); 3 this.lorcan.animations.add('right', [6, 7, 8, 9], 8, true); 4 this.lorcan.animations.play('right');

98 Implementierung

5 } else if (this.lorcan.x === this.lorcanMovePosition) { 6 this.lorcan.animations.stop(); 7 this.lorcan.frame = 5; 8 }

Ein weiteres Beispiel sind die unterschiedlich großen, aufsteigenden, blauen Kreise im The End

State. Dabei handelt es sich um Image-Objekte (erstellt durch ein PNG Image), die durch

Tweens in unterschiedlichen Größen skaliert sowie in unterschiedlichen Geschwindigkeiten

und Verzögerungen aufsteigend bewegt werden.

TheEnd.js (Create)

1 this.delay = 0; 2 for (var i = 0; i < 40; i++) { 3 this.air = this.game.add.sprite(-100 + (this.game.world.randomX), 900,

'air'); 4 this.air.scale.set(this.game.rnd.realInRange(0.1, 0.6)); 5 this.speed = this.game.rnd.between(4000, 6000); 6 this.game.add.tween(this.air).to({ y: -256 }, this.speed,

Phaser.Easing.Sinusoidal.InOut, true, this.delay, 1000, false); 7 this.delay += 200; 8 }

8.3.6 Tilemaps Wie tilemap JSON-Dateien im Tiled Map Editor für die Level Karten erstellt werden, wurde bereits in

Kapitel 7.9 beschrieben. Im Folgenden wird am Beispiel Farm Level (Abb. 53) erklärt, wie tilemaps im Code eingebunden werden.

Zunächst werden eine tilemap (farm.json) mit load.tilemap sowie die tiles (tiles-ground.png

und tiles_ball.png) mit load.image, die in der tilemap verwendet werden, geladen.

Farm.js (Preload)

1 this.load.tilemap('map', 'image/tilemap/farm.json', null, Phaser.Tilemap.TILED_JSON);

2 this.load.image('tiles-ground', 'image/tilemap/tiles-ground.png'); 3 this.load.image('tiles_ball', 'image/tilemap/tiles_ball.png');

Ein Tilemap-Objekt wird mit game.add.tilemap(key: String) in der Create-Funktion erzeugt.

Anschließend werden die Bilder der tilesets diesem Objekt mit addTilesetImage(key: String)

hinzugefügt.

Farm.js (Create)

1 this.map = this.game.add.tilemap('map'); 2 this.map.addTilesetImage('tiles-ground'); 3 this.map.addTilesetImage('tiles_ball');

Tile Layer

Um einen TilemapLayer-Objekt für die tilemap erstellen zu können, wird in der Methode createLayer

(layer: String) der Layer-Name 'title-layer_ground' eingefügt, welcher mit dem Namen

aus der JSON-Datei in layers[].name.value identisch sein muss. In der Methode setCollision

Between(start: Number, stop: Number) werden für die Kollision die tile ID‘s gesetzt. Im

Implementierung 99

Beispiel Farm.js werden die Kollision in Zeile 5 zwischen 1 und 4 gesetzt, weil das tileset tiles-

ground genau aus 4 Kachelbilder mit 4 tile-IDs besteht.

Farm.js (Create)

4 this.layer = this.map.createLayer('tile-layer_ground'); 5 this.map.setCollisionBetween(1,4);

farm.json (in layers[ ])

1 "height":30, 2 "name":"tile-layer_ground", 3 "opacity":1, 4 "type":"tilelayer", 5 "visible":true, 6 "width":128, 7 "x":0, 8 "y":0

Der untere Code zeigt einen Array-Ausschnitt aus layers[].data.value, der aus den Zahlenwerten

0 bis 4 besteht. Dieses Array beschreibt die Position der Tile-ID’s 1 bis 4 innerhalb der tilemap. Die

Zahl 0 bedeutet, dass an dieser Stelle keine Kachel hinzugefügt wurde. Da in der Create-Funktion der

Kollisionsbereich zwischen 1 und 4 gesetzt wurde, werden Kollisionen für die tiles 1, 2, 3 und 4 aktiviert. Die Stellen mit der Zahl 0 besitzen dementsprechend keine Kollision.

farm.json (in layers[ ])

1 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 4, 4, 4, 4, 4, 4, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 3, 3, 3, 3, 3, 3, 3, 3, 1, 4, 4, 4, 4, 2, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 2, 3, 1, 2, 3, 3, 1, 4, 4, 4, 4, 4, 4, 4, 4, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],

Object Layer

Wie Tile-Objekte einer Object Layer Ebene geladen und dem Tilemap-Objekt hinzugefügt werden,

wurde bereits beschrieben. Mit game.add.group() wird zunächst eine leere Objekt-Gruppe erstellt,

die für die Sprites der Tile-Objekte benötigt wird, um sie darin zu gruppieren und auf sie zugreifen zu

können. Die Methode createFrom Objects(name: String, gid: Number|String, key:

String, [, frame: String], [, exists: Boolean], [, autoCull: Boolean], [,

group: Phaser.Group]) erzeugt einen Sprite für jedes Objekt. Dabei steht die Zahl 5 (gid) für die

ID des Tile-Objekts.

Farm.js (Create)

1 this.balls = this.game.add.group(); 2 this.balls.enableBody = true; 3 this.map.createFromObjects('object-layer_balls', 5, 'tiles_ball', 0, true,

false, this.balls);

100 Implementierung

8.3.7 Physic Engine: Arcade Physics Als Physic Engine wurde die Arcade Physics von Phaser mit den zwei Klassen Arcade (Kollision und Überlappung) und Body (Physik für Sprites) verwendet.

Um Arcade Physics in einem Game State verwenden zu können, muss diese Physic Engine in der Create-

Funktion mit game.pysics.startSystem(Phaser.Physics.ARCADE); hinzugefügt werden.

Damit Objekte auch physikalisch genutzt werden können, muss die Physik eines Objekts in der Create-

Funktion durch die Enable-Methode aktiviert werden. Folgendes Code-Beispiel zeigt, wie die Physik

der Spielfigur (this.player) hinzugefügt wird:

Farm.js (Create)

this.game.physics.enable(this.player, Phaser.Physics.ARCADE);

8.3.7.1 Kollision and Überlappung

Zum Erkennen einer Kollision wird mit der Methode physics.arcade.collide(object1: Phaser.Sprite | Phaser.Group | Phaser.TilemapLayer, object2: Phaser.Sprite

| Phaser.Group | Phaser.TilemapLayer,) geprüft, ob zwei Objekte miteinander kolli-

dieren. Damit die Spielfigur auf dem Tilemap Layer stehen und laufen kann, müssen das Sprite-

Objekt (this.player) und das Tilemap-Objekt (this.layer) in eine Collide-Methode hinzu-

gefügt werden. Die Kollision zwischen einer Objekt-Gruppe (this.balls) und einem Tile-

map-Objekt (this.layer) werden auch über diese Methode definiert.

Farm.js (Update)

1 this.game.physics.arcade.collide(this.player, this.layer); 2 this.game.physics.arcade.collide(this.balls, this.layer);

Durch das Erkennen von Überlappungen können Funktionen aufgerufen werden. Auf diese Weise kann z. B. der Spieler einen Dialog mit einem Charakter starten. Denn sobald die Spielfigur sich mit einem

Sprite-Objekt überlappt, kann eine Funktion (z. B. talkToTamo) ausgeführt werden, die beispielsweise

einen Dialog anzeigen oder eine Cut Scene starten kann. Objekte können sich dabei auch mit unsicht-

baren Objekten überlappen, die durch Funktionen Event auslösen können. Auf diese Weise kann z. B. mit einem unsichtbaren Objekt erkannt werden, wann die Spielfigur vor einer Tür oder einem Fenster

steht, um Funktionen aufzurufen, die Interaktionen ermöglichen können.

Farm.js (Update)

1 let overlapTamo = this.game.physics.arcade.overlap(this.player, this.tamo, talkToTamo, null, this);

8.3.7.2 Sprite Physik

Die Methoden der Klasse Body richten sich an ein einzelnes Sprite-Objekt, die Eigenschaften wie z. B.

die Geschwindigkeit, Beschleunigung oder Schwerkraft eines Sprites einstellen können. Beispielsweie kann ein Sprite-Objekt mit body.bounce.set(1) auf und ab hüpfen. Außerdem muss die Property

colliderWorldBounds: boolean auf true gesetzt werden, damit ein Sprite-Objekt sich nur inner-

halb der definierten Größe der Game World bewegen kann.

Farm.js (Create)

1 his.darconoThree.body.collideWorldBounds = true; 2 this.darconoThree.body.bounce.set(1);

Implementierung 101

8.4 Kampfsystem

8.4.1 Lebenspunkte In den Kampfszenen bekommen die Spielfiguren Damian, die Gegner Tumbras und der Endboss unter-schiedliche hohe Lebenspunkte. Dabei hat ein Sprite-Objekt die Properties health: Number mit

einem Lebenspunkt als Default Wert und maxHealth: Number mit 100 Lebenspunkten als Default

Wert. Die Anzahl der Lebenspunkte können mit der Methode setHealth(amount: Number) oder

über die Properties auf ein Sprite-Objekt gesetzt werden. So erhält der Spieler Damian 100 Lebens-

punkte, die durch die setHealth-Methode gesetzt werden. Ein Tumbra erhält über den Health-Property 30 Lebenspunkte. Wenn ein Objekt allerdings mehr Lebenspunkte haben soll als der maximale Default

Wert von 100 (maxHealth) zulässt, muss der maxHealth-Property sowie die setHealth-Methode mit

einem höheren Wert gesetzt werden. Auf diese Weise erhält der Endboss Lorcan 200 Lebenspunkte. Die Lebenspunkte des Spielers (Damian) und des Endbosses werden zudem zur Kontrolle angezeigt und

durch die Update-Funktion aktualisiert.

ShipEnimies.js (Create)

1 this.player.setHealth(100); 2 this.tumbraOne.health = 30;

ShipShadowEmpireFinalFight.js (Create)

1 this.lorcan.maxHealth = 200; 2 this.lorcan.setHealth(200);

Wenn ein Sprite-Objekt keine Lebenspunkte mehr hat, wird mit dem Event onKilled: Phaser.

Signal eine Funktion aufgerufen. Beispielsweise startet die Funktion playerDied() den Game Over

State.

ShipEnimies.js (Create)

3 this.player.events.onKilled.add(playerDied, this); 4 function playerDied() { 5 this.enimiesBackgroundSound.destroy(); 6 this.game.lastState = 'ShipEnimies'; 7 this.state.start('GameOver'); 8 }

8.4.2 Angriff

8.4.2.1 Bullets und Explosion erzeugen

Um Bullets sowie eine Explosion erzeugen zu können, müssen zunächst die benötigten PNG Bilder in der Preload-Methode geladen werden. Dann werden die Bullets in der Create-Methode als Objekt-

Gruppe mit group() sowie createMultiple(30, 'bullet', 0, false) erstellt, die maximal

30 Bullets gleichzeitig erzeugen können. Diese Limitierung wird benötigt, damit nicht unendlich viele

Bullets erzeugt werden können, die das Spiel evtl. verlangsamen. Über die Methode forEach(setup

Invader, this) wird für jedes Bullet aus der Objekt-Gruppe die Funktion setupInvader()

aufgerufen, welche eine Sprite-Animation der Explosion abspielt. Die Explosion wird dabei am Treffer-punkt positioniert. Um erkennen zu können, an welcher Position ein Bullet ein Zielobjekt trifft, muss,

wie bereits in Kapitel 8.3.7.1 beschrieben wurde, über die Arcade Physics die Overlap-Methode definiert

werden. Dasselbe gilt für jede Objekt Überlappung. Egal ob Bullet gegen Bullet oder Waffen gegen Gegner, alle Objekte müssen in der Overlap-Methode definiert werden, um Funktionen aufrufen zu

können.

102 Implementierung

8.4.2.2 Bullets abfeuern

Das Abfeuern eines Bullets wird in der Update-Funktion implementiert. Wenn der Spieler als Magier

die linke Maustaste oder die STRG-Taste drückt, wird ein Bullet erzeugt, dessen Startposition über die Reset-Methode definiert wird. Der Bullet wird mit der Methode moveToPointer(displayObject:

Any, speed: Number, pointer: Phaser.Pointer, maxTime: Number) mit einer konstanten

Geschwindigkeit zum Zielpunkt bewegt. Zudem wird beim Abfeuern ein Sound-Effekt und eine Ani-

mation für die Angriffbewegung abgespielt. Sobald ein Zielobjekt getroffen wurde, wird jeder Bullet durch die Methode kill() entfernt sowie durch die Methode damage(amount: Number) jedesmal

ein Lebenspunkt vom Gegner abgezogen.

ShipEnimies.js (Update)

1 if (this.game.input.activePointer.isDown || this.strgKey.isDown) { 2 if (this.game.mage === true) { 3 var bullet = this.bullets.getFirstExists(false); 4 if (bullet) { 5 bullet.reset(this.player.x+350, this.player.y+300); 6 bullet.rotation = this.game.physics.arcade.moveToPointer(bullet, 1000,

this.game.input.activePointer, 1000); 7 this.shootSound.play(); 8 if (this.facing == 'idleRight') { 9 this.player.animations.play('shootRight'); 10 this.facing == "idleRight"; 11 } else if (this.facing == 'idleLeft') { 12 this.player.animations.play('shootLeft'); 13 this.facing == "idleLeft"; 14 } 15 }

8.4.2.3 Schwert schwingen

Das Schwingen des Schwertes wird ebenfalls in der Update-Funktion implementiert. Wenn der Spieler

als Schwertkämpfer die linke Maustaste oder die STRG-Taste drückt, wird ein Sound-Effekt und eine Animation für die Angriffbewegung abgespielt. Wie bereits im letzten Kapitel beschrieben wurde, wird

auch hier jedesmal bei einem Treffer ein Lebenspunkt des Zielobjekts abgezogen.


16 } else if (this.game.knight === true) { 17 this.swordSound.play(); 18 if (this.facing == 'idleRight' || this.facing == 'right') { 19 this.player.animations.play('slashRight'); 20 this.facing == "idleRight"; 21 } else if (this.facing == 'idleLeft' || this.facing == 'left') { 22 this.player.animations.play('slashLeft'); 23 this.facing == "idleLeft"; 24 } 25 }

8.4.2.4 Tumbras

Bei den Tumbras handelt es sich um Gegner, die alle 200 ms einen Schadenspunkt machen, wenn sie den Spieler berühren.


1 function tumbraAttacksPlayer(player, tumbra) { 2 if (this.game.time.now > this.tumbraAttackTimer) { 3 tumbra.damage(1);

Implementierung 103

4 this.tumbraAttackTimer = this.game.time.now + 200; 5 } 6 }

8.4.2.5 Endboss

Der Endboss greift mit grünen Bullets an und kann maximal 30 Bullets gleichzeitig erzeugen. Sobald

der Spieler von einem Bullet getroffen wird, hat er einen Lebenspunkt weniger.

ShipShadowEmpireFinalFight.js (Update)

1 function hitPlayerWithBullets(player, bullet) { 2 if (!knightAttacks || this.game.mage === true) { 3 player.damage(1); 4 this.playerHitPointsText.setText('Lebenspunkte Damian: ' + player.health,

true); 5 } 6 var explosion = this.explosions.getFirstExists(false); 7 if (explosion) { 8 explosion.reset(bullet.body.x, bullet.body.y); 9 explosion.play('explode', 30, false, true); 10 } 11 this.explosionSound.play("", 0, 5, false, true); 12 bullet.kill(); 13 }

Solange der Endboss am Leben ist, erzeugt er weitere neue Bullets, die durch die Random-Methode in unterschiedliche Richtungen abgefeuert werden.

ShipShadowEmpireFinalFight.js (Update)

14 if (this.lorcan.alive) { 15 var bossBullets = this.bossBullets.getFirstExists(false); 16 if (bossBullets) { 17 bossBullets.reset(this.lorcan.x+350, this.lorcan.y+300); 18 let x = Math.round(Math.random()) * 1920; 19 let y = Math.random() * 900; 20 bossBullets.rotation = this.game.physics.arcade.moveToXY(bossBullets, x,

y, 400); 21 }

104 Implementierung

8.5 Performance Optimierung Die Perfomance der Webanwendung wurde für dieses Projekt mit PNGGauntlet und Gulp.js optimiert.

8.5.1 PNGGauntlet PNGGauntlet wurde zur Optimierung von allen PNG Bildern verwendet. Diese Software verkleinert die

Größe von PNG Dateien, während die Bildqualität nicht verloren geht. [25] Zum Beispiel konnte mit PNGGauntlet das Hintergrundbild Farm After Visit Level (Ordnerpfad: static → assets → image → background → house_farm_airship_3840x900px.png) von 1,40 MB auf 932 KB komprimiert werden.

8.5.2 Minifizierung und Konkatenation Für die Performance ist es sinnvoll, das JavaScript optimiert auszugeben. Wenn die Göße des Codes reduziert ist, müssen weniger Daten übertragen werden, so dass eine Website schneller geladen werden

kann. Die Minifizierung stellt eine Code-Komprimierung dar, die alle JavaScript Dateien optimiert. Dabei werden alle unnötigen Inhalte entfernt, wie z. B. Leerzeichen, Kommentare oder Zeilenumbrüche,

ohne dabei die Funktionalitäten zu ändern. [27] Bei der Konkatenation werden alle minifizierten Java-

Script Dateien zu einer JavaScript Datei zusammenfügt. [29] Es gibt mehrere Tools, die eine Minifizie-rung und Konkatentation unterstützen. Für dieses Projekt wurde das Build-Tool Gulp.js [26] benutzt.

Wie ein minifizierter JavaScript Code strukturiert wird, ist im unteren Code-Ausschnitt zu sehen:

game.mini.js (dist → game.mini.js)

"image/background/airship_shadow_empire_cell_1920x900px.png")}},{key:"create",valu

e:function(){this.scale.scaleMode=Phaser.ScaleManager.SHOW_ALL,this.scale.fullScre

enScaleMode=Phaser.ScaleManager.SHOW_ALL,this.facing="right",this.jumpTimer=0;var

e,t,i,a,s=this.game.textBox;this.shadowEmpireBackgroundSound=this.game.add.audio("

shadow_empire_sound"),this.shadowEmpireBackgroundSound.loopFull(),this.shootSound=

8.6 Webserver

8.6.1 Lokaler Webserver Das Webspiel wurde auf einem lokalen Webserver entwickelt. Durch die Eingabe von npm start

erstellt das Built-Tool Gulp.js automatisch einen lokalen Webserver, welcher ebenfalls automatisch ge-

startet wird. Dieser lokale Webserver hat zudem einen Live-Reload, so dass die Webanwendung auto-matisch neu geladen wird, sobald der Code gespeichert wird.

8.6.2 Live Webserver Durch die Eingabe von npm run dist führt das Build-Tool Gulp.js automatisch Aufgaben, wie z. B.

Code-Analye (Lint), Konkatenation oder Minifizierung, aus. Diese Aufgaben werden in der Konfi-

gurationsdatei dist.js definiert, die durch den Generator Generator-Phaser-Plus erstellt wurden. Die

Software JSLint führt eine statische Code-Analyse durch, um den JavaScript Code für die Code-Qualität

auf Fehler zu überprüfen. Dabei werden alle Fehler im Terminal aufgelistet, die bei der Code-Analyse gefunden wurden. Erst nachdem alle Fehler behoben wurden, kann der Built-Prozess (npm run dist)

abgeschlossen werden. Gulp.js erstellt zudem einen dist-Ordner, in welchen alle Dateien kopiert werden, die für den live Webserver benötigt werden. Darin befinden sich auch alle optimierten Dateien. Um das

Webspiel online aufrufen zu können, müssen als letzter Schritt noch alle lokalen Dateien aus dem dist-

Ordner mit einem FTP-Client, zum live Webserver hochgeladen werden. Dieses Projekt wurde mit dem Open Source FTP-Client WinSCP [28] online gestellt.

Zusammenfassung 105

9 Zusammenfassung

9.1 Fazit Storytelling: Bedeutung, Ursprung, neurowissenschafliche und psychologische Wirkung

Der Begriff Storytelling wird als Synonym für Geschichtenerzählen verwendet. Dabei ist Storytelling

keine neue Erfindung, sondern wird nur bewusster als Erzähl-Methode für verschiedene Einatzgebiete, wie Marketing, Journalismus oder in den Unterhaltungsmedien, eingesetzt, um Menschen besser errei-

chen und ihre Aufmerksamkeit wecken zu können. Dass Storytelling schon immer ein Begleiter der Menschheitsgeschichte war, bestätigen auch die historischen Untersuchungen von Erzählkonzepten in

der Mythologie und Antike. Die Mythologie als Erzählkonzept war weltweit sehr erfolgreich, weshalb

sie stets weitererzählt wurden. In der Antike war der Wahrheitsanspruch jedoch so hoch, dass die Erzähl-form des Mythos durch die Rede des Logos abgegrenzt wurde. In der Antike wurde sich somit mit dem

Aufbau einer guten und glaubwürdigen Rede befasst. Die Storytelling-Methode basiert demnach auf

alten mythologischen und antiken Erzählkonzepten. Storytelling begegnet uns auch im Alltag, da wir uns stets Geschichten erzählen und wir uns durch Geschichten definieren, so dass wir eigentlich alle

Storyteller sind. Die Frage, wie Geschichten auf uns wirken, konnte in den psychologischen und neuro-wissenschaftlichen Untersuchgen beantwortert werden. Unser Gehirn kann Geschichten besser verar-

beiten, da sie als autoassoziate Muster gespeichert und aufgerufen werden. Auch Emotionen werden

durch Geschichten hervorgerufen, die als Erfahrungen gespeichert werden. Aus diesen Gründen können wir uns an Geschichten besser erinnern als an Daten und Fakten. Geschichten sollen einerseits Emo-

tionen wecken und andererseits durch eine verständlichere Vermittlung von komplexen Sachverhalten als Lerneffekt dienen. Die psychologischen Untersuchungen ergaben zudem, dass wir Geschichten auch

als mentale Simulationsräume erfahren können, wenn wir uns mit dem Helden der Story identifizieren

können, welcher für uns stellvertretend neue Erfahrungen durchlebt. Geschichten werden somit psycho-logisch als Erfahrungsabgleich, Stellvertreterlernen und Kontextualisierung wahrgenommen.

Visual Storytelling und Interaktivität in digitale Medien

Visuelle Mittel rufen Emotionen hervor und können somit die Merkfähigkeit von Inhalten fördern.

Visual Storytelling nutzt visuelle Mittel, wie Bilder oder Videos, um Geschichten zu erzählen oder zu

ergänzen. Dabei ist die Multimedia-Reportage (auch Scrollytelling genannt) eine Variante des Visual Storytellings in den digitalen Medien, die Geschichten mit Bilder, Töne und Videos multimedial ver-

mittelt. In den digitalen Medien dominiert nicht nur die Erzählform des Visual Storytellings, sondern

auch insbesondere die Interaktivität. Dabei geht es einerseits um das technische Interagieren mit einer Benutzeroberfläche und andererseits um die soziale Kommunikation zwischen zwei Nutzern.

Erfolgsrezept für neue Geschichten

Ausgehend von der Frage, was das Geheimnis neuer Geschichten ist, ergab die Untersuchung im dritten

Kapitel, dass der Schlüssel neuer Geschichten im neuen Interpretieren von alten Mustern und Vorlagen

liegt. Deshalb gibt es kaum neue Erzählungen, sondern nur Varianten mit gemeinsamen Mustern und universellen Themen. Die Orientierung an diversen Kreativmethoden und Dramaturgiemodelle können

daher als Erfolgsrezept für neue und gute Geschichten dienen, die durchaus verwendet und indiviuell angepasst werden können. Durch die Kenntnis dieser Methoden können gezielt Dynamik, Spannungs-

bögen und Aufmerksamkeit erzeugt werden, um den Rezipienten emotional berühren und fesseln zu

können. Die ausgewählten Methoden und Dramaturgiemodelle dieser Arbeit untersuchten Osbornes Checkliste als Kreativtechnik, den Plot zur Themenwahl, Jungs Archetypen zur Charaktererschaffung

sowie Aristoteles Drei Akte, Campbells Der Heros in tausend Gestalten und Voglers Die Heldenreise

106 Zusammenfassung

als Grundgerüst und Aufbau einer Geschichte. Osbornes Checkliste bietet eine kreative Technik an, um

über eine vorhandene Geschichte durch das Bilden neuer Assoziationsketten eine neue Geschichte

erschaffen zu können. Beim Plot handelt es sich um die Wahl eines Urthemas oder Konflikts. Denn eine gute Geschichte basiert immer auf einem Problem, welches zu bewältigen ist, um ein Ziel zu erreichen.

Die Wahl eines Urthemas ist deshalb so wichtig, weil wir uns mit universelle Themen mehr identifizie-ren können. Aristoteles beschäftigte sich in der Antike mit der Dramaturgie. Campbell erforschte 1949

die Mythen und baut dabei auf Aristoteles Dramentheorie sowie Jungs Archetypen auf. Voglers Helden-

reise (1949) baut ebenfalls auf Jungs Archetypen und Campbells Mythenforschung auf. Insofern haben alle drei Dramaturgiemodelle eine Verbindung, da sie aufeinander aufbauen. Voglers Heldenreise bildet

somit ein Grundlagenhandbuch für Storyteller.

Games: Erzählstrukturen, Gamestory und Storywelten

Computerspiele sind sehr beliebt, weil sie unser Belohnungssystem anregen und uns deshalb motivieren

können. Games müssen allerdings nicht nur durch das Gameplay dominieren, sie können auch auf interaktiven Gamestorys aufbauen. Dadurch wirken Games wie ein interaktiver Film. Narrative Mittel

werden in Games durch Cut Scenes oder Informationsverteilung bzw. In-Game-Artefakte eingesetzt, um

die Gamestory fortführen zu können. Es gibt statische und dynamische Erzählstrukturen, um ein Grundgerüst für eine interaktive Story bauen zu können. In dieser Arbeit wurden als Erzählstrukturen

das »Perlenkettenmodell«, die »Sequenzielle Struktur mit Seitenwegen«, die »Verzweigung mit Pflicht-pfaden«, das »Flaschenhalsprinzip« und der »Geschichtenautomat« untersucht. Die Untersuchung des

Flow-Zustands hat gezeigt, dass dieser zusammenfassend durch klare Ziele, Herausforderungen, Ent-

scheidungsfreiheit und Feedback erreicht werden kann. Storywelten in Games sind fiktive Welten, die Geschichten erzählen. Beim Erschaffen einer Storywelt werden mehr Details über die Welt konzipiert

als in einer Geschichte am Ende sichtbar ist. Dennoch wirken Geschichten, die durch ein Weltenkonzept entstanden sind, viel authentischer und stimmiger für den Rezipienten. Um eine Storywelt erschaffen zu

können, gibt es eine Methode, in welcher die sechs Grundelemente Konzept, Setting, Genre, Bewohner,

Regeln und Konflikt einer Storywelt definiert werden sollen.

Storytelling als Methode für interaktive Gamestorys

Auf die Frage, ob Storytelling als Methode für interaktive Gamestorys angewendet werden kann, wur-den im praktischen Teil dieser Arbeit für die Konzeption der Story Methoden aus dem theoretischen

Teil experimentell angewendet. Dabei wurde für den Plot ein Urthema gewählt, für die Storyentwick-

lung Osbornes Checkliste in Kombination mit Voglers Heldenreise angewendet, die Charaktere nach den Archetypen erschaffen und die Hauptelemente der Storywelt definiert. Darauf aufbauend wurde die

konzipierte Geschichte dem Gameplay angepasst sowie eine interaktive Erzählstruktur erstellt. Für die

interaktive Erzählstruktur musste die Story zudem inhaltlich erweitert werden, um neue Erzählszenarien für die Entscheidungswege erschaffen zu können. Während der Entwicklung beeinflussten außerdem

noch die technischen und designtechnischen Möglichkeiten sowie der Zeitdruck die Gamestory, so dass die Geschichte stets optimiert und angepasst wurde.

Am Anfang dieser Bachelorarbeit hatte ich noch keine Idee für eine Geschichte und ich wusste auch

nicht, wie ich dafür vorgehen sollte. Im theoretischen Teil dieser Arbeit suchte ich quasi den Weg zu einer erfolgreichen Geschichte. Dabei war ich stets im Ungewissen, ob mich die untersuchten Methoden

zu einer guten Geschichte führen würden. Nach diesem Experiment stellte sich heraus, dass die ange-

wandten Storytelling-Methoden zur Orientierung sehr hilfreich waren. Die konzipierte Geschichte nach Voglers Heldenreise und Osbornes Checkliste lies sich anschließend in das Gameplay und die interakti-

ven Erzählstrukturen problemlos einbauen. Auch die Implementierung mit dem Framework Phaser war

für den schnellen Einstieg als Anfänger in der Gameentwicklung sehr hilfreich. Deshalb ist das Ergebnis

Zusammenfassung 107

dieser Arbeit, dass es durchaus hilfreiche Erfolgsrezepte für gute Geschichten gibt und dass Storytelling

als Methode für interaktive Gamestorys angewendet werden kann.

9.2 Ausblick Alle drei Akte des interaktiven Storytelling-Webspiels, die im Rahmen dieser Bachelorarbeit konzipiert

wurden, konnten in Zeit erfolgreich umgesetzt und somit abgeschlossen werden. In diesem Kapitel wer-den die nächsten Schritte für dieses Webspiel vorgestellt. Dabei handelt es sich einerseits um technologi-

sche sowie designtechnische Verbesserungen und andererseits um mögliche Weiterentwicklungen.

Verbesserungen

Design: Der Charakter Tamo Black, welcher aus Zeitgründen minimalistisch als Schatten dargestellt

wurde, kann detailreicher gezeichnet werden. Ebenso können die Character-Sprites um Hüpf-, Verlet-zungs- und Sterbebewegungen (jump, hurt, die) erweitert werden, um die Animationen besser bzw.

realistischer darstellen zu können, wenn ein Charakter hüpft, verletzt wird oder stirbt.

Implementierung: Der nächste Schritt bei der Implementierung wären weitere Code-Refactoring Maß-

nahmen, um den Code und die Struktur für die Lesbarkeit, Wartbarkeit oder Erweiterbarkeit zu verbes-sern. Beispielsweise können Duplicate Code, also doppelt verwendete Code-Blöcke, über Klassen aus-

gelagert oder Magic Numbers durch Konstanten ersetzt werden, so dass der Code kürzer und lesbarer wird. Desweiteren kann die selbstgeschriebene Lösung für die Erzeugung und das Verhalten der Bullets

durch die Klasse Weapon der Physic Engine Arcade Physics ersetzt werden, die das Programmieren der

Bullets vereinfachen würden. Um den Code stets zu testen, können Unit Tests für die Prüfung von Funk-tionalitäten geschrieben werden. Für die Performance Optimierung kann der Code in der Update-Funk-

tion verbessert werden. Diesbezüglich kann ebenfalls das Thema Caching berücksichtigt werden, um unnötige Datenübertragungen von Ressourcen zu optimieren.

Mögliche Weiterentwicklungen

Um das Webspiel zu erweitern, können die noch nicht grafisch umgesetzten Charaktere der Story erstellt und in das Gameplay eingebaut werden. Desweiteren können neue interaktive Entscheidungsmöglich-

keiten eingebaut werden, wie z. B. das Auswählen des Geschlechts oder des Namens für den Hauptcha-

rakter. Dafür müsste noch ein weiblicher Charakter entworfen werden. Für die Eingabe eines eigenen Names wird eine Datenbank benötigt, um den Wunschnamen speichern und ausgeben zu können. Des-

weiteren kann das Speichern von Informationen in einer Datenbank für eine Statistik (z. B.: Wie viel Prozent der Spieler haben sich für die Rolle des Magiers entschieden?) genutzt werden, die am Ende

des Spiels für den Spieler angezeigt wird, um sich mit anderen Spielern vergleichen zu können. Als

neues Feature kann eine Speicherung des Spielstands, z. B. über Cookies oder Localstorage, implemen-tiert werden. Das Kampsystem kann um Heiltränke erweitert werden, um sich während dem Kampf

heilen zu können und somit könnte die Schwierigkeitsstufe des Kampfs auch erhöht werden. Um die Bedienbarkeit des Webspiels prüfen zu können, kann ein Usability Test erstellt und durchgeführt

werden. Zudem kann für das eingesetzte Framework ein Upgrade auf die nächste Version Phaser 3

durchgeführt werden, welches einerseits Tests des vorhandenen Codes beanspruchen würde, anderer-seits könnte das Webspiel dadurch um neue Funktionalitäten erweitert werden. Um die Zielgruppe

international erweitern zu können, kann im nächsten Schritt über eine Lokalisierung das Webspiel auf Englisch übersetzt werden, um sowohl eine deutsche als auch englische Version auf der Website

anbieten zu können. Desweiteren kann das Webspiel für eine Mobile-Anwendung optimimiert werden,

um eine mobile Zielgruppe erreichen zu können. Schließlich kann das Webspiel noch durch Werbung bzw. Marketing (z. B. Printmedien, Social-Media-Marketing oder Vorträge) bekannter gemacht werden.

108 Literaturverzeichnis

Literaturverzeichnis

[1] Fuchs, Werner T.: Crashkurs Storytelling. Grundlagen und Umsetzung. Freiburg 2017.

[2] Storytelling. Digital – Multimedial – Social. Formen und Praxis für PR, Marketing, TV,

Game und Social Media. Hrsg.: Pia Kleine Wieskamp. München 2016.

[3] Lampert, Marie und Wespe, Rolf: Storytelling für Journalisten. Wie baue ich eine gute

Geschichte? Konstanz und München 2017.

[4] Sturm, Simon: Digitales Storytelling: Eine Einführung in neue Formen des Qualitätsjournalismus. Wiesbaden 2013.

[5] Sammer, Petra: Storytelling. Die Zukunft von PR und Marketing. Köln 2014.

[6] Lochner, David: Storytelling in virtuellen Welten. 2014.

[7] Ihle, Jörg: Storywelten. In: Innovation in den Medien. Crossmedia – Storywelten –

Change Management. Hrsg.: Markus Kaiser. München 2015. S. 147 – 160.

[8] Vogler, Christopher: The Writer’s Journey: Mythic Structure for Writers. 2007.

[9] Campbell, Joseph und Koehne, Karl: Der Heros in tausend Gestalten. 2011.

[10] Grimms Märchen. Blaubart: Ein Märchen der Brüder Grimm.

URL: <https://www.grimmstories.com/de/grimm_maerchen/blaubart> (Stand:

24.01.2018).

[11] Eick, Dennis: Digitales Erzählen. Dramaturgie der Neuen Medien. Konstanz und München 2014.

[12] Melzener, Axel: Kurzfilm – Drehbücher schreiben. Die ersten Schritte zum ersten Film.

Ober-Ramstadt 2010.

[13] USK, Unterhaltungssoftware Selbstkontrolle: Alterskennzeichen: Die fünf Kennzeichen und was sie bedeuten.

URL: <http://www.usk.de/pruefverfahren/alterskennzeichen/> (Stand: 01.03.2018).

[14] Reinbott, Dag: TerraSound: GEMA-freie Produktionsmusik. GEMA-freie Musik kostenlos downloaden.

URL: <https://www.terrasound.de/> (Stand: 01.02.2018).

[15] SoundBible: Free Sound Effects.

URL: <https://www.terrasound.de/> (Stand: 01.02.2018).

[16] Photon Storm Ltd: Phaser. Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

URL: <http://phaser.io/> (Stand: 01.12.2017).

[17] Photon Storm Ltd: Phaser API Documentation. URL: <https://phaser.io/docs/2.6.2/> (Stand: 01.04.2018).

[18] Photon Storm Ltd: Phaser 2 Examples.

URL: <https://phaser.io/examples> (Stand: 01.04.2018).

Literaturverzeichnis 109

[19] Microsoft, Developer Network: 2D-Rendering mit Sprites und Text: Was ist ein Sprite?

In: Dokumentation. Microsoft API- und Referenzkatalog. MSDN Library.

Entwicklungstools und -sprachen. XNA Game Studio 4.0. Schreiben von Spielcode. Anzeigen von Grafik.

URL: <https://msdn.microsoft.com/> (Stand: 09.04.2018)

[20] Williams, Richard: The Animator’s Survival Kit. Expanded Edition. New York 2001.

[21] Tiled Map Editor. URL: <http://www.mapeditor.org/> (Stand: 01.02.2018)

[22] Photon Storm Ltd: Phaser CE API Documentation.

URL: <https://photonstorm.github.io/phaser-ce/> (Stand: 16.04.2018).

[23] Photon Storm Ltd: README. Phaser CE (Community Edition). URL: <https://github.com/photonstorm/phaser-ce/blob/master/README.md> (Stand:

16.04.2018).

[24] Photon Storm Ltd.

URL: <http://www.photonstorm.com/> (Stand: 16.04.2018).

[25] Hollis, Benjamin: PNGGauntlet. URL: <https://pnggauntlet.com/> (Stand: 18.04.2018).

[26] Gulp.js.

URL: <https://gulpjs.com/> (Stand: 18.04.2018).

[27] WebPlatform.org: Code minification. In: Docs. Concepts. Programming. JavaScript. 2016.

URL: <https://webplatform.github.io/> (Stand: 18.04.2018).

[28] WinSCP. URL: <https://winscp.net/> (Stand: 18.04.2018).

[29] Wagner, Michael: Moderne JavaScript-Applikationen – ein Überblick: Build-System. In:

entwickler.de. 2013.

URL: <https://entwickler.de> (Stand: 18.04.2018).

[30] Branch, John: Snow Fall: The Avalanche at Tunnel Creek. In: The New York Times.

2012.

URL: <http://www.nytimes.com/projects/2012/snow-fall/> (Stand: 10.11.2017).

[31] National Film Board of Canada (NFB): Bear 71. 2012. URL: <http://bear71.nfb.ca/#/bear71/> (Stand: 10.11.2017).

[32] Graphicnovel Hybrid 4 Peugeot.

URL: <http://graphicnovel-hybrid4.peugeot.com/start.html> (Stand: 10.11.2017).

[33] Fluger Design. URL: <http://www.fluger.com/> (Stand: 10.11.2017).

[34] Le, Lam: The Boat. In: SBS.

URL: <http://www.sbs.com.au/theboat/> (Stand: 10.11.2017).

http://www.nytimes.com/projects/2012/snow-fall/

http://bear71.nfb.ca/#/bear71

http://graphicnovel-hybrid4.peugeot.com/start.html

http://www.fluger.com/

http://www.sbs.com.au/theboat/

110 Abbildungsverzeichnis

Abbildungsverzeichnis

Abbildung 1: Perlenkettenmodell ...................................................................................................... 22

Abbildung 2: Sequenzielle Struktur mit Seitenwegen ........................................................................ 22

Abbildung 3: Verzweigung mit Pflichtpfaden .................................................................................... 23 Abbildung 4: Flaschenhalsprinzip ..................................................................................................... 23

Abbildung 5: Geschichtenautomat..................................................................................................... 23

Abbildung 6: Meilensteine ................................................................................................................ 26 Abbildung 7: Webinterface Game "Black Air Knights", Use Case Diagram...................................... 28

Abbildung 8: Webinterface Game "Black Air Knights", Seitenstruktur ............................................. 28 Abbildung 9: Mockup Game "Black Air Knights", index.html........................................................... 29

Abbildung 10: Mockup Game "Black Air Knights", index.html, show control .................................. 29

Abbildung 11: Mockup Game "Black Air Knights", index.html, view home, warning ...................... 29 Abbildung 12: Mockup Game "Black Air Knights", impressum.html ................................................ 30

Abbildung 13: Characters and Relationships Map ............................................................................. 38 Abbildung 14: SOLL-Zustand: Konzeption der interativen Erzählstruktur ......................................... 39

Abbildung 15: IST-Zustand: Konzeption der interativen Erzählstruktur ............................................. 46

Abbildung 16: Play Button ................................................................................................................ 50 Abbildung 17: Next Button ............................................................................................................... 50

Abbildung 18: Back Button ............................................................................................................... 50 Abbildung 19: Sketch, Sprite Shape Template (Idle And Walk)......................................................... 51

Abbildung 20: Sprite Shape Template (Idle And Walk) ..................................................................... 51

Abbildung 21: Sketch, Character Design, Damian Black ................................................................... 52 Abbildung 22: Character Design, Damian Black, Body Parts............................................................. 52

Abbildung 23: Character Design, Damian Black, Idle And Walk ....................................................... 53

Abbildung 24: Character Design, Damian Black, Amulet, Idle And Walk ......................................... 53 Abbildung 25: Sketch, Character Design, Sword Attack .................................................................... 54

Abbildung 26: Character Design, Damian Black, Sword Idle, Attack And Walk ................................ 54 Abbildung 27: Character Design, Damian Black, Magic Idle, Attack And Walk ................................ 55

Abbildung 28: Character Design, Tamo Black, Einzelbild Sprite ..................................................... 56

Abbildung 29: Character Design, Darconos, Design Entwicklung ..................................................... 56 Abbildung 30: Character Design, Sir Lorcan, Body Parts .................................................................. 57

Abbildung 31: Character Design, Sir Lorcan, Idle And Walk............................................................. 57 Abbildung 32: Character Design, Sir Lorcan, Red Eyes, Idle And Walk ............................................ 58

Abbildung 33: Character Design, Sir Lorcan, Schattengeist ............................................................... 58

Abbildung 34: Sketch, Character Design, Tumbras ........................................................................... 59 Abbildung 35: Character Design, Tumbras, Version 1 und 2 ............................................................. 59

Abbildung 36: Character Design, Sir Kian ........................................................................................ 60 Abbildung 37: Purple Bullet.............................................................................................................. 60

Abbildung 38: Green Bullet .............................................................................................................. 60

Abbildung 39: Explode ..................................................................................................................... 61 Abbildung 40: Items: Rucksack, Truhe, Marker, blauer und gelber leuchtender Kreis ........................ 61

Abbildung 41: Sketch, Weapon Design, Magic Weapon .................................................................... 61

Abbildung 42: Weapon Design, Magic Weapon ................................................................................ 61 Abbildung 43: Weapon Design, Sword ............................................................................................. 61

Abbildung 44: Weapon Design, Golden Sword ................................................................................. 62 Abbildung 45: Weapon Design, Golden Book ................................................................................... 62

Abbildung 46: Dialogbilder von Damian Black, Tamo Black, Sir Lorcan und Sir Kian ...................... 62

Abbildungsverzeichnis 111

Abbildung 47: Sketch, Airships ......................................................................................................... 63

Abbildung 48: Delphine des Luftschiffs ............................................................................................ 63

Abbildung 49: Luftschiff der Black Air Knights mit geschlossener und geöffneter Tür ...................... 63 Abbildung 50: Sketch, Storyboard, Act 1 .......................................................................................... 64

Abbildung 51: Farm Background Image, Version 1 .......................................................................... 65 Abbildung 52: Farm Background Image, Version 2 ........................................................................... 65

Abbildung 53: Farm Level, Example Scenario .................................................................................. 65

Abbildung 54: Farm After Visit Level, Example Scenario ................................................................. 65 Abbildung 55: Room Level, Example Scenario ................................................................................. 66

Abbildung 56: Farm Escape Way Level, Example Scenario 1 ........................................................... 66 Abbildung 57: Farm Escape Way Level, Example Scenario 2 ........................................................... 66

Abbildung 58: Ship Level, Example Scenario ................................................................................... 66

Abbildung 59: Ship Level, Example Scenario (Knight) ..................................................................... 67 Abbildung 60: Ship Level, Example Scenario (Mage) ....................................................................... 67

Abbildung 61: Ship Enimies Level, Example Scenario (Knight) ........................................................ 67

Abbildung 62: Ship Test Armory Level, Example Scenario ............................................................... 67 Abbildung 63: Ship Test Library Level, Example Scenario ............................................................... 68

Abbildung 64: Ship Shadow Empire Armory Level, Example Scenario ............................................ 68 Abbildung 65: Ship Shadow Empire Library Level, Example Scenario.............................................. 68

Abbildung 66: Ship Test Armory Back Level, Example Scenario ...................................................... 69

Abbildung 67: ShipTest Library Back Level, Example Scenario ........................................................ 69 Abbildung 68: Ship Shadow Empire Cell Level, Example Scenario (Mage) ..................................... 69

Abbildung 69: Ship Shadow Empire Cell Escape Level, Example Scenario 1 (Mage) ....................... 70 Abbildung 70: Ship Shadow Empire Cell Escape Level, Example Scenario 2 (Mage) ....................... 70

Abbildung 71: Ship Shadow Empire Final Fight Level, Example Scenario (Mage) ........................... 70

Abbildung 72: Ship Reward Level, Example Scenario (Mage) .......................................................... 70 Abbildung 73: Farm Back Level, Example Scenario (Mage) ............................................................. 71

Abbildung 74: The End State ............................................................................................................ 71 Abbildung 75: Game Over State........................................................................................................ 71

Abbildung 76: Loading ..................................................................................................................... 71

Abbildung 77: Tiled Map Editor, New Tilemap 3840 x 900 px .......................................................... 72 Abbildung 78: Tile, tiles-ground.png ................................................................................................ 72

Abbildung 79: Tile, tiles_ball.png .................................................................................................... 72 Abbildung 80: Tiled Map Editor, Tilesets, tiles-ground ..................................................................... 72

Abbildung 81: Tile Map Editor, Layers, Farm Level, Detail ............................................................. 73

Abbildung 82: Tilemap, Farm Level, Tile And Object Layer ............................................................. 73 Abbildung 83: Tilemap, Farm Level, Detail ...................................................................................... 73

Abbildung 84: Tilemap, Farm Level, Detail, Final ............................................................................ 73

Abbildung 85: Black Air Knights: Intro: blackAirKnights_intro.mp4 ............................................... 74 Abbildung 86: Ordinary World: ordinary_world.mp4 ....................................................................... 74

Abbildung 87: Airship Arrival: airship_arrival.mp4 ......................................................................... 75 Abbildung 88: Airship Departure: airship_departure.mp4 ................................................................. 75

Abbildung 89: Tumbras: tumbras.mp4 .............................................................................................. 75

Abbildung 90: Enter Shadow Empire Armory: enter_shadow_empire_armory.mp4 ........................... 75 Abbildung 91: Enter Shadow Empire Library: enter_shadow_empire_library.mp4 ............................ 76

Abbildung 92: Leave Shadow Empire Armory: leave_shadow_empire_armory.mp4 ......................... 76 Abbildung 93: Leave Shadow Empire Library: leave_shadow_empire_library.mp4 .......................... 76

Abbildung 94: Lumitra: lumitra.mp4 ................................................................................................. 76

112 Abbildungsverzeichnis

Abbildung 95: Lorcans Transformation: lorcans_transformation.mp4 ................................................ 77

Abbildung 96: Road Back: road_back.mp4 ....................................................................................... 77

Abbildung 97: Github, Detail, Stand April 2018 ................................................................................ 80 Abbildung 98: Ausführung von Generator-Phaser-Plus v2.4.1 ........................................................... 81

Abbildung 99: Visual Studio Code, Phaser, File Structure, Stand April 2018 .................................. 82 Abbildung 100: State Diagram .......................................................................................................... 84

Abbildung 101: Game Logic, Game State, Level ............................................................................... 86

Abbildung 102: Game Logic, Game State, Cut Scene ........................................................................ 86 Abbildung 103: Dialogsystem, Klassendiagramm ............................................................................. 87

Abbildung 104: Dialogsystem im Textfeld: Text (Erzählertext), Beispiel: Farm Level ....................... 89 Abbildung 105: Dialogsystem im Textfeld: Dialog, Decision und Answer, Beispiel: Fram Escape Way

Level ................................................................................................................................................ 90

Abbildung 106: HTML und CANVAS Bereiche im Browserfenster .................................................. 91 Abbildung 107: HTML und CANVAS Bereiche im Browserfenster, Beispiel: Farm Escape Way Level

......................................................................................................................................................... 91

Tabellenverzeichnis 113

Tabellenverzeichnis

Tabelle 1: Voglers und Campbells Heldenreise im Vergleich ............................................................ 19

Tabelle 2: SOLL-Zustand: Storyentwicklung nach Osbornes Checkliste und Voglers Heldenreise ..... 36

Tabelle 3: SOLL-Zustand: Beschreibung der Gamestory und des Gameplays .................................... 41 Tabelle 4: IST-Zustand: Story und Hauptziel des Spielers ................................................................. 45

Tabelle 5: IST-Zustand: Beschreibung der Gamestory und des Gameplays ........................................ 48

Tabelle 6: Verwendete Musik mit Verwendungszweck...................................................................... 78 Tabelle 7: Verwendete Sound Effekte mit Verwendungszweck ......................................................... 79

114 Anhang

Anhang

interactive storytelling im web -...

Documents