Alice und Humpel Pumpel: Mit Twine und Harlowe ins Wunderland (Teil 3)

Twine
Harlowe
Interactive Fiction
Spieleprogrammierung
Alice
Autor:in

Jörg Kantel

Veröffentlichungsdatum

1. September 2026

Heute möchte ich meine Reise mit Alice durch das Wunderland von Twine, der netten, kleinen, freien Engine (nicht nur) für interaktive Geschichten und dem (Default-) Storyformat Harlowe fortsetzen. Ich möchte erkunden, wie man innerhalb einer Passage Texte hinzufügen kann, ohne daß die Passage neu geladen werden muss.

Alice und Humpel Pumpel (Screenshot)

Dafür habe ich eine kleine Geschichte entwickelt, die gerade einmal aus fünf Passagen besteht. In der ersten Passage (Start) passiert noch nichts neues:

### Alice und Humpel Pumpel

<img src="images/humpelpumpel01.jpg" alt="Humpel Pumpel" />

Alice strolchte mal wieder durch das Wunderland und kam in ein Dorf mit einer großen, 
steineren Mauer.

Auf dieser Mauer saß ein seltsames Wesen und [[grinste Alice breit an->Humpel Pumpel]].

Hier wird nur in die Geschichte eingeführt und auf die nächste Passage ( Humpel Pumpel) verlinkt:

<img src="images/humpelpumpel02.jpg" alt="Humpel Pumpel" />

»Du mußt Humpel Pumpel sein« sagte Alice, nur um etwas freundliches zu sagen.

Humpel Pumpel: (link: "»Warum?«")[»Warum?«

»Weil Du wie ein Humpel Pumpel aussiehst« antwortete Alice.

Humpel Pumpel schwieg eine Weile beleidigt.

(link: "»Und wie heißt Du?«")[»Und wie heißt Du?«

»Alice«, antwortete Alice.

»[[Du siehst aber gar nicht wie Alice aus->Humpel Pumpel 2]]« sagte Humpel Pumpel 
schon wieder fröhlicher.]]

Hier seht Ihr das Geheimnis der neu auftauchenden Textzeilen: Es ist das link:-Makro. Es ersetzt den Linktext1 durch den Text, der in dem Hook steht, der an dem Makro angehängt wurde:

(link: "Linktext")[Text, der den Linktext ersetzen soll]

Zu beachten dabei ist, daß der Linktext komplett verschwindet, nachdem der Link angeklickt wurde. Aus

Du stehst in einem Raum (link: "mit einer geheimnisvollen Tür")[mit einem tiefen, 
schwarzen Loch, aus dem ein gefährliches Grunzen klingt].

wird zuerst2:

Du stehst in einem Raum mit einer geheimnisvollen Tür.

Und wenn Ihr den Link angeklickt habt:

Du stehst in einem Raum mit einem tiefen, schwarzen Loch, aus dem ein gefährliches Grunzen klingt.

Beachtet, daß der Punkt am Ende der Passage weder zum Linkmakro noch zum Hook gehört. Er wird daher unabhängig davon angezeigt, ob der Link geklickt wurde, oder nicht (also immer).

Der Linktext mitsamt der zugehörigen Link-Formatierung verschwindet also und wird durch den Text im Hook ersetzt. Daraus folgt, wenn der Linktext bleiben soll, müsst ihr ihn im Hook noch einmal wiederholen. Ich habe davon reichlich Gebrauch gemacht, zum Beispiel hier:

Humpel Pumpel: (link: "»Warum?«")[»Warum?«

»Weil Du wie ein Humpel Pumpel aussiehst« antwortete Alice.

Humpel Pumpel schwieg eine Weile beleidigt.]

Dadurch verschwindet das »Warum?« im Linktext nicht, aber es erscheint nicht mehr als Link.

Der Text in den Hooks kann auch Whitespaces und Zeilenumbrüche enthalten. Sie werden eins zu eins von Twine übernommen und dargestellt, sobald der Hook aktiv ist (das link:-Makro angeklickt wurde).

In Harlowe kann man Makros schachteln. Der Hook nach dem link:-Makro darf also auch wieder ein link:-Makro enthalten (und natürlich auch andere Makros und/oder Links). Dabei müsst ihr darauf achten, daß alle Hooks korrekt mit ihrer eckigen Klammer am Ende geschlossen werden müssen. Ich würde es daher mit der Verschachtelung nicht übertreiben, weil sonst die Angelegenheit sehr leicht und schnell unübersichtlich wird3.

Weil es so schön war, habe ich das (geschachtelte) link:-Makro in der nächsten Passage Humpel Pumpel 2 noch einmal genutzt:

<img src="images/humpelpumpel03.jpg" alt="Humpel Pumpel" />

Darauf wußte Alice keine Antwort. »Wenn Du weiter so auf der Mauer zappelst, 
wirst Du noch herunterfallen« sagte sie schließlich, nur um überhaupt 
etwas zu sagen.

Humpel Pumpel: (link: "»Nein!«")[»Nein!«

Alice: (link: "»Doch!«")[»Doch!«

Humpel Pumpel: »Oh!«

Alice schlich sich an dem heruntergefallenen Humpel Pumpel vorbei und ging 
weiter in das Dorf. In der Mitte des Dorfes unter einem großen Baum war ein 
[[Biergarten->Biergarten]].]]

Diese Passage ist etwas kompakter geraten und daher kann man hier besser erkennen, wie die Makros ineinander verschachtelt sind.

Die letzten beiden Passagen bringen nichts neues, sondern dienen nur dazu, die Geschichte zu einem Ende zu bringen. Also erst einmal die Passage Biergarten:

<img src="images/hutmacher02.jpg" alt="Im Biergarten" />

Hier saßen seltsamerweise wieder ihre alten Freunde, der Märzhase, der 
verrückte Hutmacher und die Haselmaus an einem Tisch und begrüßten sie 
lautstark. Alice war verwirrt, [[blieb aber noch eine Weile->Haselmaus]].

Und als letztes die Passage Haselmaus:

<img src="images/haselmaus02.jpg" alt="Haselmaus" />

Als der Hutmacher und der Märzhase jedoch anfingen, die Haselmaus kopfüber 
in den Teetopf zu stülpen, hatte sie genug. Sie beschloß, die Party zu verlassen.

Hier ist die Geschichte zu Ende.

[[Noch einmal spielen->Start]]?

Und hier ist dieses Twine-Spielchen in seiner schlichten Schönheit, eingebettet in diese Seiten:

Auch die Bilder für diese Geschichte habe ich wieder von einer gekünstelten Intelligenzia (OpenArt) mit Hilfe von NanoBanana 2 zusammenbasteln lassen. Und ich habe dieses kleine Tutorial wieder sowohl als HTML-Datei wie auch als Twee-Datei mit allen Assets auf meinem GitHub-Account hochgeladen. Habt Spaß damit!

Außerdem habe ich diese Twine-Seiten – wie die anderen auch – auf meinen Neocities-Account veröffentlicht.

Was bisher geschah

Meine Twine-Harlowe-Reihe besteht bisher aus diesen sechs Beiträgen:

  1. Der Wunderland-Debattierclub: Klickbare Imagemaps in Twine
  2. Zurück ins Wunderland (schon wieder) und dieses Mal mit Harlowe
  3. Alles auf Anfang: Mit Twine und Harlowe ins Wunderland
  4. Aus meiner Webwerkstatt: Twine-Stories in die eigenen Seiten einbinden
  5. Alice und die Teeparty: Mit Twine und Harlowe ins Wunderland (Teil 2)
  6. Alice und Humpel Pumpel: Mit Twine und Harlowe ins Wunderland (Teil 3)

Fortsetzung folgt …

Bild: Alice und Humpel Pumpel, erstellt mit OpenArt. Prompt: »@Humpelpumpel sits on a wall in a picturesque little village. @Alice stands below, in front of the wall, looking at him friendly but questioningly. It is a beautiful, sunny day with few clouds in the sky. Colored Franco-Belgian comic style. Language German. No speech bubbles, no textboxes, no headlines. Close up.« Modell: Nano Banana 2.

Fußnoten

  1. Der Linktext im link:-Makro muss immer in Hochkommata stehen, also entweder "linktext" oder 'linktext'.↩︎

  2. Die Linkfarbe ist natürlich nur orange, wenn Ihr die Stylesheets aus dem ersten Tutorial der Reihe (und seinem Anhang) eingebunden habt, ansonsten ist sie blau.↩︎

  3. Ich habe in dieser und der folgenden Beispielpassage jeweils zwei link:-Makros ineinander verschachtelt und ich hatte dabei schon mit etlichen (Flüchtigkeits-) Fehlern zu kämpfen.↩︎