HackMD
Interaktive Geschichten mit Twine
Einleitung:
Noch nie von »Twine« gehört? Dann probieren Sie es hier aus: Entscheide Dich
Mit »Twine« kann man sehr einfach interaktive Geschichten, Textadventures und kleine Spielformate selber herstellen. Im Grunde genommen benötigt man nur zwei eckige Klammern. 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«).
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Doch schnell möchte man mehr. Wie kann ich Texte formatieren? Bilder, Töne und Videos einbinden? Um diese Fragen zu beantworten, finden Sie in den »Twine-Materialien« auf unserer Webseite eine Datei namens »LIES MICH.html«. Öffnen Sie sie in »Twine« mit »Aus Datei importieren«. Die Datei enthält links oben eine kleine Hilfe in Form von »Passagen«, die Sie bei Ihren ersten Schritten zu einer interaktiven Geschichte unterstützt.
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« eine kleine Anwendung entwerfen.
Für den Einsatz von »Twine« wird zum einen das Programm selber und ein Laptop oder Desktop-PC benötigt. Grundsätzlich könnte man »Twine« auch komplett über einen Webbrowser bedienen. Empfohlen wird dies aber nicht, da beim (versehentlichen) Schließen des Browserfensters die gesamte Arbeit verloren geht (wenn man nicht vorher exportiert hat …).
Ein Internetzugang während der Erstellung einer Geschichte ist hilfreich bei der Suche nach Bildern und anderen Medien, die man einbinden möchte. Spätestens, wenn man die Geschichte per Cloud o.ä. verteilen möchte, ist eine Online-Anbindung sinnvoll.
Geeignete Inhalte
Inhaltlich eignet sich »Twine« gut für sogenannte »Dilemma-Geschichten«, also Situationen, in denen es um eine (moralische) Entscheidung geht:
Aber es gibt natürlich 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 Schneewittchen …)
- Romanwelten mischen (Werke einer Zeitepoche, eines Themas, ein:e Autor:in)
- Stadtreise (Schulausflug – fremdsprachig)
- Geschichtssynopsis (Mittelalter in Europa, Amerika, Afrika, Asien)
- Kunstsynopsis (wer schrieb & komponierte, während die Impressionist:innen malten?)
- NaWi-Versuche (Vorbereitung – Durchführung – Ergebnisse – verwandte Themen)
Eine Geschichte schreiben:
Bei einfachen und überwiegend linearen Geschichten kann man oft ohne große vorherige Überlegungen direkt loslegen. Wird die Geschichte aber länger und komplexer oder sollen mehrere Teams parallel an einzelnen Strängen arbeiten, muss man planen. Ein Storyboard in Form eines Mindmaps ist dann sehr hilfreich:
Nützliche Tipps zum Verfassen einer Geschichte gibt es hier:
Twine-Geschichten mit KI schreiben:
Mehr zum Thema: Hey KI, ich will Abenteuer …
Aufgabe:
Entwerfen Sie eine eigene interaktive Geschichte mit Twine. Nehmen Sie beispielsweise ein Thema aus Ihrem aktuellen Unterricht oder einen Inhalt mit persönlichem Bezug (Hobby). Oder greifen Sie auf unsere Vorschläge zurück:
Quiz: Entwerfen Sie ein Quiz zum Thema Verschwörungstheorien. Nutzen Sie hierfür das Infoblatt von »so geht Medien: Quiz – So entlarvt man Verschwörungstheorien«.
Fake News: Entwerfen Sie eine Geschichte, die zeigt, wie man mit Fake News entlarvt. Nutzen Sie das klicksafe-Infoblatt »Umgang mit Fake News und Verschwörungstheorien«.
Gedicht: Verwenden Sie ein Gedicht und bereiten Sie es in »Twine« auf:
Heinrich Heine: Das Fräulein stand am Meere
Das Fräulein stand am Meere
Und seufzte lang und bang,
Es rührte sie so sehre
Der Sonnenuntergang.
»Mein Fräulein! Sein Sie munter,
Das ist ein altes Stück;
Hier vorne geht sie unter
Und kehrt von hinten zurück.«
WICHTIG: Denken Sie daran, Ihr Storyformat zu Beginn auf »SugarCube 2.36.1« umzustellen.
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Sie können natürlich auch eine der anderen Geschichtsformate wählen. Aber »SugarCube 2.36.1« ist oft einfacher, wenn man später die Gestaltung der »Passagen« mit HTML und CSS beeinflussen möchte.
Branching: Geschichten verzweigen
Das besondere an den Geschichten in »Twine« ist ja, dass sie Verzweigungen (englisch: Branching) aufweisen. Es gibt vielfältige Formen, wie diese Verzweigungen aussehen können:
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Genauere Beschreibungen der verschiedenen Verzweigungsformen finden Sie auf diesen Webseiten:
Egal, ob Sie sich am Ende für die oben abgebildete »Gauntlet« (Fischgräte), den »Bootleneck« (Flaschenhals), einen »Sorting Hat« oder für eine Mischung verschiedener Formate entscheiden: Haben Sie stets im Blick, dass Sie nicht – versehentlich – ein »Death End« produzieren, also eine Passage, aus der es für Spieler:innen kein Entrinnen mehr gibt.
Geschichte verfeinern: Textformatierung
Verfeinern Sie Ihre Twine-Geschichte indem Sie den Text mit Markup-Anweisungen, HTML-Befehlen oder CSS formatieren. Hier ein paar Beispiele:
TYPISCHE MARKUP-BEFEHLE:
!Level 1 Überschrift (entspricht h1 in HTML) - geht bis Level 6 - wirkt pro Zeile
''Fett'' - Achtung: keine Anführungszeichen, sondern zweimal Apostroph
//Kursiv//
__Unterstrichen__
*Liste mit Punkt - Zeile muss linksbündig stehen, sonst keine Liste
#Liste mit Zahl am Anfang
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 eingetippt (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 %/
Tabellen: https://www.cssportal.com/html-table-generator
TYPISCHE CSS-BEFEHLE (inline):
<div style="font-size:30px; color:red">div-Bereich mit CSS formatiert</div>
siehe auch: http://tutorium.drdanielappel.de/Uebersicht_CSS.html
Außerdem gibt es die Möglichkeit mit einem CSS-Stylesheet, JavaScript und Variablen zu arbeiten. Die genaue Vorgehensweise finden Sie in den »Twine-Materialien« auf unserer Webseite in der Datei »LIES MICH.html« beschrieben. Die weiteren Dateien im Download-Material machen regen Gebrauch von diesen Techniken.
Geschichte verfeinern: Medien einbinden
Verfeinern Sie Ihre Twine-Geschichte mit Bildern, Tönen und Videos. Legen Sie unbedingt vorher einen Ordner an, in dem Sie die Medien und die exportiere Twine-Geschichte zentral sammeln.
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Die Befehle zum Einbinden von Medien in »Twine« lauten:
KURZFASSUNG (für das Geschichtsformat »SugarCube 2.x.x«):
Bild: <img src="bild_ordner/bild_name.png" alt="Alternativer Text">
Audio: <audio src="audio_ordner/audio_name.mp3" autoplay controls />
Video: <video src="video_ordner/video_name.mp4" autoplay controls>Ersatztext</video>
YouTube: Rechtsklick auf das YouTube-Video und Einbettungscode kopieren
Hinweis: Medien werden in »Twine« nicht angezeigt, wenn Sie die Geschichte in der Software mit »Testen« oder »Spielen« starten. Sie müssen sie zunächst mit dem Dreiecks-Symbol links unten »Als Datei veröffentlichen« und dann die exportierte Datei per Doppelklick in einem Browser starten.
QUELLEN FÜR BILDER, VIDEOS, MUSIK UND GERÄUSCHE:
»Twine« kann als reine Text-Anwendung gestaltet werden. Aber natürlich wirkt die Geschichte oft interessanter, wenn man sie mit Bilder, Tönen und Videos aufpeppt. Hier ein paar Downloadquellen:
Bilder:
Bilder mit KI-Generatoren erstellen:
- https://stablediffusionweb.com
- https://deepdreamgenerator.com
- https://ideogram.ai
- https://playground.com
- https://perchance.org/ai-text-to-image-generator
- https://firefly.adobe.com
- https://aistudio.google.com (Gemini Flash)
- https://designer.microsoft.com
- https://www.craiyon.com
- https://enterpix.app
- https://deepai.org
- https://lexica.art/aperture
- https://www.mage.space
- https://enterpix.app
- https://playgroundai.com
- https://huggingface.co/…/ml-mgie
- https://huggingface.co/…/stable-diffusion
Videos:
Geräusche:
Aber Achtung: Unbedingt die AGBs bzw. Lizenzbestimmungen auf den Webseiten lesen! Denn »Creative Commons« oder »kostenfrei« heißt nicht, dass man alles mit dem Material machen darf. Bestimmte CC-Lizenzen erlauben z. B. nur die unveränderte Verwendung einer Datei. Kürzungen oder das Ausschneiden einzelner Passagen wären also nicht erlaubt. Fast immer muss der Namen des/der Künstler:in und der Titel des Stücks/Materials im Abspann genannt werden.
Urheber- und Nutzungsrechte:
Geschichte veröffentlichen:
Da es sich bei der exportierten Twine-Geschichte um eine reine HTML-Datei handelt, können Sie zum Beispiel einfach als E-Mail-Anhang verschicken, zum Download auf Ihrer Webseite anbieten oder über Cloudspeicher (dropbox, iServ etc.) verteilen.
Alternativ wählen Sie den etwas komplexeren Weg über eine der folgenden Plattformen:
Falls Sie in Ihrer Geschichte Bilder, Töne oder Videos verwendet haben, müssen Sie diese natürlich in der passenden Ordnerstruktur mitliefern, sonst können sie nicht angezeigt werden.
Weiterführende Links und Videos:
ALTERNATIVEN ZU »TWINE«:
Sie suchen Alternativen zu »Twine«? Dann sehen Sie sich unser Material zum Thema »Erstellung eines (digitalen) Escape Rooms« an. Hier finden Sie eine Einführung in die Webplattform »Genially« und ganz am Ende der Seite eine umfangreiche Auflistung von weiteren Tools fürs Storytelling. Falls Sie lieber in Richtung Informatik gehen möchten, schauen Sie auf unsere Seite zu »Swift Playground«. Auch hier gibt es am Ende der Seite eine Auflistung, dieses Mal zu diversen Programmier-Werkzeugen.
INTERESSIERT AN EINER KOSTENFREIEN FORTBILDUNG:
Sie wollen sich intensiver mit dem Einsatz digitaler Technik im Unterricht beschäftigen? Dann buchen Sie das »multimediamobil«. Wir bieten kostenfreie Fortbildungen zu fast allen Themen rund um Multimedia an.
Falls Sie also wissen möchten, wie Sie Bilder, Töne, Videos, Animationen oder das Internet pädagogisch sinnvoll einsetzen können oder was sich mit Computerspielen, 3D-Modelling oder Autorensystemen, Tablets, Apps und interaktiven Tafeln oder künstlicher Intelligenz (KI) im Schulunterricht, Studienseminar, in der Erwachsenenbildung und Jugendarbeit oder im universitären Bereich machen lässt, werden Sie bei uns bestimmt fündig.
