Auf der Webseite
https://twinery.org/ laden wir uns die aktuelle Version
des Programms "Twine" herunter (Die aktuelle Version ist hier: 2.3.14.).
Wichtig gleich hier:
Die in Twine dargestellten Graphiken werden nicht als Datei gespeichert,
sondern durch ihren jeweiligen Dateipfad integriert.
Als ich Twine mit "Microsoft Edge" herunterlud, hatte ich später Probleme beim
Einfügen der URL von Bildern, die ich im Firefox-Browser aufgerufen habe.
Das mag leicht zu (ver-)ändern sein, verschaffte mir allerdings gleich ein paar Fragezeichen,
weshalb einige Bilder plötzlich nicht mehr angezeigt wurden.
Nutzt für den Download des Programms und das Suchen/Finden von Bildern/Fotos also besser den selben Browser.
Am Ende dieses Tutorials soll jede/r in der Lage sein,
auch ohne vorherige Programmierkenntnisse (ich hatte keine) ein kleines Text-Graphik Adventure
erstellen zu können, in dem man sich von Storyraum zu Storyraum bewegen,
und Kommandos anklickbar ausführen kann.
Es ist auch wirklich nicht viel.
Als "Bonus" erkläre ich dazu noch die Kommandos, mit denen sich die Schrift kursiv, fett oder
unterstrichen darstellen lässt, sowie man die Textgröße verändern kann.
Nach dem Programmstart wählen wir die Sprache aus,
anschließend das Format, mit dem wir "Twine" nutzen wollen.
Für dieses kleine Tutorial nutze ich das Geschichtsformat "SugarCube 2.3.14".
Hier soll man später Befehle in HTML und CSS gut einbinden können.
Wir beginnen mit der Auswahl des Reiters "+Geschichte" und beginnen eine neue Story.
Der ausgewählte Name kann später noch geändert werden.
(Die Aufforderung für die Namenseingabe erscheint bei mir, trotz Auswahl von deutschen Texten,
in englischer Sprache. Das soll allerdings nicht abschrecken, es stört nicht.)
Nach der Namensauswahl befinden wir uns in einer neuen Bildschirmansicht.
Das weiße Kästchen namens "Neuer Abschnitt" wählen wir mit einem Doppelklick aus.
Der ersten Zeile "unbenannter Abschnitt" geben wir einen Namen. Ich wähle hier am Anfang einfach "Start".
Im unteren Bereich können wir nun unseren Text eingeben:
[Wichtig: Ich gebe Texte und Befehle/Kommandos immer in "" an. Diese sind für den Befehl nicht relevant,
zeigen nur an, dass hier eben ein Text zitiert wird, oder ein Kommando/Befehl benannt ist.]
"Du befindest Dich im Eingangsbereich der Adventure-Treff Party.
Vor Dir erstreckt sich ein weites Sandgebiet.
In der Ferne kannst Du fröhliche Menschen erkennen,
die sich entweder an Klapptischen versammelt haben,
oder durch ein überdachtes Areal streifen,
in dem augenscheinlich Computer und Monitore aufgebaut sind.
Links von Dir befindet sich ein Getränkestand.
Es ist furchtbar heiß."
Hier können wir den Auswahlkasten jederzeit mit Klick auf "x" schließen.
Der eingegene Text bleibt gespeichert.
Doch nicht verwechseln:
Ein weiter Klick auf "x" führt nicht zurück ins Hauptmenü - sondern schließt das Programm.
Zurück ins Hauptmenü/Übersicht Deiner Geschichten führt das "Home" Symbol am unteren linken Bildschirmrand.
Um den Text etwas lesbarer zu machen, fügen wir einen Absatz ein.
Befehle, die den Text per Absatz oder Schriftgröße verändern,
beginnen mit einem "<" (offene, spitze Klammer) und enden mit dem Schließen der Klammer ">".
Der Befehl für einen Absatz lautet "br".
Also fügen wir ein überall ein "<br>" ein, wo es uns sinnvoll erscheint:
"Du befindest Dich im Eingangsbereich der Adventure-Treff Party.<br>
Vor Dir erstreckt sich ein weites Sandgebiet. <br> <br>
In der Ferne kannst Du fröhliche Menschen erkennen,<br>
die sich entweder an Biertischen versammelt haben, <br>
oder durch ein überdachtes Areal streifen, <br>
in dem augenscheinlich Computer und Monitore aufgebaut sind.
Links von Dir befindet sich ein Getränkestand.
Es ist furchtbar heiß."
Ein einfaches "<br>" lässt den Satz hier nach einem Komma also in der nächsten Zeile beginnen,
während "<br>" "<br>" zusätzlich eine freie Zeile erzeugt.
Mit einem Befehl in zwei (!) eckigen Klammern erzeugt man eine Auswahloption.
Im obigen Beispiel füge ich unter dem letzten Satz ein:
"[[Du beschließt den Sand barfuß zu betreten.]]"
"[[Du möchtest Dich erst einmal mit einem Getränk ausstatten.]]"
In der "Kästchen-Übersicht" führen nun zwei Pfade vom Kasten "Start"
zu den beiden neuen Storykästen für die beiden Auswahlmöglichkeiten!
Testen wir das ganze einmal:
- Entweder mit dem "Play"-Button in dem Menü, das erscheint,
wenn sich der Mauszeiger auf einem Storykasten befindet
oder
- Mit Klick auf das Symbol mit dem Käfer ("Testen") unten rechts.
Beachte: Jedes Auslösen von "Testen" erzeugt ein neues Browserfenster für Deine Geschichte.
Das sieht noch nicht gut aus. Wir fügen mit dem Kommando "<br>" einen Zeilensprung ein.
Weiterhin soll sich die Auswahloption vom Beschreibungstext abheben.
Wir machen sie "fett".
Da wir etwas am Erscheinungsbild des Textes verändern, benötigen wir wieder spitze Klammern.
Der Befehl dafür lautet:
"<b>" am Beginn, sowie ein " </b>" um die "fette Phase" wieder zu beenden.
Also:
"[[<b> Du beschließt den Sand barfuß zu betreten. </b>]] <br>
[[Du möchtest Dich erst einmal mit einem Getränk ausstatten.]]"
lässt im Beispiel nur die erste Auswahlzeile in Fettschrift erscheinen!
Um beide Zeilen fett zu bekommen, setzen wir den Befehl "</b>" ans Ende der zweiten Zeile:
""[[<b> Du beschließt den Sand barfuß zu betreten.]] <br>
[[Du möchtest Dich erst einmal mit einem Getränk ausstatten.]]</b>"
Ein "/" beendet also einen zuvor aktivierten Befehl.
Durch das Herumeditieren kann es nun sein, dass sich der Storypfad
"Du beschließt den Sand barfuß zu betreten." nun verdoppelt hat -
da hier jede Abweichung der originalen Zeile einen weiteren Pfad erzeugt.
Dies bitte bedenken - doppelte (unverknüpfte, also nicht mit Pfeilen versehene) Pfade einfach löschen.
Ein paar Befehle zum Herumspielen mit dem Erscheinungsbild von Texten:
"<i> Text </i>" macht den Text kursiv/italic.
"<u> Text </u>" liefert unterstrichenen Text als Ergebnis.
Um die Textgröße zu verändern, nutzt man einen Befehl sowie die Zahlen von 1 bis 6.
1 ist hier die größtmögliche Schrift, 6 die kleinste Schrift.
"<h1> Es ist furchtbar heiß. </h1> stellt diesen Satz also sehr groß dar.
Es lassen sich auch Farben einzelner Wörter verändern.
Leider klappt das gerade nicht, daher kann ich es nicht vorstellen.
Vielleicht gelang es mir in einem anderen Format - hier ist unser Storyformat ja "SugarCube 2.3.14".
Je nach Auswahl des Storyformates am Anfang werden in Twine mitunter komplett andere Befehle genutzt.
Eine Notiz zu der Farbänderung teile ich hier trotzdem, damit sie jemand korrigieren mag:
In der "Kästchen-Ansicht" gibt es unten links, neben dem Namen der eigenen Story/des Adventures,
ein Symbol mit einem Pfeil nach oben. Dort geklickt erscheinen weitere Optionen.
Hier sollte unter dem Punkt "Stylesheet der Geschichte bearbeiten" die Textfarbe veränderbar sein.
Ein dafür von mir notierter Befehl ist: "{color:blue}" (Stylesheet, also wohl "CSS", scheint englische Begriffe zu benötigen?)
Das klappte nun leider nicht. Vielleicht weiß jemand Rat.
Um ein Bild einzubinden, befient man sich wieder eines Befehls in spitzen Klammern:
"<img src="/URL"> bindet Bilder ein. Prima sind hier freie Bilder von z.B. Pixabay.
Für "URL" fügt man den Pfad ein, den man durch Rechtsklick auf ein Bild und dann den Menüpunkt
"Grafikadresse kopieren erhält.
Für das Adventure-Treff Logo wäre das: "
https://www.adventure-treff.de/template ... s/logo.png"
Der Befehl würde also lauten:
"<img src="/
https://www.adventure-treff.de/template ... s/logo.png">
Diese Zeile stelle ich jetzt mal an den Textanfang im "Start"-Kasten.
Und es klappt:
Wichtig ist nun noch der Befehl "|", mit dem man zu einem zuvor benannten Raum springen kann:
Der durch die Zeile "Du möchtest Dich erst einmal mit einem Getränk ausstatten." entstandene/verlinkte Raum
heißt genau so wie die Zeile selbst. Das ist ein bisschen blöd.
Also fügen wir in die Befehlszeile einen Namen für einen Raum ein, zu dem der Spieler nach Auswahl des
Satzes "Du möchtest Dich erst einmal mit einem Getränk ausstatten." gelangen soll.
Hier: Der Bar.
Das sieht dann so aus: "[[Du möchtest Dich erst einmal mit einem Getränk ausstatten.|Bar]]"
(Den senkrechten Strich erhält man mit der Tastenkombination "AltGr+"</>" (links neben dem "y").
Somit wurde der folgende, mit einem Pfeil verlinkte Storykasten nun "Bar" benannt!
Hätten wir das anders herum getan - zuerst einfach in den verlinkten Storykasten geklickt,
und ihn einfach selbst "Bar" benannt - dann wäre die komplette Textzeile
"Du möchtest Dich erst einmal mit einem Getränk ausstatten." einfach durch das
(immer nun ebenfalls anklickbare) Wort "Bar" ersetzt worden.
Aber: "Wollen wir das denn?"
Mit diesem prima Befehlszusatz "|TEXT" können wir also auch bei weiteren Storyverzeigungen
ganz einfach zu einem bestimmten Raum zurückkehren! Schon toll!
Es gibt noch den Befehl "audio src="/URL"autoplay> für die Einbindung von Musik und Soundeffekten -
doch da habe ich mich selbst noch nicht groß mit auseinandergesetzt.
Ich las/sah, dass das erstellte Spiel/die Story und die Audiodateien bei .mp3 Format im selben Order sein sollen.
Dazu würden .wav Dateien beim Testen mitunter zeitverzögert abgespielt werden.
Doch dazu vielleicht mal besser von versierterer Seite.. ?
Soviel erst einmal zu meinen (so nicht zu nennenden) "Kenntnissen" -
die ich hier dennoch freudig teilen mag.
Vielleicht haben nun ein paar mehr Treffler/Innen Lust bekommen,
sich hiermit ein bisschen auseinander zu setzten.
Und sei es für die Erstellung einer kleinen Fotosafari ganz privat für die Familie,
und ohne hier Ergebnisse zu zeigen. Jede/r wie man möchte.
Sollte hier irgendeine kleine, gemeinsame Spielerei entstehen: Hätte bei Zeit und Laune schon Lust dazu.
Abschließend ein paar Fragen, für die ich selbst leider (noch) keine Antworten habe:
- Wie funktioniert das genau mit dem Text einfärben? Für einzelne Worte, ganze Sätze?
- Wie kann sich die Story "merken", dass der Spieler einen Raum bereits betreten hat?
(und, sicher viel komplizierter)
- Wie kann man ein Inventar anlegen?
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.