powered by 
Mit BIF kannst du interaktive Geschichten schreiben, bei denen die Leserinnen und Leser selbst entscheiden, wie es weitergeht. Die einzelnen Abschnitte deiner Geschichte schreibst du als einfache Markdown-Dateien und verbindest sie miteinander. In diesem Tutorial entwickelst du Schritt für Schritt eine kleine Geschichte und lernst dabei die wichtigsten Bausteine von BIF kennen: Seiten, Entscheidungen, Verzweigungen, lokale Aktionen, Variablen und Bedingungen.
Stelle zuerst sicher, dass du keinen Ordner geöffnet hast. Um sicherzugehen, drücke den Shortcut für »Ordner schließen«: StrgK und dann F.
Für diese Anleitung brauchst du das BIF-Repository. Klicke auf den blauen Button »Clone Repository« und gib die folgende URL ein:
https://github.com/specht/bif.git
Bestätige anschließend mit Enter.
Als nächstes musst du angeben, in welches Verzeichnis das Repository geklont werden soll. Bestätige den Standardpfad
/workspace/
mit Enter.
Beantworte anschließend die Frage »Would you like to open the cloned repository?« mit »Open«.
Wenn alles geklappt hat, siehst du links im Explorer unter anderem den Ordner pages-starter sowie die Dateien config.js und index.html.
Öffne im Explorer den Ordner pages-starter und darin die Datei 1.md.
Dort steht bereits der Anfang unserer kleinen Geschichte:
# Nach Schulschluss
Du willst gerade gehen, da fällt dir ein: Deine Projektmappe liegt noch im Materialschrank.
Die Endung .md steht für Markdown. Markdown ist eine einfache Schreibweise für Texte und eignet sich gut für interaktive Geschichten.
Die Zeile
# Nach Schulschluss
ist der Titel der Geschichte. Ein einzelnes # steht in Markdown für die größte Überschrift. In einer BIF-Geschichte verwenden wir diese Überschrift für den Titel der gesamten Geschichte. Sie steht deshalb nur am Anfang von 1.md. Die weiteren Seiten brauchen normalerweise keine eigene Überschrift.
Falls du innerhalb einer Seite doch einmal eine Zwischenüberschrift brauchst, verwendest du dafür ##.
1.md hat bei BIF eine besondere Bedeutung: Jede Geschichte beginnt bei Seite 1.
Damit du deine Geschichte im Browser ausprobieren kannst, ist im Workspace bereits die Erweiterung Live Server installiert. Klicke rechts unten auf »Go Live«. Es öffnet sich ein neuer Tab mit deiner Geschichte:
BIF startet standardmäßig in der Entwicklungsansicht. Rechts siehst du die Geschichte, die momentan noch sehr kurz ist und noch keine Entscheidungsmöglichkeiten bietet. Mit dem Button rechts oben kannst du zwischen der Entwicklungsansicht und der Leseansicht hin- und herwechseln. Wenn du deine Geschichte später veröffentlichst, bekommen deine Leser:innen nur die Leseansicht zu sehen.
Unsere Geschichte soll nicht auf der ersten Seite stehen bleiben. Erstelle im Ordner pages-starter eine neue Datei, indem du auf das entsprechende Icon klickst. Nenne die Datei 2.md.
Schreibe hinein:
Du stehst in einem leeren Flur. Links ist ein kleines Büro. Daneben führt eine Tür ins Treppenhaus. Am Ende steht ein verschlossener Materialschrank.
Speichere die Datei, indem du StrgS drückst. Die Vorschau sollte nun so aussehen:
Damit besteht die Geschichte bereits aus zwei Seiten, allerdings gibt es noch keine Verbindung von der ersten zur zweiten Seite – dafür brauchen wir eine Entscheidung.
Öffne wieder 1.md und ergänze am Ende:
- [Gehe in den Flur.](2)
Die vollständige Datei sieht jetzt so aus:
# Nach Schulschluss Du willst gerade gehen, da fällt dir ein: Deine Projektmappe liegt noch im Materialschrank. - [Gehe in den Flur.](2)
Speichere die Datei und probiere die Geschichte im Browser aus:
Die Geschichte endet jetzt mit einer Entscheidungsmöglichkeit: wenn du in den Flur gehst, geht die Geschichte bei Seite 2 weiter. Links im Graphen siehst du immer, wo du dich gerade innerhalb der Geschichte befindest.
Die Zeile
- [Gehe in den Flur.](2)
besteht aus zwei wichtigen Teilen: in eckigen Klammern steht der Text, der angezeigt wird und in runden Klammern steht die Seitenzahl, mit der es bei dieser Entscheidung weitergehen soll.
Eine interaktive Geschichte wird interessanter, wenn nicht immer nur ein einziger Weg möglich ist.
Erstelle die Datei 3.md:
Im Büro sitzt Frau Neumann an einem Schreibtisch. Neben der Tür hängt ein kleiner Schlüssel an einem Haken. - [Gehe zurück in den Flur.](2)
Erstelle außerdem die Datei 4.md:
Im Treppenhaus ist es still. Auf dem Absatz liegt nur ein vergessener Turnbeutel. - [Gehe zurück in den Flur.](2)
Öffne jetzt 2.md und ergänze zwei Entscheidungen:
Du stehst in einem leeren Flur. Links ist ein kleines Büro. Daneben führt eine Tür ins Treppenhaus. Am Ende steht ein verschlossener Materialschrank. - [Sieh im Büro nach.](3) - [Gehe ins Treppenhaus.](4)
Speichere die Dateien und probiere beide Wege aus.
Die Geschichte verzweigt sich jetzt auf Seite 2. Beide Wege führen anschließend wieder zurück in den Flur.
Jetzt, nachdem unsere Geschichte mehrere Seiten und Verzweigungen hat, lohnt sich ein genauerer Blick auf den Graphen auf der linken Seite: Jede Seite wird als Knoten dargestellt. Die Pfeile zeigen, welche Entscheidungen von einer Seite zu einer anderen führen. Bei unserer Geschichte sieht man jetzt zum Beispiel:
So wird auch sichtbar, dass 1.md nur der Einstieg ist. Später kehren wir nicht mehr auf diese Seite zurück. Du siehst auch, auf welcher Seite du dich gerade in der Geschichte befindest und welchen Pfad du bisher zurückgelegt hast.
Nicht jede Entscheidung soll zu einer anderen Seite führen.
Vielleicht möchtest du mit einer Person sprechen, einen Gegenstand untersuchen oder eine Schublade öffnen. Dafür gibt es in BIF lokale Entscheidungen.
Öffne 3.md und ändere den Inhalt zu:
Im Büro sitzt Frau Neumann an einem Schreibtisch. Neben der Tür hängt ein kleiner Schlüssel an einem Haken. - [Frage nach dem Materialschrank.](.) > "Der ist abgeschlossen. Der kleine Schlüssel hängt hier neben der Tür." - [Gehe zurück in den Flur.](2)
Der wichtige Unterschied ist der Punkt: (.) – er bedeutet, dass die Geschichte auf dieser Seite bleiben soll. Der eingerückte Text darunter erscheint erst, nachdem die Entscheidung ausgewählt wurde.
Die vier Leerzeichen vor der Antwort sind wichtig. Durch die Einrückung erkennt BIF, dass der eingerückte Text zur Entscheidung direkt darüber gehört. Alles, was nach dieser lokalen Entscheidung passieren soll, wird deshalb entsprechend eingerückt.
Probiere die neue Entscheidung aus. Nachdem du Frau Neumann gefragt hast, gehört die Frage zusammen mit ihrer Antwort zum bisherigen Verlauf. Sie steht nicht mehr bei den noch offenen Entscheidungsmöglichkeiten und kann während dieses Besuchs nicht noch einmal ausgewählt werden. Die Entscheidung »Gehe zurück in den Flur« bleibt dagegen weiterhin verfügbar.
Lokale Entscheidungen eignen sich zum Beispiel für:
Bisher hängt der Verlauf nur davon ab, welche Seite gerade geöffnet wird. Eine Geschichte kann sich aber auch etwas merken. In unserem Beispiel soll gespeichert werden, ob du den Schlüssel aus dem Büro genommen hast.
Öffne 1.md und füge direkt unter dem Titel ein:
<script> has_key = false; </script>
Die Datei sieht jetzt so aus:
# Nach Schulschluss <script> has_key = false; </script> Du willst gerade gehen, da fällt dir ein: Deine Projektmappe liegt noch im Materialschrank. - [Gehe in den Flur.](2)
has_key ist eine Variable. Der Wert false bedeutet hier: Du hast den Schlüssel noch nicht. Wir setzen diesen Anfangswert in 1.md, weil diese Seite nur einmal am Anfang besucht wird.
Öffne anschließend 3.md und ergänze eine weitere lokale Entscheidung:
- [Nimm den Schlüssel.](.) <script> has_key = true; </script> Du nimmst den kleinen Schlüssel vom Haken.
Die vollständige Datei sieht jetzt so aus:
Im Büro sitzt Frau Neumann an einem Schreibtisch. Neben der Tür hängt ein kleiner Schlüssel an einem Haken. - [Frage nach dem Materialschrank.](.) > "Der ist abgeschlossen. Der kleine Schlüssel hängt hier neben der Tür." - [Nimm den Schlüssel.](.) <script> has_key = true; </script> Du nimmst den kleinen Schlüssel vom Haken. - [Gehe zurück in den Flur.](2)
Wenn du »Nimm den Schlüssel« auswählst, wird das Skript ausgeführt und has_key ändert sich von false zu true.
Öffne in der Entwicklungsansicht den Bereich State und beobachte den Wert beim Spielen.
Die Geschichte hat sich damit zum ersten Mal etwas gemerkt. Solange du im Büro bleibst, sieht auch alles richtig aus: »Nimm den Schlüssel« ist bereits erledigt und kann nicht noch einmal ausgewählt werden.
Jetzt lohnt sich aber ein kleiner Test:
Nun stimmt plötzlich einiges nicht mehr. Der Schlüssel hängt laut Beschreibung wieder neben der Tür, du kannst ihn noch einmal nehmen und Frau Neumann behauptet weiterhin, dass er dort hängt. Gleichzeitig zeigt State immer noch:
has_key: true
Das ist kein Fehler in der Variable. has_key hat sich korrekt gemerkt, dass du den Schlüssel besitzt.
Der Grund liegt bei den lokalen Entscheidungen: BIF merkt sich innerhalb eines Besuchs, welche lokalen Entscheidungen bereits ausgeführt wurden. Wenn du eine Seite verlässt und später erneut betrittst, wird die Seite neu aufgebaut. Die lokalen Entscheidungen stehen dann zunächst wieder zur Verfügung.
Ob etwas dauerhaft für den weiteren Verlauf der Geschichte passiert ist, speichern wir deshalb in Variablen. Jetzt müssen wir dafür sorgen, dass die Seite diesen gespeicherten Zustand auch berücksichtigt.
Dafür gibt es Bedingungen. Mit einer Bedingung können wir festlegen, dass Text oder eine Entscheidung nur in einem bestimmten Zustand der Geschichte erscheint.
Wir beheben zuerst das offensichtlichste Problem: Wenn du den Schlüssel schon besitzt, darf »Nimm den Schlüssel« bei einem späteren Besuch nicht noch einmal angeboten werden.
Ergänze die Entscheidung in 3.md:
- [Nimm den Schlüssel.](.){condition="!has_key"}
Das Besondere steht hinter der Entscheidung:
{condition="!has_key"}
condition bedeutet Bedingung. Das Ausrufezeichen vor has_key bedeutet nicht. Die Entscheidung erscheint also nur, wenn has_key nicht true ist – solange du den Schlüssel noch nicht hast.
Speichere die Datei und probiere den Weg noch einmal aus: Schlüssel nehmen, in den Flur gehen und anschließend wieder ins Büro. Diesmal wird »Nimm den Schlüssel« nicht erneut angeboten.
Damit ist aber erst ein Teil des Problems gelöst. Auch die Beschreibung des Büros behauptet noch, dass der Schlüssel am Haken hängt.
Ändere den Anfang von 3.md:
Im Büro sitzt Frau Neumann an einem Schreibtisch. <p condition="!has_key"> Neben der Tür hängt ein kleiner Schlüssel an einem Haken. </p> <p condition="has_key"> Der Haken neben der Tür ist leer. </p>
BIF zeigt nun abhängig vom Wert von has_key genau einen der beiden Absätze an.
Bedingungen können also nicht nur Entscheidungen, sondern auch normalen Text steuern. Dadurch kann sich derselbe Ort verändern, ohne dass wir dafür eine neue Seite anlegen müssen.
Es gibt noch einen Widerspruch: Wenn du das Büro mit dem Schlüssel erneut betrittst, sollte Frau Neumann nicht wieder sagen, dass er neben der Tür hängt. Auch das können wir mit Bedingungen lösen.
Die bisherige Frage soll nur erscheinen, solange du den Schlüssel noch nicht hast:
- [Frage nach dem Materialschrank.](.){condition="!has_key"} > "Der ist abgeschlossen. Der kleine Schlüssel hängt hier neben der Tür."
Sobald du den Schlüssel besitzt, bieten wir stattdessen eine passende Frage an:
- [Frage, ob der Schlüssel zum Materialschrank passt.](.){condition="has_key"} > "Ja, genau der ist für den Materialschrank."
3.md sieht damit vollständig so aus:
Im Büro sitzt Frau Neumann an einem Schreibtisch. <p condition="!has_key"> Neben der Tür hängt ein kleiner Schlüssel an einem Haken. </p> <p condition="has_key"> Der Haken neben der Tür ist leer. </p> - [Frage nach dem Materialschrank.](.){condition="!has_key"} > "Der ist abgeschlossen. Der kleine Schlüssel hängt hier neben der Tür." - [Nimm den Schlüssel.](.){condition="!has_key"} <script> has_key = true; </script> Du nimmst den kleinen Schlüssel vom Haken. - [Frage, ob der Schlüssel zum Materialschrank passt.](.){condition="has_key"} > "Ja, genau der ist für den Materialschrank." - [Gehe zurück in den Flur.](2)
Probiere das Büro jetzt noch einmal von Anfang an aus. Wenn du den Schlüssel nimmst, verändert sich die Seite sofort: Der Haken ist leer und die passenden Entscheidungen ändern sich. Wenn du das Büro verlässt und erneut betrittst, bleibt die Geschichte trotzdem logisch, weil has_key weiterhin true ist.
Jetzt soll der Schlüssel auch außerhalb des Büros eine Folge haben.
Erstelle die Datei 5.md:
Der Schlüssel passt.
Im Materialschrank liegt deine Projektmappe zwischen zwei Kartons. Du steckst sie ein. Jetzt kannst du endlich nach Hause.
**Ende.**
Öffne anschließend 2.md. Auch der Flur kann auf den gespeicherten Zustand reagieren. Ersetze den Inhalt durch:
Du stehst in einem leeren Flur. Links ist ein kleines Büro. Daneben führt eine Tür ins Treppenhaus. <p condition="!has_key"> Am Ende steht ein verschlossener Materialschrank. </p> <p condition="has_key"> Am Ende steht der Materialschrank. Du hast den passenden Schlüssel dabei. </p> - [Sieh im Büro nach.](3) - [Gehe ins Treppenhaus.](4) - [Öffne den Materialschrank.](5){condition="has_key"}
Die Entscheidung zum Öffnen des Materialschranks wird nur angezeigt, wenn has_key den Wert true hat.
Starte die Geschichte neu und probiere es aus:
Jetzt verändert sich die Beschreibung des Flurs und die neue Entscheidung erscheint.
Damit haben Variablen und Bedingungen unterschiedliche Aufgaben:
Öffne jetzt den Materialschrank:
Die Datei 5.md enthält keine weitere Entscheidung. Deshalb erkennt BIF diese Seite automatisch als mögliches Ende der Geschichte.
Am Ende erscheint der Button
Gedrückt halten, um erneut zu spielen
Er muss kurz gedrückt gehalten werden. So wird verhindert, dass der gesamte Spielstand versehentlich durch einen einfachen Klick gelöscht wird.
Beim Neustart beginnt die Geschichte wieder bei 1.md. Dadurch wird auch
has_key = false;
erneut ausgeführt und der Anfangszustand ist wieder hergestellt.
Beim Schreiben von Skripten kann leicht ein Tippfehler passieren. BIF überprüft deine Geschichte deshalb während des Schreibens und zeigt gefundene Probleme unten im Bereich Problems an.
Probiere das absichtlich aus. Öffne 3.md und ändere vorübergehend
<script> has_key = true; </script>
zu:
<script> has_key = ; </script>
Speichere die Datei.
BIF erkennt, dass das JavaScript nicht gültig ist. Im Bereich Problems siehst du, in welcher Datei und in welcher Zeile der Fehler gefunden wurde. Auch im Graphen wird die betroffene Seite als fehlerhaft markiert.
Korrigiere die Zeile anschließend wieder:
has_key = true;
Nach dem Speichern sollte der Fehler aus der Problems-Liste verschwinden.
BIF kann unter anderem auf folgende Probleme hinweisen:
Mit den Bausteinen aus der kleinen Geschichte kannst du bereits viele interaktive Geschichten schreiben. BIF kann darüber hinaus noch einiges mehr.
Das Aussehen deiner Geschichte stellst du ganz oben in 1.md ein. Dafür kannst du einen sogenannten Front-Matter-Block verwenden. Er steht noch vor dem Titel der Geschichte.
Am einfachsten wählst du ein fertiges Theme:
--- theme: mystery --- # Nach Schulschluss
BIF bringt mehrere Themes mit: default, paper, mystery, midnight, terminal und playful.
Ein Theme legt Farben und Schriften fest und verändert außerdem einige Details wie Abstände und abgerundete Ecken. Du kannst es deshalb einfach so verwenden, wie es ist.
Du kannst ein Theme aber auch verändern. Zum Beispiel:
--- theme: midnight accent: "#ff7a18" font_heading: Bungee ---
accent ist die Akzentfarbe für Links und interaktive Elemente. Mit font_heading änderst du nur die Schrift der Überschriften.
Du musst überhaupt kein Theme auswählen. Wenn du theme: weglässt, kannst du die Standarddarstellung selbst mit Farben und Schriften anpassen:
--- background: "#fff7fb" text: "#382d38" accent: "#9d3b77" font_body: Nunito font_heading: Fredoka ---
Die drei Grundfarben haben unterschiedliche Aufgaben:
background – Hintergrundtext – normaler Text und Überschriftenaccent – Links, Hervorhebungen und interaktive ElementeDie übrigen Farbtöne für Flächen, Rahmen und Schatten leitet BIF automatisch daraus ab. Du musst also nicht für jedes kleine Element eine eigene Farbe festlegen.
Mit
brightness: light
oder
brightness: dark
kannst du eine helle oder dunkle Darstellung erzwingen. brightness: system folgt stattdessen der Einstellung des Geräts.
Für font_body und font_heading kannst du den Namen einer Schrift von Google Fonts eintragen. Schreibe den Namen genau so, wie er dort steht. BIF lädt die benötigten Schriftdateien beim Entwickeln automatisch herunter und speichert sie lokal im Ordner bif-assets. Diesen Ordner solltest du deshalb nicht selbst für Bilder oder andere Dateien verwenden.
Für die normalen Texte kannst du die üblichen Markdown-Schreibweisen verwenden.
Fetter Text:
Auf dem Tisch liegt ein **kleiner Schlüssel**.
Kursiver Text:
Aus dem Nebenraum hörst du ein *leises Klopfen*.
Eine Zwischenüberschrift innerhalb einer Seite:
## Ein Hinweis
Denke daran: # verwenden wir für den Titel der gesamten Geschichte. Für Unterüberschriften innerhalb einer Seite beginnt die Hierarchie bei ##.
Bilder speicherst du am besten innerhalb deines Geschichtenordners, zum Beispiel:
pages-meine-geschichte/
├── 1.md
├── 2.md
└── images/
└── door.jpg
In Markdown kannst du das Bild so einfügen:
Der Text in den eckigen Klammern beschreibt das Bild und hilft zum Beispiel Menschen, die einen Screenreader verwenden.
Auch Audio- und Videodateien können Teil einer Geschichte sein:
<audio controls src="audio/door.mp3"></audio>
oder:
<video controls> <source src="video/train.webm" type="video/webm"> </video>
Variablen können nicht nur true und false, sondern auch Zahlen oder Texte enthalten.
Zum Beispiel:
<script> points = 3; </script>
Mit doppelten eckigen Klammern kannst du einen Wert in den Text einsetzen:
Du hast [[ points ]] Punkte.
Wenn eine Variable auf einer Seite einen Anfangswert bekommen soll, die mehrfach besucht werden kann, ist ??= praktisch:
points ??= 0;
Der Wert wird damit nur gesetzt, wenn points noch nicht existiert. Werte wie 0, false oder ein bereits vorhandener Text bleiben unverändert.
Für manche Geschichten kann Zufall interessant sein.
Math.w6()
würfelt mit einem sechsseitigen Würfel.
Math.chance(50)
liefert mit einer Wahrscheinlichkeit von 50 Prozent true.
Zum Ausprobieren kannst du zum Beispiel diesen Block auf eine Seite schreiben:
<script> if (Math.chance(50)) { print("Aus dem Treppenhaus hörst du Schritte."); } else { print("Im Treppenhaus bleibt alles still."); } </script>
Lade die Seite mehrmals über einen Neustart der Geschichte. Mal hörst du die Schritte, mal bleibt es still.
Zufall eignet sich gut für kleine Überraschungen. Wichtige Folgen sind oft interessanter, wenn sie von vorherigen Entscheidungen abhängen.
Bei größeren Geschichten kannst du Seiten im Graphen zu Bereichen zusammenfassen.
Ganz oben in einer Seite kann zum Beispiel stehen:
<!-- Schule -- Büro -->
Eine andere Seite könnte beginnen mit:
<!-- Schule -- Flur -->
Diese Kommentare sind für die Leserinnen und Leser unsichtbar. Sie helfen nur dabei, den Graphen übersichtlich zu halten.
Für normale Entscheidungen reichen die Markdown-Links fast immer aus:
- [Gehe nach links.](5) - [Gehe nach rechts.](6)
JavaScript wird interessant, wenn Entscheidungen nicht einfach fest im Text stehen sollen, sondern erst aus Daten oder dem aktuellen Zustand der Geschichte entstehen.
BIF stellt Skripten dafür unter anderem die Funktionen print, presentChoice und goToPage zur Verfügung. Das folgende Beispiel baut die Entscheidungsmöglichkeiten mit JavaScript zusammen. Wenn has_key den Wert true hat, kommt eine zusätzliche Möglichkeit dazu:
<script> const choices = [ ["3", "Sieh im Büro nach."], ["4", "Gehe ins Treppenhaus."] ]; if (has_key) { print("Du spürst den kleinen Schlüssel in deiner Tasche."); choices.push(["5", "Öffne den Materialschrank."]); } const target = await presentChoice(choices); await goToPage(target); </script>
presentChoice zeigt die erzeugten Entscheidungen an und liefert zurück, welcher Wert ausgewählt wurde. In diesem Beispiel ist das direkt die Nummer der Zielseite. goToPage öffnet anschließend diese Seite.
Mit JavaScript könntest du auf diese Weise zum Beispiel Entscheidungen aus einer Liste erzeugen, kleine Rätsel programmieren oder Abläufe bauen, die mit normalen Markdown-Entscheidungen umständlich würden. Für die meisten Stellen einer Geschichte bleiben Markdown, Variablen und Bedingungen aber übersichtlicher.
Die kleine Geschichte Nach Schulschluss war nur dazu da, die Technik kennenzulernen.
Für deine eigene Geschichte kannst du einen neuen Ordner anlegen, zum Beispiel:
pages-meine-geschichte
Lege darin wieder eine 1.md an.
Anschließend wählst du den neuen Geschichtenordner in config.js aus:
export const path = "pages-meine-geschichte";
Damit beginnt dein eigenes Projekt wieder ganz klein.
Beim Geschichtenerzählen gibt es keine allgemein gültige Liste wie die zwölf Prinzipien der Animation. Es gibt aber ein paar Bausteine, die fast immer helfen. Für eine BIF-Geschichte kannst du dir zunächst diese Fragen stellen.
Figur
Wer handelt in der Geschichte? Was ist dieser Person wichtig? Eine Figur wird interessanter, wenn sie nicht nur irgendwo herumläuft, sondern etwas will.
Ziel
Was möchte die Figur erreichen, finden, verhindern oder herausbekommen? Ein klares Ziel gibt der Geschichte eine Richtung.
Setting
Wo und wann spielt die Geschichte? Ein Schulgebäude nach Unterrichtsschluss fühlt sich anders an als dieselbe Schule während der großen Pause. Überlege, welche Orte, Geräusche, Gegenstände oder Regeln für dein Setting typisch sind.
Konflikt oder Hindernis
Warum kann die Figur ihr Ziel nicht sofort erreichen? Eine verschlossene Tür, eine Person, die nicht die Wahrheit sagt, zu wenig Zeit oder zwei Ziele, die nicht gleichzeitig erreicht werden können, erzeugen Spannung.
Plot oder Handlung
Der Plot ist nicht nur eine Liste von Orten. Er beschreibt, was passiert und warum sich die Situation verändert. Eine einfache Grundform reicht oft schon:
Eine Figur will etwas. Etwas steht im Weg. Sie muss handeln oder sich entscheiden. Die Entscheidung hat eine Folge. Dadurch entsteht eine neue Situation.
Diese Folge kann wieder zu einer neuen Entscheidung führen. So entwickelt sich die Handlung Schritt für Schritt.
Entscheidungen
Was darf die Leserin oder der Leser wirklich entscheiden? Interessant wird eine Entscheidung, wenn beide Möglichkeiten einen Grund haben. Statt nur
Gehe nach links. Gehe nach rechts.
könnte die Wahl zum Beispiel lauten:
Folge den Stimmen aus dem dunklen Flur. Kehre zurück und hole Hilfe.
Jetzt steckt bereits ein kleiner Konflikt in der Entscheidung: Neugier gegen Vorsicht.
Folgen
Eine gute Entscheidung verändert etwas. Manchmal sieht man die Folge sofort, manchmal erst später. Variablen und Bedingungen sind besonders nützlich für solche späteren Folgen: Eine Person erinnert sich an dein Verhalten, ein Gegenstand ist verbraucht oder ein neuer Weg wird möglich.
Ende
Woran merkt man, dass die Geschichte abgeschlossen ist? Am Ende sollte sich etwas gegenüber dem Anfang verändert haben. Das Ziel kann erreicht oder verfehlt worden sein, eine Frage wurde beantwortet oder die Figur hat etwas verstanden. Eine interaktive Geschichte kann natürlich mehrere unterschiedliche Enden haben.
Für interaktive Geschichten sind außerdem ein paar praktische Regeln hilfreich:
Falls dir noch eine Ausgangssituation fehlt, kannst du zum Beispiel mit einer dieser Ideen beginnen:
Beginne nicht sofort mit zwanzig oder dreißig Seiten. Ein paar Seiten reichen für den Anfang. Spiele sie durch, schau auf den Graphen und erweitere die Geschichte Schritt für Schritt.
Du musst auch nicht jede Funktion von BIF verwenden. Eine kleine Geschichte mit guten Entscheidungen ist besser als eine komplizierte Geschichte voller Technik, die eigentlich nichts bewirkt.