KURZFASSUNG (für das Geschichtsformat »SugarCube 2.x.x«):
CSS im Stylesheet definieren: .weiss {background-color: white;}
Verwendung: Für die ganze Passage mit dem +Tag-Button und add einbinden
Verwendung: Für Teil einer Passage mit class="weiss" in HTML-Befehlen
CASCADING STYLE SHEET:
CSS steht für »Cascading Style Sheet« und dient u.a. der Formatierung von Texten. CSS läßt sich zentral verwalten, zu Beginn einer Passage definieren oder direkt in einen HTML-Befehl schreiben.
CSS LOKAL DEFINIEREN:
Legt man CSS innerhalb einer Passage an, ist es auch nur dort verfügbar (man spricht von »lokal«). Auf jeder weiteren Passage, auf der es zum Einsatz kommen soll, müssten Sie es erneut definieren. Daher sollten Sie auf diese Methode nur ausnahmsweise zurückgreifen und Ihr CSS besser zentral anlegen und verwalten (siehe weiter unten).
Möchte man aber doch CSS für eine einzelne Passage definieren wollen, sollte man dies am besten ganz oben zu Beginn der Passage tun:
<html>
<style type="text/css">
.weiss {background-color: white;}
</style>
</html>
Man verwendet das CSS dann im Zusammenspiel mit einem HTML-Befehl:
<div class="weiss">Hier steht ein Text in weißer Schrift</div>
Eine andere Möglichkeit für lokal begrenztes CSS besteht darin, die CSS-Anweisung direkt in den einzelnen HTML-Befehl zu schreiben:
<div style="font-size: 150%;">Text in 150%-Vergrößerung</div>
ZENTRALES CSS ANLEGEN UND VERWALTEN:
Vorzugsweise sollten Sie CSS-Befehle in das Stylesheet von »Twine« schreiben. Öffnen Sie dazu in »Twine« links unten über das schwarze Dreieck den Eintrag »Stylesheet der Geschichte bearbeiten«.
VERWENDUNG VON CSS-STYLESHEETS IN TWINE:
Einige CSS-Anweisungen, die man in das Stylesheet schreibt, wirken unmittelbar in »Twine« (zum Beispiel body). Andere müssen erst mit ihrem Namen auf der jeweiligen Passagen oben mit der +Tag-Funktion eingebunden werden (add drücken nicht vergessen). Sie haben dann einen Einfluss auf die ganze Passage. Um CSS begrenzt auf der Seite in einem HTML-Tag zu verwenden, schreibt man (beispielhaft):
<div class="weiss";>Hier steht ein Text in weißer Schrift</div>
STYLESHEET DER GESCHICHTE BEARBEITEN:
Die Befehle in einem Stylesheet können in einer Zeile geschrieben werden; bei längeren Anweisungen erhöht man die Lesbarkeit, wenn man mit Zeilenumbrüchen arbeitet.
Also statt:
body {font-family: Verdana, Impact, sans-serif;font-size: 150%;}
Besser:
body {
font-family: Verdana, Impact, Helvetica, sans-serif;
font-size: 150%;
background-image: url("BildOrdner/BildName.png");
background-color: pink;
}
TYPISCHE CSS-BEFEHLE:
BODY: siehe oben - Ändert man den body-Tag stellt man zum Beispiel für alle Passagen die Schriftart, Farbe und ähnliches ein. Farben lassen sich mit englischen Farbnamen bestimmen. Statt Farbnamen wie »pink« kann man ebenfalls die sechsstellige RGB-Hex-Notation verwenden. Als Beispiel: color: #ff0000; - ergibt die Farbe rot
UI-BAR: entfernt das linke Menü im SugarCube-Format
#ui-bar {
display: none;
}
STORY: Rückt den Inhalt nach Entfernen der ui-Bar wieder nach links
#story {
margin-left: 3em;
}
A: Überschreibt das Standard-Aussehen für alle Links in der Story
a {
color:#ffffff;
}
PASSAGE: Beeinflusst die Box um den Inhalt einer Passage. Muss im Gegensatz zu den obigen Befehlen auf der Passage eingebunden werden.
.passage {
border: 1px solid red;
}
HR: Verändert das Aussehen aller horizontaler Linien einer Story mit den angegebenen Werten. Wirksam erst, wenn man in einer Passage den Befehl <hr> geschrieben hat.
hr {
width: 100%;
height: 5px;
background: black;
}
EIGENE CSS-BEFEHLE:
Man kann auch eigene CSS-Befehle erfinden. Diese beginnen dann mit einem Punkt (class - nur in besonderen Fällen sollten Sie den Hash-Tag (# - id) verwenden). Danach folgt der eigene Befehlsnamen. Beim Befehlsnamen sollte man nicht die Namen von Standardbefehlen nehmen (also zum Beispiel .body) und deutsche Sonderzeichen vermeiden:
.weiss {
background-color: white;
}
Man kann diesen Befehl dann auf zwei Arten verwenden. Man fügt ihn in einer Passage oben mit dem +Tag-Button unter seinem Namen ein und drückt add. Dann wird die gesamte Passage mit einem weißen Hintergrund angezeigt. Oder man verändert nur einen bestimmten Textbereich, indem man den CSS-Befehl innerhalb eines HTML-Tags anspricht.
Beispiel: mehr dazu siehe unter [[HTML]]
<div class="weiss">Nur Hintergrund im div-Bereich wird weiß</div>
WEITERE BEISPIELE FÜR EIGENE CSS-BEFEHLE:
FONTBLACK: Ändert die Schriftfarbe in schwarz
.fontblack {
color: black;
}
WEG:HOVER: So formatierter Text verschwindet bei Berührung mit der Maus
.weg:hover {
opacity: 0;
transition: 1s all ease;
}
Verwendung in einer Passage (bespielhaft):
<span class="weg">Rühr mich nicht an</span>
BESTEHENDE CSS-BEFEHLE ERWEITERN:
Bestehende HTML-Befehle (zum Beispiel Anchor-Tag) können mit eigenen Anweisungen erweitert werden. Diese werden dann in der Passage oben mit dem +Tag und dem Erweiterungsnamen eingefügt oder in einem HTML-Befehl:
LINK-WHITE A: Linkfarbe nur in einer einzelnen Passage ändern. Dazu den Befehlsnamen link-white in einer Passage oben bei +Tag einfügen und add drücken oder innerhalb eines HTML-Befehls ansprechen.
.link-white a {
color:#ffffff;
}
ELEMENTE MIT CSS POSITIONIEREN:
CSS eignet sich, um Elemente auf der Passage genau zu positionieren. Dazu kann man zum Beispiel in der Passage oder im Stylesheet einen eigenen CCS-Befehl schreiben (aber auch einen HTML-Befehl wie <div> insgesamt verändern):
.kasten {width:25%; height:25%; border:2px solid #0000ff;}
#abs {position:absolute; top:0px; left:20%;}
#fix {position:fixed; bottom:30px; right:20px;}
Man beachte den Unterschied in der Notation zwischen Punkt für »pos« und dem Hash-Zeichen für »abs« und »fix«. Die Argumente »absolute« und »fixed« legen fest, ob zum Beispiel der Inhalt einer Passage beim Scrollen mitbewegt wird oder nicht. Man sieht den Effekt aber erst, wenn es auch genügend Inhalt auf der Seite gibt, so dass in einem Browserfenster die Scrollbalken angezeigt werden; möglich sind als Angaben auch relative und static, Werte werden in px oder % angegeben.
Aufruf der Anweisung in der Passage - beispielhaft - in einem div-Tag:
<div class="pos" id="abs">Inhalt scrollt mit</div>
<div class="pos" id="fix">Inhalt scrollt nicht mit</div>
Man beachte den Unterschied im Aufruf zwischen »class« und »id«
BESONDERE TEXTEFFEKTE:
Mit CSS und der HTML-Rendering-Engine »WebKit« kann man ungewöhnliche Texteffekte generieren:
@-webkit-keyframes fade-in {
0%,
to {opacity: 0}
100% {opacity: 1}
}
.fade-in {
text-decoration: none;
animation: fade-in 3s;
}
Aufruf der Anweisung in der Passage - beispielhaft - in einem div-Tag:
<div class="fade-in">Dieser Text wird langsam eingeblendet</div>
KURZFASSUNG (für das Geschichtsformat »SugarCube 2.x.x«):
Bild: <img src="Pfad/BildName.png" alt="Alternativer Text">
Audio: <audio src="Pfad/DateiName.mp3" autoplay controls />
Video: <video src="Pfad/DateiName.mp4" autoplay controls>Ersatztext</video>
YouTube: Rechtsklick auf das YouTube-Video und Einbettungscode kopieren
BILDER, TÖNE UND VIDEOS EINBINDEN:
Als Medien lassen sich Bilder, Töne und Videos einbinden. Für Bilder kommen die Formate png, jpg, gif und svg in Frage, Töne müssen im mp3-Format, wav oder als ogg vorliegen, bei Videos empfiehlt es sich mit mp4-Dateien zu arbeiten.
Wenn Sie mit Medien arbeiten, sollten Sie sich eine Ordnerstruktur überlegen. Es gibt zum Beispiel einen Projektordner namens »Abenteuer«, darin die Unterordner »Bild«, »Audio« und »Video«; kopieren Sie immer erst alle Medien in diese Ordner, bevor Sie sie in »Twine« einbinden.
MEDIEN ABSPIELEN:
In der Offline-Version werden Medien, die mit einem RELATIVEN PFAD (siehe unten) eingebunden wurden, nicht angezeigt, wenn man den Spielen-Button klickt. Exportieren Sie daher die Datei mit dem schwarzen Dreieck unten links (»Als Datei veröffentlichen«). Wählen Sie einen Speicherort (idealerweise haben Sie sich einen Projektordner angelegt). Danach müssen Sie die Datei im Projektordner händisch starten. Spätestens beim zweiten Export werden Sie gefragt, ob Sie die bestehende Datei überschreiben wollen. Antworten Sie mit »Ja«.
ABSOLUTER PFAD vs. RELATIVER PFAD:
Zum Einbinden von Medien muss deren Speicherort genannt werden. Damit die Verlinkung später auch auf anderen Geräten gefunden und die Medien korrekt angezeigt werden, sollte man vorzugsweise mit RELATIVEN PFADEN arbeiten. Das heißt, der Pfad wird vom Speicherort der Twine-(HTML)-Datei aus angegeben.
Beispiel: Die Twine-Datei liegt lokal auf dem eigenen Rechner in einem Projektordner namens »Abenteuer«, der einen Unterordner »Bild« enthält. Dann lautet der relative Pfad zum Bild:
"Bild/BildName.png"
ABSOLUTE PFADE sollte man nur verwenden, wenn die Medien auf einem dauerhaft verfügbaren Speicherplatz im Internet liegen. Bei pixabay.com könnte man beispielsweise mit Rechtsklick auf ein Bild die Bildadresse kopieren und dann als Pfadangabe verwenden.
Es muss auf jeden Fall immer die Dateiendung genannt werden (hier .png).
BILD EINFÜGEN:
Bilder werden mit dem img-Tag eingebunden; als Format kommen in Frage png, jpg, gif und svg:
<img src="Bild/BildName.png" width="500" height="300" alt="Text">
Die Angaben für Höhe und Breite (width und height) sind optional. Werden sie nicht angegeben, ermitteln die meisten Browser eigenständig die benötigten Werte. Entsprechen die Werte nicht dem Seitenverhältnis des Bildes (aspect ratio) wird die Abbildung verzerrt. Das alt-Attribut ist nützlich, falls das Bild aus irgendwelchen Gründen nicht angezeigt werden kann. Dann wird der angegebene Text ausgegeben.
BILDER ALS LINKS:
Soll ein Bild als Verlinkung auf eine Passage dienen, wird der Befehl <<link>> benötigt:
<<link [img[Pfad/BildName.jpg][NameDerPassage]]>><</link>>
Man beachte die besondere Schreibweise des Pfades und des Bildnamems ohne Anführungszeichen. Mit einem Imagemap-Generator kann man auch schnell anklickbare Bilder produzieren und den dort generierten Quellcode dann in Twine kopieren: https://www.image-map.net
TON EINFÜGEN:
Töne werden mit dem Audio-Tag eingebunden; als Format kommen in Frage mp3, wav und ogg:
<audio src="Audio/DateiName.mp3" autoplay controls />
Autoplay weist »Twine« an, den Ton sofort beim Betreten der Passage abzuspielen. Ob das funktioniert hängt vom eingesetzten Browser und dessen Einstellungen ab. Will man sichergehen, dass der Ton auf jeden Fall abspielbar ist, sollte man noch den Ausdruck controls hinzufügen. Dann erscheinen die Abspielbuttons. Man beachte vor der hinteren schließenden spitzen Klammer den Schrägstrich (Slash).
TÖNE PER LINK ABSPIELEN:
Um Töne per Link in einer Passage zu starten, müssen sie vorgeladen werden. Das Vorladen erledigt man am besten auf der Startseite (oder in einer Extra-Passage namens StoryInit). Der Befehl zum Vorladen lautet:
<<cacheaudio "ErsatzName" "Pfad/DateiName.mp3">>
Man beachte die doppelten spitzen Klammern. Hat man den Ton vorgeladen, lässt er sich mit diesen Befehlen in der Passage abspielen und stoppen:
<<link "Name des sichtbaren Links">>
<<audio "ErsatzName" play>>
<</link>>
<<link "Name des sichtbaren Links">>
<<audio "ErsatzName" stop>>
<</link>>
Der Text in den Anführungszeichen ist beliebig wählbar.
VIDEO EINFÜGEN:
Videos können in »SugarCube« sowohl mit dem Befehl <video> als auch mit <iframe> eingebunden werden; als Format kommen in Frage mp4, ogv, webm, 3gp u.a.:
lokal: <video src="Pfad/DateiName.mp4" autoplay controls ></video>
lokal: <iframe src="Pfad/DateiName.mp4" autoplay controls></iframe>
YouTube: Rechtsklick auf das YouTube-Video und Einbettungscode kopieren
Werden keine Höhe und Breite (width und height) angegeben, ermittelt der Browser selber die benötigten Werte. Ansonsten sollten sie dem Seitenverhältnis des Videos entsprechen, um Verzerrungen zu vermeiden. Autoplay weist »Twine« an, das Video sofort beim Betreten der Passage abzuspielen. Ob das funktioniert hängt vom verwendeten Browser und dessen Einstellungen ab.
Will man sichergehen, dass das Video auf jeden Fall abspielbar ist, sollte man noch den Ausdruck controls hinzufügen. Dann erscheinen die Abspielbuttons.Man beachte das abschließende </video> bzw. </iframe>.
UNTERSCHIED <VIDEO> UND <IFRAME>:
Der Befehl <video> funktioniert nur in neueren Browsern, ältere Browser ignorieren ihn oder zeigen eine Fehlermeldung an. Der Befehl <iframe> wird aus Sicherheitsgründen in manchen Netzwerken blockiert.
Will man YouTube-Videos einbinden, funktioniert das nur mit <iframe>. Am einfachsten geht man auf die YouTube-Seite, klickt das Video dort mit rechter Maustaste an und wählt »Einbettungscode kopieren«. Diesen Code kopiert man dann direkt in die Passage.
KURZFASSUNG:
Seiten (Passagen) verlinken: [[NameDerPassage]]
»Twine« legt automatisch die in den Klammern genannnte Passage an.
BELIEBTE FEHLER:
Falsche oder fehlende (schließende) Klammern, überflüssige Leerzeichen, Groß- und Kleinschreibung (gilt auch für CSS, HTML und Variablen), falsches Geschichtsformat
ÜBERSICHT:
Unsere Hilfe bietet einen Einblick in die vielfältigen Möglichkeiten von »Twine«. Die Passage, in der Sie sich gerade befinden, präsentiert in Kurzform Themen wie »Formatierungen« oder »Einbinden von Medien«. Jedes hier angesprochene Thema wird zudem ausführlicher in jeweils eigenen Passagen vorgestellt.
Die Hilfe bezieht sich auf die Offline-Version des Programmes und das Geschichtsformat »SugarCube 2.x.x« (oder neuer). Die Online-Version und anderen Formate verwenden zum Teil abweichende Befehle.
SPEICHERN:
In der Offline-Version ist es manchmal nötig, die Datei mit »Als Datei veröffentlichen« zu exportieren, um einen verläßlichen Eindruck vom Aufbau der Seite zu erhalten. Dies gilt insbesondere, wenn externe Medien (Bilder, Töne, Videos) zum Einsatz kommen. Während der Arbeit an der Story müssen Sie aber sonst nicht speichern; »Twine« übernimmt das automatisch (standardmäßig lokal im Ordner »Dokumente«).
GESCHICHTSFORMAT ÄNDERN:
Überprüfen Sie immer als erstes, welches Geschichtsformat für Ihre Story eingestellt ist. Dazu klicken Sie in »Twine« links unten auf das schwarze Dreieck (Story Menü) und dann »Geschichtsformat ändern«. Wählen Sie »SugarCube 2.x.x« (oder neuer).
STARTPASSAGE SETZEN:
Eine erste Seite (in »Twine« auch »Passage« genannt) erstellen Sie mit dem Button rechts unten »+Abschnitt«. Doppelklicken Sie die neu entstandene Passage und ändern Sie »Unbenannter Abschnitt« in »Start« um. Klicken Sie außerhalb der Passage. Schieben Sie die Maus auf die Passage um das Kontextmenü anzuzeigen, und gehen Sie auf die drei Punkte. Stellen Sie sicher, dass »Start Story here« aktiviert ist. Es erscheint eine grüne Rakete (manchmal müssen Sie Ihre Story mit dem Home-Button links unten verlassen und dann neu öffnen, damit die Rakete angezeigt wird).
PASSAGEN VERBINDEN:
Passagen können, müssen aber nicht untereinander verbunden sein. Um eine Verknüpfung zu erreichen, nutzen Sie zwei eckige Klammern:
[[Auf zur nächsten Passage]]
»Twine« erzeugt eine Verzweigung zum Raum mit dem Namen »Auf zur nächsten Passage« an. Gibt es den Raum noch nicht, legt »Twine« ihn automatisch an.
Manchmal soll der anklickbare Link anders heißen als der Raum. Dann benötigt man den senkrechten Strich (Pipe):
[[Auf zur nächsten Passage|Raum Eins]]
Der anklickbare Link heißt jetzt »Auf zur nächsten Passage, die Passage selber aber »Raum Eins«. Achtung: Wenn Sie vor dem Pipe-Symbol eine Lücke lassen, entsteht eine andere Passage, als wenn dort keine Lücke ist. Ebenso sind Groß- und Kleinschreibung wichtig.
Links können auch auf externe Web-Seiten oder Dokumente verweisen. Es muss dann der vollständige Pfad genannt werden:
[[https://www.multimediamobile.de/sued]]
Will man Bilder zu anklickbaren Links machen, ist eine alternative Schreibweise mit <<link>> nötig:
<<link [img[Pfad/BildName.jpg][NameDerPassage]]>><</link>>
FORMATIERUNGEN:
»Twine« bietet sehr viele Möglichkeiten, das Aussehen der Schrift, des Hintergrundes und des Seitenaufbaus zu verändern. Hierfür kommen HTML, CSS und Markup zum Einsatz:
HTML: <b>Schriftschnitt fett<b>
CSS: <div style="font-weight:bold">Fett: Inline-CSS in HTML</div>
Markup: ''Zwei Apostrophe: Schriftschnitt fett.''
MEDIEN EINBINDEN:
In »Twine« lassen sich Bilder, Töne und Videos einbinden. Hierfür nennt man (vorzugsweise) den relativen Pfad zur Mediendatei:
Bild: <img src="Pfad/BildName.png" alt="Alternativer Text">
Audio: <audio src="Pfad/DateiName.mp3" autoplay controls />
Video: <video src="Pfad/DateiName.mp4" autoplay controls></video>
YouTube: Rechtsklick auf das YouTube-Video und Einbettungscode kopieren
KOMMENTARE:
Oft helfen Kommentare bei einer späteren Überarbeitung des Spiels die eigenen Entscheidungen (wieder) zu verstehen:
<!-- Hier steht ein Kommentar. Er wird im Spiel nicht angezeigt -->
/% Auch so kann ein Kommentar eingefügt werden %/
STORY ABSPIELEN:
Jede Passage lässt sich über das Kontextmenü der Passage separat abspielen. Die Seite wird dann in einem speziellen Debug-Modus (Fehlersuche-Modus) gestartet, dessen Aussehen man rechts unten auf der gestarteten Seite beeinflussen kann.
Wollen Sie die ganze Geschichte abspielen, drücken Sie auf den Spielen-Button rechts unten. Haben Sie Medien (Bild, Audio, Video) eingebunden, müssen Sie die Geschichte zunächst rechts unten über das schwarze Dreieck veröffentlichen (»Als Datei veröffentlichen«). Starten Sie dann händisch die entstandene HTML-Datei.
GESCHICHTE VERÖFFENTLICHEN:
Exportieren Sie die Datei in »Twine« mit dem schwarzen Dreieck unten links (»Als Datei veröffentlichen«). Wählen Sie einen Speicherort (idealerweise haben Sie sich einen Projektordner angelegt). Spätestens beim zweiten Export werden Sie gefragt, ob Sie die bestehende Datei überschreiben wollen. Antworten Sie mit »Ja«.
Sie erzeugen eine HTML-Datei. Diese können Sie anderen per E-Mail, über einen Cloud-Speicher oder als Download-Link zur Verfügung stellen. Wenn Sie externe Medien eingebunden haben, müssen Sie diese mitliefern. Sonst reicht die HTML-Datei.
ONLINE VERÖFFENTLICHEN:
Da es sich beim Twine-Ausgabeformat um eine HTML-Datei handelt, können Sie bei entsprechenden Zugriffsrechten Ihre Geschichte auf Ihrer eigenen Webseite veröffentlichen.
Alternativ kommen Webdienste wie [[http://textadventures.co.uk]], [[https://itch.io/]], [[https://glitch.com/~twine-starter]] oder [[https://github.com]] in Frage.
Standardmäßig heißen Startseiten im Internet index.html. Eventuell müssen Sie Ihre Geschichte links unten in »Twine« mit dem schwarzen Dreieck umbenennen.
KURZFASSUNG (für das Geschichtsformat »SugarCube 2.x.x«):
Direkt im Text: <h1>Große Überschrift</h1> - möglich h1 bis h6
Direkt im Text: <b>Fett</b>
Direkt im Text: <i>Kursiv</i>
HTML-FORMATIERUNGEN:
Das Geschichtsformat »SugarCube 2.x.x« erlaubt es, direkt im Text HTML-Formatierungen zu verwenden. Die Befehle stehen in spitzen Klammern, umfassen den Text und enden mit spitzen Klammern. Beispiel:
<h1>Große Überschrift</h1> - möglich h1 bis h6
Man beachte den Slash (Schrägstrich) bei der hinteren schließenden Klammer.
TYPISCHE HTML-BEFEHLE:
<b>Fett</b>
<i>Kursiv</i>
<hr> - horizontale Linie (benötigt keine schließende Klammer)
<p>Erzeugt einen Absatz</p>
<br> - Umbruch (benötigt keine schließende Klammer)
<div>Behandelt mehrere eingeschlossene Objekte als Gruppe</div>
<span>Wie div, aber der beeinflusste Bereich ist kleiner</span>
<ul type="Typ"><li>Listeneintrag mit angegebenem Typ</li></ul>
<ol type="Typ"><li>Listeneintrag mit Zahl</li></ol>
<blockquote>eingerücktes Zitat o. ä.</blockquote>
<center>Dieser Text wird auf der Seite zentriert</center>
<pre>Darstellung wie getippt (Lücken, Umbrüche, Einrückungen)</pre>
<!-- Hier steht ein Kommentar. Er wird im Spiel nicht angezeigt -->
/% Auch so kann ein Kommentar eingefügt werden %/
ATTRIBUTE:
Die meisten HTML-Befehle lassen sich mit Attributen erweitern. Typische Attribute sind align (Ausrichtung: left, center, right), width und height (Breite und Höhe in px) oder color (Farbnamen oder Hexadezimal):
<font color="red" size="200%">Roter Text mit 200%-Größe</font>
<div align="center">zentrierter Text</div>
Die Attribute lassen sich in vielen Fällen kombinieren und die HTML-Befehle schachteln:
<div align="center"><font color="red" size="200%">Text</font></div>
Manche HTML-Attribute gelten allerdings als veraltet. Man sollte daher vorzugsweise mit CSS formatieren.
TABELLEN:
Tabellen helfen, Inhalte zu strukturieren und zu positionieren:
<table width="500">
<tr style="color:#ff0000">
<td class="white">Hier steht derInhalt</td>
</tr>
</table>
Tabellen lassen sich wie im obigen Beispiel angedeutet mit zahlreichen Zusatzparametern in ihrem Verhalten und Aussehen beeinflussen. Jedes weitere <tr> macht eine neue Zeile auf, mit <td> öffnet man eine Zelle in der Zeile, wobei eine Zeile beliebig viele Zellen enthalten kann. Allerdings müssen alle Zeilen die gleiche Anzahl an Zellen enthalten.
Wem es zu umständlich ist, selber eine Tabelle anzulegen, kann auch auf einen Generator zurückgreifen und den dort generierten Quellcode in Twine kopieren: https://www.cssportal.com/html-table-generator
HTML UND CSS:
Man kann die HTML-Tags direkt in einer Passage mit CSS erweitern (siehe entsprechende Hilfe). Hier als Beispiel das div-Tag:
<div style="background-color: white">Weißer Farbhintergrund</div>
Statt Farbnamen wie white kann man auch sechsstellige RGB-Hex-Werte verwenden. Zum Beispiel rot: color: #ff0000;
CSS-STYLESHEET:
CSS-Anweisungen kann man in einem sogenannten Stylesheet vordefinieren und dann in einem HTML-Tag aufrufen:
<div class="weiss">Bereich mit weißem Hintergrund</div>
KURZFASSUNG (für das Geschichtsformat »SugarCube 2.x.x«):
''Fett'' - Achtung: keine Anführungszeichen, sondern zweimal Apostroph
!Level 1 Überschrift (bis 6 Ausrufezeichen für andere Größen möglich)
WAS IST MARKUP:
Markup ist eine vereinfachte Formatierungsanweisung wie sie auch zum Beispiel in Wikipedia verwendet wird.
FORMATIEREN MIT MARKUP:
''Fett'' - Achtung: keine Anführungszeichen, sondern zweimal Apostroph
//Kursiv//
__Unterstrichen__
==Durchgestrichen==
*Liste mit Punkt - Zeile muss linksbündig stehen, sonst keine Liste
#Liste mit Zahl am Anfang
Höher^^gestellt^^
Tiefer~~gestellt~~
> Einrückung
>> Doppelte Einrückung
@@Farbliche Hervorhebung@@
!Level 1 Überschrift (entspricht h1 in HTML) - geht bis Level 6
Die Markup-Anweisungen lassen sich auch kombinieren:
//''Fett und kursiv''//
Mehr Formatierungsmöglichkeiten gibt es mit CSS und HTML (siehe die Hilfe-Passagen dazu).
MASKIEREN:
Will man Zeichen verwenden, die auch in Markup vorkommen, muss man die Zeichen besonders behandeln (maskieren). Man bettet die Sequenz dann in drei Anführungszeichen:
"""Die Formatierung für //fett// wird nicht ausgeführt."""
KURZFASSUNG (für das Geschichtsformat »SugarCube 2.x.x«):
In »Twine« sind einige Passagen-Namen für besondere Seiten reserviert. Die Passagen müssen händisch angelegt werden und können dann befüllt werden. In der Regel ist es nicht nötig, auf diese besonderen Passagen direkt mit den eckigen Klammern zu verlinken.
STORYINIT:
Die Passage StoryInit (man beachte die Schreibweise) wird mit dem Start des Spiels geladen und ist gut geeignet, um Variablen zu initialisieren oder Audiodateien vorzuladen.
PASSAGEHEADER:
Der Inhalt der Seite PassageHeader (man beachte die Schreibweise) wird als Kopfzeile auf jeder Passage angezeigt.
PASSAGEFOOTER:
Der Inhalt der Seite PassageFooter (man beachte die Schreibweise) wird als Fußzeile auf jeder Passage angezeigt.
STORY.GET():
Um die von Twine gespeicherten Eigenschaften einer Passage abzurufen, gibt es Story.get(). In die Klammer muss der Name der Passage:
<<set $passage to Story.get("NameDerPassage")>>
Der Titel der Passage lautet: <<print $passage.title>>
Der Inhalt der Passage lautet: <<print $passage.text >>
Den Inhalt einer fremden Passage kann man aber auch mit <<include>> anzeigen.
KURZFASSUNG (für das Geschichtsformat »SugarCube 2.x.x« - Übersicht):
back, either, goto, include, link, linkreplace, nobr, previous, print, random, repeat, replace, run uibar, slice, story.get, textbox, timed, toggleclass, visited, widget, javascript
BESONDERE BEFEHLE IN TWINE (SugarCube):
Twine hält eine ganz Reihe besonderer Befehle bereit. Ausführlich werden sie hier besprochen: [[http://www.motoslave.net/sugarcube/2/]].
Die meisten Ergebnisse (Rückgabewerte) von Funktionen oder Macros müssen zunächst einer Variablen zugewiesen werden, bevor man sie ausgibt. Ohne eine solche Zuweisung behandelt Twine Funktionen und Macros oft wie normalen Text:
<<set $ergebnis = funktion_macro("uebergabeWert")>>
$ergebnis
In Kombination mit Variablen und Passagen kann mehr sehr dynamischen Inhalt generieren. Nachstehend eine kleine Auswahl an Möglichkeiten.
<<BACK>>:
Der Befehl <<back>> schickt jemanden zurück zur letzten besuchten Seite. Der Text in den Anführungszeichen ist beliebig wählbar:
<<back "Name des angezeigten Links">>
<<BUTTON>>:
Mit <<button>> erzeugt man einen Button mit frei wählbarem Text:
<<button [[AngezeigterLink|NameDerPassage]]>><</button>>
EITHER():
Die Funktion either() gibt per Zufall einen der übergebenen Werte zurück:
<<set $auswahl = either("a", "b", "c")>>
$auswahl
Als Ergebnis enthält man entweder a, b oder c.
<<GOTO>>:
Mit diesem Befehl kann man zur angegebenen Passage springen:
<<goto "NameDerPassage">>
Die Passage, zu der gesprungen werden soll, muss bereits existieren, sonst gibt es eine Fehlermeldung.
<<INCLUDE>>:
Mit dem Befehl <<include>> integriert man den Inhalt einer anderen Passage auf die aktuelle Passage. Damit ließen sich unter anderem Kopf- und Fußzeilen generieren (siehe aber auch »Besondere Passagen«):
<<include "NameDerPassage">>
<<LINK>>:
Erzeugt einen anklickbaren Link. Im Gegensatz zur Arbeit mit eckigen Klammern wird aber nicht automatisch eine neue Passage anlegt bzw. beim Klicken auf den Link nicht auf eine neue Passage gesprungen:
<<link "Ja">><<set $antwort = "ja">><</link>>
<<link "Nein">><<set $antwort = "nein">><</link>>
Das obige Beispiel zeigt, wie eine Variable im Spiel durch Aktionen von Nutzer:innen neu gesetzt werden kann. Außerdem kann man mit <<link>> Bilder zu anklickbaren Objekten machen:
<<link [img[Pfad/BildName.jpg][NameDerPassage]]>><</link>>
Man beachte die Schreibweise des Pfades ohne Anführungszeichen.
<<LINKREPLACE>>:
Ein angeklickter Link wird durch einen Text, Bild, Audio oder Video ersetzt:
<<linkreplace "Nimm die Truhe.">>
<<set $truhe = true>>
Du besitzt jetzt eine Truhe.
<</linkreplace>>
Im obigen Beispiel kann der Link »Nimm die Truhe« angeklickt werden. Dadurch wird die Variable $truhe auf »true« gesetzt und der Link durch den nicht anklickbaren Text »Du besitzt jetzt eine Truhe« ersetzt.
<<NOBR>>:
Mit <<nobr>> verhindert man Umbrüche:
<<nobr>>
Ein Satz in einer Zeile.
Trotz Umbruch steht dies in der selben Zeile.
<</nobr>>
Dieser Befehl ist nützlich, wenn man Programmierzeilen durch Umbrüche lesbarer machen möchte; sonst übernimmt »Twine« die Umbrüche oft auch für die HTML-Seite.
PREVIOUS():
Mit previous() kann man zur zuvor besuchten Passage zurückkehren:
<<link "TextDesAngezeigtenLinks" previous()>><</link>>
Hier muss der Befehl <<link>> verwendet werden, da die Schreibweise mit eckigen Klammern sonst aus dem Ausdruck previous sofort eine neue Passage generiert.
<<PRINT>
Dieser Befehl gibt den Inhalt innerhalb der spitzen Klammern aus:
<<print "Auszugebener Inhalt muss in Anführungszeichen stehen">>
<<print>> ist sehr nützlich bei der Arbeit mit Variablen.
RANDOM():
Mit random() erzeugt man eine zufällige Zahl innerhalb einer Auswahl:
<<print random(1,4)>>
Kombiniert man die Funktion mit einem Array (ein Variablentyp) kann man zum Beispiel per Zufall Links zu Passagen anzeigen lassen:
<<set $richtung = ["Westen", "Osten", "Norden", "Süden"]>>
<<set $index = random(1,4)>>
[[$richtung[$index]]]
Siehe aber auch die Funktion EITHER().
<<REPEAT>>:
Dieser Befehl wiederholt einen Vorgang im angegebenen Zeitfenster:
<<repeat 3s>>
Gib alle 3 Sekunden diesen Satz erneut aus.
<</repeat>>
Achtung: Endlosschleife - da es keine Abbruchbedingung gibt, wird die Befehlsfolge immer und immer wieder ausgeführt. Lösung:
<<set _durchlauf = 0>>
<<repeat 3s>>
<<print _durchlauf>><<set _durchlauf = _durchlauf + 1>>
<<if _durchlauf == 5>><<stop>><</if>>
<</repeat>>
Man könnte aber auch zum Beispiel nach dem dritten Durchlauf mit <<goto "PassagenName>> zu einer anderen Passage springen. Setzt man die Zeit für die Wiederholungen zu klein an, kann es vorkommen, das der Befehl alle anderen Aktionen von Spieler:innen auf der Seite blockiert.
<<REPLACE>>:
Im Zusammenspiel mit <<link>> kann durch Klicken ein Wert in der aktuellen Passage verändert werden:
<<set $wert = 3>>
<<link "Klick mich, um den Wert unten zu ändern">>
<<replace "#wertAenderung">><<print $wert>><</replace>>
<</link>>
Wertänderung durch Klicken oben: <span id="wertAenderung">10</span>
Klickt man auf den Link, wird der Wert 10 durch den Wert 3 ersetzt.
<<RUN UIBAR.STOW()>>:
Dieser Befehl klappt in »SugarCube« die seitliche Menübar automatisch ein:
<<run UIBar.stow()>>
<<run UIBar.unstow()>> klappt das Menü wieder aus. Will man die Menübar dauerhaft entfernen, geht das u.a. über CSS-Stylesheet.
SLICE():
Mit der Funktion slice() kann man die Ausgabe einer Textvariable steuern. Folgende Anweisung entfernt den ersten Buchstaben der Variablen $meinText:
<<print $meinText.slice(1)>>
STORY.GET():
Um die von Twine gespeicherten Eigenschaften einer Passage abzurufen, gibt es Story.get(). In die Klammer muss der Name der Passage:
<<set $passage to Story.get("NameDerPassage")>>
Der Titel der Passage lautet: <<print $passage.title>>
Der Inhalt der Passage lautet: <<print $passage.text >>
Den Inhalt einer fremden Passage kann man aber auch mit <<include>> anzeigen.
<<TEXTBOX>>:
Nutzen Sie <<textbox>> um eine Abfrage zu gestalten:
Eingabe: <<textbox "$NameDerVariable" "Name eintragen" "Hallo">>
$NameDerVariable ist die Variable, in die die Eingabe geschrieben wird, "Name eintragen" ist der Standardtext, der im Eingabefeld angezeigt wird (der kann natürlich auch anders lauten oder mit "" leer bleiben), "Hallo" ist die Passage, zu der nach Betätigung der ENTER-Taste gesprungen wird. Die Passage muss vorher händisch angelegt werden, sonst gibt es eine Fehlermeldung beim Versuch die Passage zu besuchen.
<<TIMED>>:
Einen zeitweise versteckten Text erhält man mit <<timed>>:
<<timed 5s>>
Nach fünf Sekunden wird dieser Text angezeigt.
<</timed>>
Man kann natürlich auch Links zu Passagen auf diese Art zeitweise verbergen.
<<TOGGLECLASS>>:
Dieser Befehl holt einen CSS-Befehl aus dem Stylesheet in eine Passage. Das entspricht dem händischen hinzufügen in einer Passage mit dem +Tag-Button:
<<toggleclass "body" "weiss">>
Das funktioniert auch, wenn man mit einer Variablen arbeitet:
<<set $welcheKlasse = "weiss">>
<<toggleclass "body" $welcheKlasse>>
VISITED():
Diese Funktion ermittelt, wie oft eine Seite besucht wurde. Man speichert den Wert in eine Variable und gibt diese aus:
<<set $besuche to visited("NameDerPassage")>>
$besuche
Statt nur den Wert der Variablen auszugeben, kann man sie auch nutzen, um den Fortgang der Geschichte zu beeinflussen (anzuzeigende Links oder Passagen).
WIDGETS:
Widgets sind kleine in sich geschlossene Programme, die man in das Hauptprogramm einfügen kann. Das nachfolgende Widget wird zu Beginn einer Passage eingefügt und lässt eine Zeichenkette nach und nach erscheinen:
\<<widget typewriter>>
\ <!-- Create a SPAN with an ID -->
\ <span id="typewriter"></span>
\ <!-- In SugarCube, arrays start at 0 -->
\ <<set _textArrayLength to 0>>
\ <!-- Repeat every second -->
\ <<repeat 0.1s>>
\ <!-- Test: is textArrayLength greater than length $args[0] -->
\ <<if _textArrayLength gte $args[0].length>>
\ <<stop>>
\ <<else>>
\ <!-- Append the current position to existing characters -->
\ <<append "#typewriter">>$args[0][_textArrayLength]<</append>>
\ <!-- Update the length -->
\ <<set _textArrayLength++>>
\ <</if>>
\ <</repeat>>
\<</widget>>
Aufgerufen wird das Widget in der Passage mit seinem Namen und eventuellen Parametern:
<<typewriter "Hello, world">>
JAVASCRIPT:
Eine Einführung in die verfügbaren JavaScript-Funktionen würde den Rahmen dieser Hilfe sprengen. Als Beispiel hier nur die Verwendung der Funktion date():
<<set $zeit to new Date()>>
Aktueller Monat: <<print $zeit.getMonth()>>
Aktueller Tag: <<print $zeit.getDay()>>
Aktuelle Stunde: <<print $zeit.getHours()>>
Aktuelle Minute: <<print $zeit.getMinutes()>>
Aktuelles Jahr: <<print $zeit.getFullYear()>>
JacaScript kann direkt in einer Passage definiert werden oder zentral über »JavaScript der Geschichte bearbeiten« (links unten das schwarze Dreieck).
Für mehr Informationen finden Sie hier einen guten Einstieg:
[[https://www.youtube.com/watch?v=JjRoHAO6nAQ]]
KURZFASSUNG (für das Geschichtsformat »SugarCube 2.x.x«):
Variable in einer Passage anlegen: <<set $anzahl = 1>>
Variableninhalt in einer Passage anzeigen: $anzahl
ARBEITEN MIT VARIABLEN (SugarCube):
Twine bietet die Möglichkeit, mit Variablen zu arbeiten. Damit kann man auf das Verhalten der Nutzer:in reagieren und zum Beispiel bestimmte Passagen erst bei Erreichen eine vorher festgelegten Punkzahl im Spiel freischalten.
Variablen werden in Twine mit dem Dollar-Zeichen angelegt (Beispiel: $variablenName). Der Name ist fast beliebig wählbar, es gibt aber auch ein paar geschützte Bezeichnungen, die intern von »Twine« verwendet werden. Vermeiden Sie deutsche Sonderzeichen.
Variablen muss man vor ihrem ersten Aufruf mit einem Wert belegen (initialisiert), sonst werden sie wie normaler Text behandelt.
Variablen sind case-sensitive. Das heißt, es wird zwischen Groß- und Kleinschreibung unterschieden. $variable ist also etwas anderes als $Variable.
Variablen in »Twine« sind global. Das heißt, eine Variable kann in jeder beliebigen Passage unter ihrem Namen angesprochen werden. Die Gefahr ist dabei, dass man eine Variabel in einer Passage ändert, was sofort Auswirkungen auf alle anderen Passagen haben kann. Darum gibt es auch lokale Variablen, die man mit einem Unterstrich als erstes Zeichen erzeugt (Beispiel: _variablenNamen). Verlässt man die Passage, ist der Wert der lokalen Variable verloren.
VARIABLEN INITIALISIEREN:
Variablen müssen vor dem ersten Einsatz initialiert werden:
<<set $anzahl = 1>> oder <<set $anzahl to 1>>
Jetzt ist die Variable $anzahl mit dem Zahlenwert 1 belegt.
<<set $meinText = "Hallo">> oder <<set $meinText to "Hallo">>
Jetzt ist die Variable $meinText mit der Zeichenkette (string) "Hallo" belegt.
Schreibt man nun in einer Passage $anzahl wird statt des Ausdrucks $anzahl der Inhalt der Variable angezeigt, also im Beispiel 1.
Man kann eine Variable jederzeit mit dem set-Befehl neu belegen:
<<set $meinText = 1>>
Jetzt enthalt die Variable $meinText keinen Text mehr, sondern eine Zahl. Mit <<unset>> löscht man eine Variable komplett.
MIT VARIABLEN RECHNEN UND INHALTE ANHÄNGEN:
Sehr oft möchte man den Inhalt einer Variable um einen bestimmten Wert erhöhen. Dazu schreibt man:
<<set $anzahl = $anzahl + 1>> - war Wert vorher 1, ist er jetzt 2
Alternativ funktioniert auch <<set $anzahl++>>
Auf ähnliche Weise können Zeichenketten erweitert werden:
<<set $meinText = $meinText + "mehr Text">
REIHENFOLGE MACHT (MANCHMAL) EINEN UNTERSCHIED:
Gelegentlich ist die Abfolge der einzelnen Befehle relevant. Schreibt man:
$anzahl
<<set $anzahl = $anzahl + 1>>
sieht man beim Aufruf der Passage den alten Wert von $anzahl, weil erst im Anschluss der Wert erhöht wird.
STORYINIT:
Will man eine Variable zentral vor Beginn des Spiels initialisieren, legt man am besten eine spezielle Passage mit dem Namen StoryInit an (Schreibweise beachten - siehe auch Hilfe »Besondere Passagen«).
ABFRAGE VON WERTEN (if-else):
Mit Hilfe von Variablen kann man zum Beispiel den anzuzeigenden Text situativ beeinflussen. Beispiel:
<<if $anzahl == 1>>
Bei Wert 1 der Variablen wird dieser Text gezeigt.
<<elseif $anzahl == 2>>
Bei Wert 2 der Variablen wird dieser Text gezeigt.
<<else>>
Bei allen anderen Werten wird dieser Text gezeigt.
<</if>> -- abschließendes /if nicht vergessen ..
Für die bessere Lesbarkeit wurden Umbrüche eingefügt. Twine übernimmt aber einen Teil der Umbrüche auch für die Darstellung des Textes, sodass es passieren kann, dass der Text ungewollt verrutscht. Hier hilft die Klammerung der obigen Befehlskette mit <<nobr>>:
<<nobr>>
Umbrüche werden
mit dem Befehl nobr ignoriert.
<</nobr>>
PROGRAMMIERSTRUKTUREN:
Mit Twine kann man fast alle üblichen Programmierstrukturen verwenden. Wie wäre es zum Beispiel mit einem Array (Datenfeld) und einer Schleife:
<<set $AlleTiere = ["Hund", "Katze", "Maus"]>>
<<nobr>>
Auswahl an Tiere:
<<for _tier range $AlleTiere>>
<br>_tier <<link "wählen" `_tier + "-Seite"`>><</link>>
<</for>>
<</nobr>>
Ergebnis: Es werden folgende anklickbare Links erzeugt:
Hund wählen
Katze wählen
Maus wählen
Hier wird der Befehl link verwendet; die Ziele (Passagen), auf die verlinkt werden, muss man aber noch händisch anlegen. "Wählen" erzeugt den anzuzeigenden Link, der Ausdruck danach ist der Name der angesteuerten Passage. Man beachte auch das Gravis ` vor _tiere und hinter den Anführungszeichen. Nur so können die Variable und die Zeichenkette miteinander verknüpft werden. _tiere ist übrigens eine lokale Variable.
Im Beispiel oben ist $AlleTiere ein sogenanntes numerisch indiziertes Array. Man kann auf die einzelnen Einträge des Datenfeldes mit eckigen Klammern und einer Zahl zugreifen:
<<set $numerischesArray = ["eins","zwei","drei"]>>
$numerischesArray[1]
Als Ergebnis erhält man "zwei". Wieso nicht "eins"? Der Index eines Arrays fängt bei null an. Man hätte also $numerischesArray[0] schreiben müssen, wollte man als Rückgabewert "eins" erhalten.
Neben numerisch indizierten Arrays gibt es noch assoziative Arrays. Hier sind zwei Werte als Paar miteinander verknüpft. Man spricht auch von Schlüssel (key) und Wert (value). Ganz wichtig: Assoziative Arrays werden immer mit den geschweiften Klammern angelegt:
<<set $assoziativesArray = {
"Name": "Kim",
"Groesse": "1.75m",
"Augen": "braun"
}>>
Die Umbrüche und Einrückungen sind nur für die bessere Lesbarkeit.
Die Werte eines assoziativen Arrays lassen sich auf zwei Arten abfragen. Einmal mit eckigen Klammern und Nennung des Schlüssels in Anführungszeichen:
Name des Players: $assoziativesArray["Name"]
Oder durch die sogenannte Punktnotation:
Größe des Players: $assoziativesArray.Groesse
Diese Hilfe zu »Twine« wird Ihnen präsentiert von:
multimediamobil – Region Süd
Norbert Thien
Internet: [[www.multimediamobile.de|https://www.multimediamobile.de/sued/]]
Verwendung dieser Hilfe auf eigenes Risiko. Keine Garantie für Fehlerfreiheit.
Copyright (C) 2024, Lizenz: Creative Commons BY-SA 4.0
Sie wollen mehr über »Twine« erfahren? Oder wissen, wie man eine gute interaktive Geschichte schreibt? Oder suchen nach Beispielen? Dann durchstöbern Sie unsere Linkliste.
Am besten sehen Sie sich diese Passage - im Gegensatz zu den anderen Hilfe-Passagen - mit dem Play-Button unter der Passage an; dann sind die Links direkt anklickbar:
DETAILLIERTE INFORMATIONEN ZU TWINE:
Allgemein: [[https://twinery.org/cookbook/]]
Wiki: [[http://twinery.org/wiki/twine2:guide]]
SugarCube: [[http://www.motoslave.net/sugarcube/2/]]
HTML: [[https://wiki.selfhtml.org/]]
HTML & CSS: [[https://www.grimoirtua.com/grimoire.html]]
JavaScript: [[https://www.youtube.com/watch?v=JjRoHAO6nAQ]]
Table-Generator: [[https://www.cssportal.com/html-table-generator/]]
Imagemap-Generator: [[https://www.image-map.net/]]
TUTORIALS:
[[https://www.youtube.com/watch?v=cuxy5fewCLg]]
[[https://ebildungslabor.github.io/twinetutorial]]
[[http://catn.decontextualize.com/twine]]
[[https://hackmd.io/@web2write/remixTXT]]
TWINE VERÖFFENTLICHEN:
[[http://meintwine.glitch.me]]
[[http://textadventures.co.uk]]
[[https://itch.io]]
[[https://youtu.be/ILKmNf0SOII?t=180]] - Github
oder per E-Mail, als Downloadlink auf der Webseite, über iServ und andere Cloudspeicher
INTERAKTIVE GESCHICHTEN SCHREIBEN:
[[https://www.storiesinderschule.ch/]]
[[https://www.zebis.ch/unterrichtsmaterial/eine-interaktive-geschichte-schreiben]]
[[https://www.plot-generator.org.uk]]
[[https://digitale-spielewelten.de/methoden/interaktives-storytelling/174]]
BEISPIELE:
[[https://open.education/7-twine.php]]
[[https://dotcomblog.de/auf_der_flucht.html]]
[[https://matthias-andrasch.eu/blog/2015/ela-twine-textadventure-with-html5-video]]
[[https://www.shortsims.com/examples]] (nicht mit Twine gemacht)
[[https://ifwizz.de]]
[[http://kaindel.net/schreibprojekte/]]
Im Grunde genommen benötigt man nur zwei eckige Klammern, um eine interaktive Geschichte in »Twine« zu schreiben. Alles, was innerhalb dieser Klammern steht, wird zu einem anklickbaren Link. Mit deren Hilfe navigiert man durch die »Passagen« (»Passagen« heißen die Seiten in »Twine«)
Doch schnell möchte man mehr. Wie kann ich Texte formatieren? Bilder, Töne und Videos einbinden? Alle diese Fragen werden in dieser Datei beantwortet; sie kann auch als Ausgangspunkt für Ihre eigene Geschichte dienen. Öffnen Sie die Datei dafür in »Twine« mit »Aus Datei importieren«. Dann sehen Sie dort links oben von uns angelegte Hilfe-Passagen.
Die Passagen sind nicht zum direkten Abspielen gedacht und auch zumeist nicht untereinander verbunden. Jedes der Themen muss separat für sich aufgerufen werden. Leider neigt »Twine« dazu, bei langen Passagen immer erst das untere Ende anzuzeigen; scrollen Sie also in den Hilfe-Passagen immer nach oben zum Anfang.
Alle Angaben beziehen sich auf das Geschichtsformat »SugarCube 2.x.x« (oder neuer).
ANWENDUNG:
Wenn Sie zum Beispiel nicht mehr wissen, wie man Bilder einbindet, können Sie in den Hilfe-Passagen unter »Medien« nachschauen und einfach den entsprechenden Quellcode kopieren. Nutzen Sie hierfür vorzugsweise Tastaturkürzel:
*Text markieren
*Zum Kopieren STRG+C drücken
*In Ihre eigene Passage gehen
*Zum Einfügen STRG+V drücken
Wenn Ihnen Tastaturkürzel unheimlich sind, nutzen Sie »Edit« im Twine-Menü links oben.
EINSATZ IM UNTERRICHT:
Der Einsatz von »Twine« im Unterricht kann grundsätzlich auf zwei Arten erfolgen. Entweder Sie erstellen eine Geschichte und lassen diese dann Ihre Schüler:innen oder Teilnehmer:innen spielen. Oder aber, Sie schaffen einen zeitlichen und organisatorischen Rahmen, in dem Ihre Schüler:innen oder Teilnehmer:innen selber mit »Twine« ein kleines Anwendung entwerfen.
Inhaltlich eignet sich »Twine« gut für sogenannte Dilemma-Geschichten, also Situationen, in denen es um eine (moralische) Entscheidung geht:
* [[https://www.zum.de/Faecher/kR/BW/wagner/dilemma1.htm]]
* [[https://material.rpi-virtuell.de/material/dilemmageschichten]]
Aber natürlich gibt es viele andere Themen, bei denen sich der Einsatz von »Twine« lohnt:
* Quiz (Verschwörungstheorien oder jedes andere Sachthema)
* Interaktive Gedichte (Heinrich Heine: Das Fräulein stand am Meere)
* Brief an eine literarische Figur schreiben (+ Antworten Empfänger:in)
* Märchenwelten mischen (Rotkäppchen trifft Rapunzel trifft ...)
* Romanwelten mischen (Zeitepoche, eines Themas, ein:e Autor:in)
* Stadtreise (Schulausflug – fremdsprachig)
* Geschichtssynopsis (Mittelalter in Europa, Amerika, Afrika, Asien)
* Kunstsynopsis (wer schrieb, malte & komponierte während des Barock)
* NaWi-Versuche (Vorbereitung – Durchführung – Ergebnisse)
JETZT GEHT'S LOS:
Öffnen Sie diese Datei in »Twine« und ändern Sie oben den Namen dieser Passage (zum Beispiel in START). Danach steht Ihnen die ganze Welt offen ...
Der Einsatz von »Twine« im Unterricht kann grundsätzlich auf zwei Arten erfolgen: Sie erstellen eine Geschichte und lassen diese dann spielen.
Der andere Weg wäre, dass Sie einen zeitlichen und organisatorischen Rahmen schaffen, in dem Ihre Schüler:innen oder Teilnehmer:innen selber mit »Twine« ein Spiel passend zu einem Unterrichstthema entwerfen.
Inhaltlich eignet sich »Twine« gut für sogenannte Dilemma-Geschichten, also Situationen, in denen es um eine (moralische) Entscheidung geht:
[[https://www.zum.de/Faecher/kR/BW/wagner/dilemma1.htm]]
[[https://material.rpi-virtuell.de/material/dilemmageschichten]]
Aber natürlich gibt es viele andere Gelegenheiten, bei denen sich der Einsatz von »Twine« lohnen kann:
Quiz (Verschwörungstheorien oder jedes andere Sachthema)
Interaktive Gedichte (Heinrich Heine: Das Fräulein stand am Meere)
Briefe einer literarischen Figur (+ Antworten Empfänger:in)
Märchenwelten mischen (Rotkäppchen trifft Rapunzel trifft ...)
Romane etc. aufbereiten (Zeitepoche, Themenwelten, ein:e Autor:in)
Stadtreise (Schulausflug - fremdsprachig)
Übersichtspläne (Wochenpläne, Raumpläne, ...)
Geschichtssynopsis (Mittelalter in Europa, Amerika, Afrika, Asien)
Kunstsynopsis (Künstler:innen, die parallel schrieben, malten, ...)
NaWi-Versuche (Vorbereitung - Durchführung - Ergebnisse)