Tutorial: Weitere Schritte mit Twine

Nach meinem ersten Tutorial zu Twine, das nun auch schon wieder vier Monate zurückliegt, habe ich mich gestern an eine weitere kleine Geschichte gewagt, die Euch ein paar neue Aspekte von Twine, dem Open-Source-Programm (GPL) zur Erstellung nichtlinearer interaktiver Geschichten nahebringen will. Wie schon im ersten Tutorial nutze ich das aktuelle Twine 2 (Twine 2.3.5) mit dem Default-Story-Format Harlowe (Harlowe 3.1.0).

Das Geschichtchen, das ich dieses Mal erzählen möchte, besteht aus acht Passagen und ich habe es »Alice und die Teeparty« genannt, weil es sich an einem Ausschnitt von »Alice im Wunderland« von Lewis Carroll orientiert und die Zeichnungen von John Tenniel aus der Erstausgabe verwendet. Der Hauptgrund ist, daß sowohl Carroll wie auch Tenniel hinreichend lange tot und daher keine Urheberrechtsprobleme zu befürchten sind. Außerdem sind die Geschichten um Alice schräg genug, so daß sie genügend Stoff bieten, um sie weiterzuspinnen. 🤓

Die Startpassage bietet noch nicht viel Neues und sieht so aus:

=><=
<img src="http://localhost:8888/twine/images/alice.png" />

<=
Wie jeden Donnerstag ging Alice auf die [[Teeparty -> Tisch]] zu ihren Freunden, dem verrückten
Hutmacher, dem Märzhasen und dem weißen Kaninchen. Sie war etwas mißmutig gestimmt, wußte aber
nicht warum.

Die Anweisung =><= zentriert das Bild und die Anweisung <= setzt den folgenden Text wieder an den linken Rand. Wie schon im ersten Tutorial beschrieben, liegen alle Bilder im Verzeichnis meines lokalen MAMP-Servers (der sowieso immer bei mir läuft). Für die endgültige Fassung in der freien Wildbahn werden die URLs per globales Suchen und Ersetzen angepaßt.

Die zweite Passage heißt Tisch und bekam diesen Inhalt verpaßt:

<img src="http://localhost:8888/twine/images/tea-party.jpg" />

Hier saßen alle schon um den Tisch herum. Der verrückte Hutmacher hob seine Teetasse,
prostete allen zu und [[schwadronierte|Hutmacher]] …

Das ist eine Übergangspassage, die nur zur nächsten Passage (Hutmacher) führen soll, in der zum ersten Mal etwas Neues passiert:

{
(set: $rumble to (text-style: "rumble"))
(set: $red to (color: "red"))
(set: $big to (css: "font-size: 60px"))}<img src="http://localhost:8888/twine/images/hutmacher.jpg" />

»Macht Wunderland wieder $big[$red[$rumble[groß]]]!«

Der Märzhase entgegnete [[schüchtern -> Märzhase]] …

Hier gibt es gleich zwei neue Dinge: Zum einen Variablen und zum anderen Hooks. Variabeln funktionieren in Twine wie in allen anderen Programmiersprachen und man erkennt sie daran, daß ihnen ein Dollarzeichen ($) vorgesetzt wird. Hooks sind Textteile, die in irgendeiner Weise speziell behandelt werden sollen. In einfachster Form wird die Anweisung in runden Klammern vorangestellt und der Text, für den der Hook bestimmt ist, folgt in eckigen Klammern, zum Beispiel so:

(font: "Courier New")[Dieser Text wird in Courier geschrieben]

Sollen jedoch – wie in obigem Fall, mehrere Hooks auf einen Textabschnitt wirken, müssen sie geschachtelt werden und man verliert leicht die Übersicht. Daher kann man auch Hooks mithilfe des set:-Makros einer Variablen zuweisen und diese dann schachteln. Nach der entsprechenden Initialisierung wird dann das große, rote und rumpelnde Wort »groß« durch folgende Anweisung in Twine erstellt:

$big[$red[$rumble[groß]]]

Das sieht doch übersichtlicher aus als:

(css: "font-size: 60px")[(color: "red")[(text-style: "rumble")[groß]]]

Diese Anweisung funktioniert natürlich auch und in beiden Fällen müßt Ihr darauf achten, daß die offenen wie auch geschlossenen eckigen Klammern paarweise und an den richtigen Stellen auftreten.

Die geschweiften Klammern in obiger Passage sorgen dafür, daß die mehrzeiligen Makro-Anweisungen als eine einzige Zeile behandelt werden. Würdet Ihr sie nämlich weglassen, hättet Ihr eine große weiße Fläche im Kopf Eurer Seite.

Nach diesen Erläuterungen sollten Euch die Anweisungen in der nächsten Passage (Märzhase) verständlich sein:

=><=
{
(set: $green to (color: "green"))
(set: $small to (css: "font-size: 12px"))}<img src="http://localhost:8888/twine/images/march-hare.jpg" />

<=
»Ich fand es aber $small[$green[klein]] viel schöner.«

Das weiße Kaninchen schaute auf seine Uhr und jammerte: »Ich komme wieder **viel** zu [[spät ->
Kaninchen]] …«

Wegen der besseren Lesbarkeit habe ich hin und wieder Text umgebrochen, der im Twine-Editor natürlich nicht umgebrochen gehört.

Die einzige Überraschung ist hier: Harlowe versteht Markdown-Markup, hier zum Beispiel die beiden Sternchen für **fett**.

Die vier letzten Passagen (Kaninchen, Flamingo, Raupe und Grinsekatze) bringen nichts Neues und sind hier nur der Vollständigkeit halber aufgeführt. Erst die Passage Kaninchen,

<img src="http://localhost:8888/twine/images/white-rabbit.jpg" />

Sprach's und hoppelte aufgeregt davon.

[[Zurück -> Flamingo]]

dann die Passage Flamingo, in der die einzige Verzweigung in dieser Geschichte vorkommt,

=><=
<img src="http://localhost:8888/twine/images/flamingo.jpg" />

<=
Alice dachte, daß ihr dies zu dumm sei. Außerdem wußte sie nicht, wieso sie auf einmal einen Flamingo im Arm hatte. Sie überlegte, ob sie ihren Freund, die [[bekiffte Raupe -> Raupe]] besuchen oder mit der [[Grinsekatze]] plaudern solle.

nämlich der Abstecher zur Raupe,

=><=

<img src="http://localhost:8888/twine/images/caterpillar.jpg" />

<=
Rauch … Rauch … Rauch …

Die Raupe war zu bekifft für ein vernünftiges Gespräch. Alice suchte daher doch die [[Grinsekatze]] auf.

um sich schließlich bei der Grinsekatze wieder zusammenzufinden:

=><=
<img src="http://localhost:8888/twine/images/grinse-katze.png" />


<=
Die Grinsekatze sagte »Schön, daß Du mich mal wieder besuchen kommst« und verschwand …

Das ist das Ende.

Alles auf [[Anfang|Start]]?

Diese kleine Geschichte ist natürlich kein literarisches Meisterwerk, sondern soll nur zeigen, wie man mit wenigen Zeilen seine Twine-Geschichten aufpeppen kann. Mir hat es jedenfalls viel Spaß gemacht und ich denke, ich werde weitere Experimente mit Twine durchführen. Denn Harlowe bietet noch viel mehr und bisher habe ich nur an der Oberfläche gekratzt.

Natürlich habe ich »Alice und die Teeparty« auch auf meinen Webserver hochgeladen. Ihr könnt sie aufrufen und damit spielen. Sie sieht übrigens auch auf (m)einem Mobiltelephon recht gut aus.

Last but not least gibt es die Geschichte auch in meinem GitHub-Repositorium. Ihr könnt einfach die HTML-Datei in Twine importieren und dann damit experimentieren oder die Erzählung weiterspinnen. Die Bilder findet Ihr hier und Ihr müßt sie dann auf irgendeinen Server Eures Vertrauens hochladen. Danach dürft Ihr natürlich nicht vergessen, die URLs anzupassen.

Für dieses Wochenende (und später) wünsche ich Euch viel Spaß mit Twine.

---

(Kommentieren)