## HOW TO TWINE
### Einstieg in TWINE
[[Was ist TWINE?->whatis]]
[[ein BeiSPIEL->beispiel]]
[[Erste Schritte: Abschnitte und Wegkreuzungen->firststeps]]
### Spielen mit der Schrift
[[Basisformatierung der Schrift->basisformatierung]]
[[weitere Textformatierungen->textdarstellung]]
[[Text mit einem Effekt erscheinen lassen->texteffekte]]
### Funktionen
[[Bedingungen, Konsequenzen & mehr->funktionen]]
### Design
[[externe Links & Bilder einfügen->bilderlinks]]
[[Gesamtes Design / Stylesheet ändern->gesamtdesign]]
[[Design einzelner Seiten verändern mit Tags->tags]]
[[Ich will mehr!->mehr]]
Version 1.0
Dieses Tutorial arbeitet mit dem Geschichtsformat Harlowe 3.1.0.
Frank Schlegel / digitaldurstig CC0 1.0
Danke, Nele Hirsch @eBildungslabor für den Spickzettel & den Zauberwald!Wie in jedem Standard-Texteditor kannst du auch in TWINE den Text fett, kursiv oder größer machen. Dafür benutzt du in TWINE einfach diese Zeichen:
//kursiv//
**fett**
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/fa15d226afaa2fa4877d1890875bee44/kursiv_fett.png>
</div>
* Aufzählung
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/166a34689adc9e184cb4eda24fb6e865/Aufzaehlung.png>
</div>
# riesige Überschrift
## mittelgroße Überschrift
### kleine Überschrift
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img src=https://padlet-uploads.storage.googleapis.com/363821064/58f2151c51364ad0ea035452d82fd78f/Ueberschriften.png>
</div>
[[zurück->howtotwine]]Neben der Standardformatierung kannst du Text in TWINE mit verschiedenen Stilen versehen. Hier findest du einige Befehle, um Text individueller darzustellen:
(text-style: "underline")[unterstrichener Text]
(text-style: "strike")[durchgestrichener Text]
(text-style: "mark")[Text mit markiertem Hintergrund]
(text-style: "shadow")[Text mit Schatten]
(text-style: "outline")[Text mit Outlines]
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/47bb353883d7a838546948a5a9a81a89/textformatierung.png>
</div>
Du möchtest eine vom Regen aufgeweichte Notiz oder ein schief hängendes Schild darstellen? Nutze diese Styles, um das Schriftbild interessanter zu machen:
(text-style: "blur")[verwaschener Text]
(text-style: "blurrier")[stark verwaschener Text]
(text-style: "smear")[verschmierter Text]
(text-style: "mirror")[Textspiegelung]
(text-rotate:170)[rotierter Text]
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/b6b5d299386c910be7e8c4b658ad6980/textwaschen.png>
</div>
Du kannst Text auch animieren:
(text-style: "blink")[blinkender Text]
(text-style: "fade-in-out")[Text fadet ein und aus]
(text-style: "shudder")[Text zittert]
(text-style: "rumble")[Text zappelt auf und ab]
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/227e282648f020313565fab9349b2c71/textanimation.png>
</div>
Es klappt nicht? Vielleicht hast du vergessen, den Text in eckige Klammern zu setzen. :)
Du möchtest Schriftart & Farbe deiner Texte ändern? Das machst du im [[Stylesheet.->gesamtdesign]]
[[zurück->howtotwine]]Eine andere Hintergrundfarbe, ein anderes Schriftbild oder Hintergrundmusik - du möchtest den Stil deines gesamten Twines ändern?
Dann musst du das Standard-Design deiner Story überschreiben. Diese Änderungen nimmst du im Stylesheet (CSS) vor:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/6a8335c174afedd5d68cfc5c882be556/media.gif>
</div>
Hier kannst du mit mit HTML-Codes das Design deiner Story ändern, zum Beispiel
[[Schriftbild & Hintergrund der Story ändern->gesamthintergrund]]
[[Hintergrundmusik während meiner Geschichte laufen lassen->musik]]
[[die Sidebar an der linken Seite verschwinden lassen->sidebar]]
Du möchtest [[noch mehr über Codes für das Stylesheet erfahren?->mehr]]
Wenn du Änderungen nur bei einem bestimmten Abschnitt vornehmen möchtest, [[musst du mit Tags arbeiten.->tags]]
[[zum Hauptmenü zurückkehren->howtotwine]]transition. Der Text erscheint mit einem Effekt:
Der Text erscheint
[[pulsierend->pulse]]
[[flackernd->flicker]]
[[nach links und rechts zitternd->shudder]]
[[auf und ab zappelnd->rumble]]
[[erst nach einigen Sekunden->event]]
[[zurück->howtotwine]]
(t8n: "pulse")[Ich vibriere zum Beat.]
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/da77ad078371ea59a713dfb476d725cf/pulse.png>
</div>
[[zurück->texteffekte]]
(t8n: "flicker")[Ich flackere wie eine defekte Neonröhre.]
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/361ec1b2ed010074a6f4033cf78d54ef/flicker.png>
</div>
[[zurück->texteffekte]]Du möchtest deine ersten Schritte mit TWINE machen.
(event: when time > 2s)[Das ist super!]
(event: when time > 4s)[In diesem Kapitel lernst du, wie du Abschnitte in TWINE anlegst. Von jedem Abschnitt können Wege zu verschiedenen anderen Abschnitten führen.
Die Spielerinnen und Leser deines TWINEs können dann entscheiden, welchen dieser Pfade sie entlang gehen.
[[Okay->loslegen]]]
Was sind Tags?
Tags sind "Aufkleber", mit denen du einen Abschnitt in TWINE versehen kannst.
Willst du zum Beispiel bei einem Abschnitt eine Winterlandschaft im Hintergrund haben, dann braucht dein Abschnitt den passenden "Aufkleber: Zeige diese Winterlandschaft im Hintergrund".
Einen Tag erstellen wir im Stylesheet:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/6a8335c174afedd5d68cfc5c882be556/media.gif>
</div>
Und so schreiben wir einen Tag:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/1e4ae662e0bc57686de5001b5438b99b/tagsbeispiel.png>
</div>
Jetzt zum gewünschten Abschnitt und den Tag draufkleben:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/4e8b7e56ebbe90607ef4fabe68c1de56/media.gif>
</div>
Für diesen Abschnitt gelten jetzt alle Regeln des Tags "quest", die du im Stylesheet bestimmt hast.
[[zurück zum Menü->howtotwine]]Du weißt schon, wie du eine interaktive Geschichte schreibst, die deine Leserinnen und Spieler vor Entscheidungen stellt.
Jetzt ist es an der Zeit, mit Variablen und anderen Mechanismen richtiges Gaming-Feuer zu entfachen!
Vor allem mit Wenn-dann-Funktionen kannst du den Entscheidungen der Spielenden noch mehr Gewicht geben.
Bedingungen & Konsequenzen:[[Wenn-dann-Variablen schaffen->variablen]]
[[einen Namen wählen->name]]
[[würfeln->zufall]]
[[zurückspringen->zurueckspringen]]
[[mehrere Kärtchen/Verstecke aufdecken->aufdecken]]
[[zum Hauptmenü gehen->howtotwine]] Was ist eigentlich TWINE?
(event: when time > 2s)[Hier die Kurzfassung:]
(event: when time > 4s)[TWINE ist ein Programm, mit dem du interaktive Texte schreiben kannst. Das eignet sich zum Beispiel für Textadventure-Games oder interaktive Anleitungen.
Twine ist offen und kostenfrei. Du kannst es online nutzen oder herunterladen und auf deinem Computer nutzen.]
(event: when time > 14s)[Übrigens befindest du dich jetzt gerade in einer mit TWINE geschriebenen Anwendung!]
(event: when time > 18s)[[[Erzähl mir mehr über TWINE. Wo kommt es her und wer arbeitet damit?->background]]
[[Ich will ein Beispiel spielen!->beispiel]]
[[Danke, ich will TWINE jetzt selbst ausprobieren.->howtotwine]]]
(t8n: "shudder")[Ich zittere am ganzen Leib.]
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/0d0158ed060810c204bb24b6c35e2df9/shudder.png>
</div>
[[zurück->texteffekte]]
(t8n: "rumble")[Ich bebe vor Kraft wie der Hulk]
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/e72004c0a326db61f2ce64a816fed8dc/rumble.png>
</div>
[[zurück->texteffekte]]Uno momento!
(event: when time > 2s)[Wait for it ...]
(event: when time > 4s)[Hier passiert ein Event, wenn eine bestimmte Zeit verstrichen ist.]
(event: when time > 7s)[Und so sieht das in TWINE aus:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/537023b8c00305361e559df505af7429/event_time.png>
</div>]
(event: when time > 10s)[[[zurück->texteffekte]]]
TWINE wurde 2009 von Chris Klimas entwickelt.
Seitdem hat sich eine Community um TWINE gebildet, die Spiele schreibt, teilt und remixt.
Mittlerweile haben andere Entwicklerinnen und Entwickler verschiedene Formate für TWINE entwickelt. In diesem Tutorial verwende ich die Standard-Sprache Harlowe 3.1.0., es gibt noch SugarCube, Chapbook und Snowman.
Wer sich richtig in TWINE reinfuchsen will, findet in dem riesigen, von der Community gepflegten Wiki Antworten. Die Seite ist allerdings englischsprachig.
In Deutschland sind es Initiativen wie die OER Webtalks und Creative Gaming, die das Potential von TWINE für die Bildung nutzen wollen.
[[Ich möchte ein kurzes TWINE-Spiel ausprobieren->beispiel]]
[[Ich will herausfinden, wie ich selbst eine Story mit TWINE schreiben kann.->howtotwine]]](t8n: "pulse")[# Quatsch Quest]
(event: when time > 2s)[Wähle deinen Charakter für den Quatsch Quest aus:]
(event: when time > 3s)[* Charakter: (cycling-link: bind $char, "Kriegerin", "Händler", "Jägersfrau", "Schelm")]
(event: when time > 4s)[Auf in die dunklen [[Gassen der Unterstadt->gassen ]]]
Und das ist es auch schon.
Mehr brauchst du zum Schreiben einer TWINE-Geschichte nicht.
(event: when time > 4s)[Alles weitere sind kosmetische Schnörkel oder etwas kompliziertere Spielmechanismen.
Was du zum Loslegen brauchst, erfährst du in diesem Kapitel.]
(event: when time > 10s)[Also los!
Gehe zunächst auf <a href="https://twinery.org/2" target="blank">twinery.org</a>.]
(event: when time > 15s)[[[Ich bin da. Wie geht's weiter?->download]]]Du hast zwei Möglichkeiten, TWINE zu nutzen.
(event: when time > 2s)[Möchtest du mit der Online-Version arbeiten, klicke auf //Use it online//.
Hier kannst du das Programm in deinem Browser, also im Internet-Fenster, verwenden.
Du kannst TWINE auch herunterladen. Das geht sehr schnell, das Programm ist nämlich relativ klein. Lade die aktuellste Version herunter.
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/510beb5fd15211a6aab9c874ba8c2321/download.png>
</div>
Zum Ausprobieren reicht die Webversion.
Ich empfehle dir aber, TWINE herunterzuladen, zu installieren und dann mit dieser Version zu arbeiten. Was auf deiner Festplatte liegt, kann auch nicht durch Internetprobleme oder ähnliches verloren gehen.
[[Ich bin jetzt in TWINE! Wie starte ich nun meine Geschichte?->storystart]]]
Erstelle eine neue Geschichte und gib ihr einen Namen.
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/c27e4e34fbcc3738e9724b198b3ba45c/neuegeschichte.GIF>
</div>
Den Namen kannst du später noch ändern.
Du startest automatisch mit deinem ersten Abschnitt.
Hier beginnt deine Geschichte.
Von hier verweisen deine ersten Hyperlinks.
Doppelklicke auf den Abschnitt oder klicke auf den Stift, um ihn zu bearbeiten:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/339034be1e7c5cbe5287f89d50930e70/media.gif>
</div>
Jetzt kannst du den Abschnitt bearbeiten:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/0512d117018045015f6f17fe36b264fa/media.jpeg>
</div>
Achte bei den Überschriften auf Groß- und Kleinschreibung. Wenn du später auf "neubeginn" verweisen möchtest, aber "Neubeginn" schreibst, landest du nicht bei diesem Abschnitt sondern generierst einen neuen.
[[Hab ich verstanden, weiter im Text!->hyperlinks]]
In diesem Beispiel geht es darum, ein Stück Pizza zu suchen.
Ich möchte der Leserin die Möglichkeit geben, unter dem Sofa zu suchen oder im Katzennapf nachzuschauen.
Ich lege dafür zwei Hyperlinks an. Dadurch werden die nächsten beiden Abschnitte //napf// und //sofa// angelegt:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/95ffdf93afa564de6c14944819e1a313/media.jpeg>
</div>
1. zwei eckige offene Klammern
2. Text, den die Spielenden sehen können
3. ein Pfeil aus einem Strich - und einem Größer-als-Zeichen >
4. Name des neuen Abschnitts, auf den verwiesen wird
5. zwei eckige geschlossene Klammern
Dadurch schaffen wir eine Weggabelung, welche die Leserin vor eine Entscheidung stellt.
In TWINE sieht das Projekt jetzt so aus: Wir haben zwei neue Abschnitte, die vom ersten fortführen:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/e2f81620cec80c86e91ed217b491c74c/gabelung.png>
</div>
Für die Spielerin sieht das dann so aus:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/44dae3f877ede4623f916aec8bc07426/media.gif>
</div>
Die beiden neuen Abschnitte //napf// und //sofa// können wir genauso bearbeiten wie den ersten Abschnitt.
Nur den Titel keinesfalls ändern, den haben wir ja schon verlinkt!
[[Ich will noch wissen, wie ich meine Geschichte speichern und spielen kann.->speichern]]
[[Danke, von hier an komme ich allein zurecht. Ich möchte zurück zum Hauptmenü.->howtotwine]]
Wenn du einen Abschnitt fertig geschrieben hast und ihn testen möchtest, kannst du deinen Testlauf genau bei diesem Abschnitt starten:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/6fc90da4a717d4bf4f2cc808f279078b/media.gif>
</div>
Wenn du deine komplette TWINE-Story testen möchtest, wähle die Option am unteren Bildschirmrand:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/66a77c518bace5b43eb6a2ade6016b28/media.gif>
</div>
Eine Speicherfunktion gibt es innerhalb von TWINE nicht. Deine Geschichten in der Online-Version werden nach einiger Zeit gelöscht. Ich empfehle dir deshalb, deine Geschichten regelmäßig als Datei zu veröffentlichen:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/f4b388ccb176987f118daa92c8eaa109/media.gif>
</div>
Diese HTML-Datei kannst du jetzt anklicken und im Browser spielen.
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/f16f19d86a4795b322a567946d6e09ef/media.gif>
</div>
Du kannst die HTML-Dateien an andere verschicken oder die HTML-Dateien von anderen in dein TWINE hineinziehen und weiterschreiben.
Das wär's!
Das sind die Grundlagen.
Ich wünsche dir viel Spaß beim Schreiben deiner ersten Story!
[[Alles klar!->howtotwine]]
[[Wie mache ich das nochmal mit den Hyperlinks?->hyperlinks]]Das normale Design einer Story in diesem Geschichtsformat (Harlowe 3.1.0) sieht so aus:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/063e3f23fadd43f5f7e4e7376030d355/normalesdesign.png>
</div>
In diesem Tutorial habe ich Schriftart und Hintergrundfarbe geändert. So gestaltet sich das im Stylesheet:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/0c56e531462b40ff5c8fc325a331c5f7/media.jpeg>
</div>
1. die Schriftart: TWINE kann Standard-Schriftarten wie Arial, Times, Courier und Impact.
2. die Farbe des Textes
3. Farbe der Links
4. Farbe der Links, wenn du mit der Maus über sie schwebst
5. Farbe des Hintergrunds
Um eine Standard-Farbe auszuwählen, kannst du einfach //green//, //red// oder //black// eingeben.
Ich wollte für dieses Tutorial spezielle Farben verwenden undf habe deshalb HTML-Farbencodes (Hex) verwendet. Der Hex Code zum beispiel für ein tiefes Lila lautet #663A82.
Hex Codes erstellen kannst du auf <a href="https://www.color-hex.com/color/663a82" target="blank">dieser Seite</a>.
Anstelle einer flächigen Hintergrundfarbe kannst du auch ein Bild im Hintergrund einfügen:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/0b6b355255d3d49dadf6a86e0ec18c3e/Bildschirmfoto_2020_07_15_um_10_23_13.png>
</div>
[[zurück->gesamtdesign]]
[[noch mehr Möglichkeiten bitte!->mehr]]
[[ab zum Hauptmenü->howtotwine]]Hintergrundmusik während des Spiels laufen zu lassen ist etwas komplizierter.
Wie beim Einfügen von Bildern kannst du Musik nicht erinfach in TWINE hochladen, sondern du verweist auf die Adresse einer Audiodatei.
Dieses englischsparchige Videotutorial zeigt, wie es geht:
<a href="https://youtu.be/bm9Lvd1Qg4Y" target="blank">zu YouTube</a>
[[zurück->gesamtdesign]]In TWINE arbeitest du die ganze Zeit mit Hyperlinks, die auf andere Abschnitte verweisen. Diese führen
<a href="https://digitaldurstig.de" target="blank">fort von hier</a>
Um auf eine externe Seiten außerhalb von TWINE zu verlinken, nutze diesen Code:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/b41a4d00d2136dacbde9fa4619465900/extern.png>
</div>
Das Einbinden von Bildern und GIFS ist etwas komplizierter.
Du kannst Bilder nämlich nicht in TWINE hochladen.
Bilder werden verlinkt. Sie müssen im Netz liegen und eine Internetadresse haben.
So wie hier:
<a href="https://padlet-uploads.storage.googleapis.com/363821064/16eb76028791afe2fea11887b1cd7a6f/media.jpeg" target="blank">Beispiel-JPEG</a>
Dieses Bild habe ich hier eingebettet:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/16eb76028791afe2fea11887b1cd7a6f/media.jpeg>
</div>
Und so wird's gemacht:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/5f662cb5b4c1fc8282007a2589fb536e/media.jpeg>
</div>
Du kannst Bilder zum Beispiel auf einer eigenen Website, Dropbox oder in einem Padlet hochladen und dann ihre Bildadresse kopieren.
[[zurück zur Übersicht->howtotwine]]
So lässt du einen 20-seitigen Würfel rollen:
[Eine (random: 1,20)!!]
[[nochmal!->zufall]]
Und so sieht das in TWINE aus:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/c8cd642f25ad93a0b7fe943e3bbff573/wuerfel.png>
</div>
[[zurück->funktionen]]
An dieser Stelle spielen wir noch einmal eine Stelle aus dem BeiSPIEL:
WENN wir dem Bettler eine Münze geben und er uns daraufhin eine Kornblume schenkt (Bedingung/if-Condition), DANN können wir die bullige Türsteherin mit der Blume betören. Haben wir die Blume nicht, haut sie uns zu Klump.
Treffen wir auf die Türsteherin, wird unser Spiel checken, ob die Bedingung "SPIELER hat eine Kornblume" erfüllt ist (true) oder nicht (false).
Spiele die Abschnitte durch und ich zeige dir dabei die Funktionen, dann wird es klar:
[[und los!->bettlervariable]]
[[zurück->funktionen]]Wenn du diesem Link folgst, springst du nach 3 Sekunden automatisch zurück. Alles was in dem folgenden Abschnitt geschieht, wird rückgängig gemacht:
[[Ausprobieren->springbeispiel]]
Und so sieht die Seite in TWINE aus:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/25e0402df782d570318416c1d1b0618a/springen.png>
</div>
[[zurück->funktionen]]
Wenn du schon eine fertige TWINE-Geschichte gespielt hast, sind dir sicherlich die Rückwärts-/Vorwärts-Pfeile an der linken Seite aufgefallen.
Damit können Spielende Entscheidungen rückgängig machen und "schummeln".
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/8c57c41d703a7ecc46525b7201f4dc95/undoredobutton.png>
</div>
Möchtest du die Rückwärts-/Vorwärts-Funktion unsichtbar machen, nehme diese Änderung im Stylesheet vor:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/762ef2d6c288566464ef402461167666/undoredo.png>
</div>
[[zurück->gesamtdesign]]Mit einem Click-Befehl kannst du Text in einer TWINE-Story sichtbar machen, ohne auf eine neue Seite springen zu müssen:
Mal sehen, was sich hinter dem Gerümpel im Keller verbirgt:
* [hinter den Fässern]<c1|(click: ?c1)[: Eine Rattenparty. Besser nicht stören.]
* [unter der Treppe]<c2| (click: ?c2)[: Ranzige Boxen mit vergilbten Comicheften.]
* [zwischen den Kartoffelsäcken]<c3| (click: ?c3)[: Ein Loch in eine andere Dimension. Cool!]
So geht's:
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/e3c8cbb733cad944fd1c5bb431b76bb4/aufdecken.png>
</div>
[[zurück->funktionen]]Du hüllst dich in deinen Umhang, als der Regen in kleinen Wasserfällen von den krummen Dächern der Unterstadt aufs Pflaster klatscht.
(event: when time > 5s)[In deinen Taschen die geheime Zutat, die du dem Zwergenkoch Langosch überbringen sollst. Er arbeitet im Haarigen Hammel.
[[Klingt nett.->bettler]]
[[Was für 'ne fiese Spelunke.->bettler]]](text-style: "outline")[Zum Haarigen Hammel]
prangt auf dem Schild vor der Tür, aus dem dir nun kehliges Gelächter und Biergeruch entgegenwehen.
(event: when time > 5s)["$char!", hört ihr da jemanden rufen.
Ein zerlumpter Bettler humpelt auf dich zu.
"Habt ihr eine Münze für einen alten Veteranen, $char?“
[["Äh, sorry, hab gerade nix."->verzieh]]
[["Aber natürlich, guter Mann!"->muenze]]
[["Verzieh dich, du Lump!."->verzieh]]]
Der Bettler strahlt dich an, als er die Münze entgegen nimmt, dankt dir und schenkt dir eine **Kornblume**. Dann läuft er die Gasse hinab.
(set: $bettlergeholfen to true)
(event: when time > 3s)[[[Du trittst in das Wirtshaus ein.->eingang]]]Der alte Mann schaut dich enttäuscht an und schlurft von dannen.
(set: $bettlergeholfen to false)
(event: when time > 3s)[[[Du trittst in das Wirtshaus ein.->eingang]]]Wir können dem Spielenden verschiedene Begriffe zur Auswahl geben, die dann später wieder auftauchen. So geht's:
[Wähle deinen Charakter für den Quatsch Quest aus:]
[* Charakter: (cycling-link: bind $name, "Kriegerin", "Händler", "Jägersfrau", "Schelm")]
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/fd283497bc2a3a4557feba6d0ae3f111/cyclinglink.png>
</div>
[[weiter->gesetzterlink]]
Ein zerlumpter Bettler humpelt auf dich zu.
"Habt ihr eine Münze für einen alten Veteranen, **$name**?“
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/61c0bcfc473e809e3518394232d035b1/name.png>
</div>
[[zurück->funktionen]](t8n: "rumble")[**"Nicht so schnell, $char!"**]
(event: when time > 2s)[Eine bullige Türsteherin stellt sich dir in den Weg.]
(event: when time > 4s)["Wir sind dicht, hau ab."
(if: $bettlergeholfen is true)[[Eure Augen sind so blau wie diese Blume. Nehmt sie! ->inswirtshaus]]
(if: $bettlergeholfen is false)[[Zur Seite, Schätzchen, oder ich werde ungemütlich!!!->kampf]]]
Du bist nun im Schankraum des Haarigen Hammels.
Überall Gejohle, Schnaps und Würfelspiel.
Wie geht es weiter?
[[in der Küche nach Langosch sehen->kueche]]
[[eine Runde mitwürfeln->wuerfel]]
[[in den Keller hinabsteigen->keller]]
#BÄM!
(event: when time > 2s)[Die Türsteherin kann Karate.]
(event: when time > 3s)[Sie haut dich zu Klump.]
(event: when time > 4s)[Game Over ...]
(event: when time > 5s)[[[neuer Versuch->bettler]]]Du nimmst an einem der Tische Platz und versuchst dein Glück.
... lässt deinen 20-seitigen Würfel rollen ...
(event: when time > 4s)["Eine (random: 1,20)!!"]
(event: when time > 6s)[[[Nochmal!->wuerfel]]
[["Ok, ich muss weiter.->inswirtshaus]]](t8n: "shudder")[IHHH!!! EKLIG!!!]
(event: when time > 1s)[... und kein Langosch zu sehen ...]
(event: when time > 2s)[Nix wie weg!]
(live:4s)[(undo:)]
Hier steht alles voller Gerümpel.
Mal sehen, was sich hier verbirgt.
* [hinter den Fässern]<c1|(click: ?c1)[: Eine Rattenparty. Besser nicht stören.]
* [unter der Treppe]<c2| (click: ?c2)[: Ranzige Boxen mit vergilbten Comicheften.]
* [zwischen den Kartoffelsäcken]<c3| (click: ?c3)[: [[Da schlummert ja Langosch! He, wach auf, Schlafmütze!->langosch]]](text-style: "blurrier")["Was, wie, wo?]
(text-style: "blur")[Ich muss eingeschlafen sein ...]
(event: when time > 4s)[Hast du meine Zauberzutat?]
(event: when time > 7s)[Vielen Dank, hier hast du ein paar Abenteuerpunkte.
Was willst du damit tun?"
[[zurück zum Hauptmenü wandern->howtotwine]]
[[selber eine erste Geschichte in TWINE schreiben->firststeps]]]
Es stinkt hier!!!
Rette sich wer kann!!!!!
(live:3s)[(undo:)]
Mit welchen Codes du das Design in deinem Stylesheet oder über Tags auf einzelnen Seiten verändern kannst, erfährst du auf diesem englischsprachigen <a href="https://www.youtube.com/playlist?list=PLklITFhXtPCCKadv-0Gcbqoj3OCev695D" target="blank">YouTube-Kanal</a>.
Wenn du noch viel mehr über TWINE erfahren willst, kannst du dich ins englischsprachige Wiki wühlen. Dieses wird von der Community um TWINE gepflegt: <a href="https://twinery.org/wiki/twine2:guide" target="blank">zum Wiki</a>.
Du möchtest TWINE-Codes griffbereit haben?
Dazu empfehle ich dir <a href="https://docs.google.com/document/d/1Jw9iXwr_tScmslq_PCzGFzyhEXss9wDxtD4Sg1dbtZ8/edit" target="blank">Neles Spickzettel</a>.
[[zum Hauptmenü->howtotwine]]Ein zerlumpter Bettler humpelt auf dich zu.
"Habt ihr eine Münze für einen alten Veteranen?“
[["Aber natürlich, guter Mann!"->muenzeif]]
[["Verzieh dich, du Lump!."->verziedichhif]]
Der Bettler strahlt dich an, als er die Münze entgegen nimmt, dankt dir und schenkt dir eine **Kornblume**. Dann läuft er die Gasse hinab. (set: $habeinekornblume to true)
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/05456d780b49c37d3b188765f26e9a1e/kornblumerhalten.png>
</div>
[[Du trittst in das Wirtshaus ein.->wirtshausif]]
[[einen Schritt zurück->bettlervariable]]Der alte Mann schaut dich enttäuscht an und schlurft von dannen. (set: $habeinekornblume to false)
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/510b40a17157d4e2ca076e292c4de582/keineblume.png
>
</div>
[[Du trittst in das Wirtshaus ein.->wirtshausif]]
[[einen Schritt zurück->bettlervariable]]**"Nicht so schnell!"**
Eine bullige Türsteherin stellt sich dir in den Weg.
"Wir sind dicht, hau ab."
(if: $habeinekornblume is true)[[Eure Augen sind so blau wie diese Blume. Nehmt sie! ->wirtshausthen]]
(if: $habeinekornblume is false)[[Zur Seite, Schätzchen, oder ich werde ungemütlich!!!->kampfthen]]
<style> img {
max-width: 100%;
max-height: 100%;
}
</style>
<img
src=https://padlet-uploads.storage.googleapis.com/363821064/c3207b9282fbc49ad4b51e3ab838e19d/wirtshaus_truefalse.png>
</div>
Du hast es ins Wirtshaus geschafft!
[[Yay!->variablen]]Die Türsteherin setzt dich vor die Tür...
[[So ein Mist!->variablen]]