︎
Text-Adventures mit der Software Twine
Twine is an open-source tool for telling interactive, nonlinear stories.

“You don't need to write any code to create a simple story with Twine, but you can extend your stories with variables, conditional logic, images, CSS, and JavaScript when you're ready.

Twine publishes directly to HTML, so you can post your work nearly anywhere. Anything you create with it is completely free to use any way you like, including for commercial purposes.

Twine was originally created by Chris Klimas in 2009 and is now maintained by a whole bunch of people at several different repositories.”
Software
Download & Use it Online

 https://twinery.org
︎︎︎︎︎

ÜBUNG 06
︎︎︎︎︎

︎
︎



Vorbereitungen und Basics


  1. Gehe zur Webseite von Twine und lade die aktuelle Version des Programms auf deinen Computer herunter. 


    Software: 
    https://twinery.org





  2. Öffne das Programm Twine und klicke auf  „+ Geschichte”



  3. Gib deiner Geschichte einen Titel.




  4. Klicke auf das kleine Dreieck neben dem Namen deiner Geschichte und bestimme das Geschichtsformat.

    Das ist ganz wichtig bevor wir loslegen!




  5. Speichere deine Geschichte gleich mal ab.



    Note:
    Du kannst Twine auch im Browser verwenden.
    Bedenke aber, dass dein Spiel nur im Cache deines Browsers gespeichert wird. Löscht du diesen, ist das Spiel auch weg.
    Bitte daher, egal ob in der Download Version oder im Browser, IMMER den aktuellen Spielstand unter Archive zusätzlich absichern.

    Unter dem Menüpunkt: „aus Datei importieren” kannst du dann dein gespeichertes Spiel wieder reinladen und öffnen. 




  6. Deine erster Abschnitt (Passage)
    Hier kannst du dann später deinen vorbereiteten Text (kommt erst in Übung 8a) hineinkopieren. Wenn du möchtest, dass ein Wort auf eine nächste Passage in deiner Geschichte verlinkt, dann musst du dieses Wort einfach nur in zwei eckige Klammern setzen und es entsteht automatisch eine weitere Passage.




    Ich zeige dir die ersten Schritte mit einer ganz einfachen Geschichte über einen Tag im Leben einer faulen Katze. 


    Text der „Start” Passage:

    Du wachst in der früh auf und bist plötzlich eine Katze
    Nachdem heute ein anstrengender Arbeitstag auf dich gewartet hätte, freust du dich doch nicht in die Arbeit gehen zu müssen und denkst nach, was du nun so machen könntest.

    Du streckst dich und beschließt dann, dich erstmal [[auf die Ofenbank]] zu legen. 







  7. Wenn du nun zurück zur Übersicht gehst findest du die automatisch angelegte Passage mit dem Namen „auf die Ofenbank”, die du nun gleich editieren kannst.

    Wenn du nun zwei verschiedene Wörter in die doppelte eckige Klammer setzt, dann bekommst du automatisch zwei weitere Passagen in der Übersicht.

    Text der „auf die Ofenbank” Passage:
     Nachdem du ein weiteres Nickerchen gemacht hast wirst du hungrig.

    Du [[maunzt]] und hoffst, dass dir jemand Futter bringt.
    Du gehst in die [[Küche]].







  8. Bestimmt möchtest du dein Spiel gleich testen.

    Bitte gehe zur Übersicht und klicke auf Spielen. Nun öffnet sich dein Spiel in deinem Browser. (Es ist ein einfaches HTML File, das in jedem Browser geöffnet werden kann.)

    Leider schaut dein Spiel noch nicht so hübsch aus – es hat noch die Voreinstellungen von unserem zu Beginn ausgewählten Geschichtsformat „Sugar Cube”. Aber wir werden das in den nächsten Schritten ändern und mittels CSS Code deinem Spiel einen neuen Style verpassen.






  9. So schaut dein Spiel aktuell aus – igitt lass uns das ändern.






  10. CSS (Stylesheet):

    Gehe unten auf das kleine Deieck und öffne den Navigationspunkt Sylesheet.
    Im Sylesheet kannst du das Aussehen deiner Geschichte verändern. Dies funktioniert bei Webseiten nach dem selben Prinzip.

    Note:
    CSS ist eine Sprache, die den Stil eines HTML-Dokuments beschreibt.
    CSS beschreibt, wie HTML-Elemente angezeigt werden sollen.

    Du musst in Folge aber nicht CSS Code auswendig schreiben können, sondern nur wissen wo du die einzelnen Stückchen im Internet findest und wie du sie dir dann zusammenkopierst. 

    Wenn du nun in Twine den Stylesheet öffnest, dann ist er leer. 






  11. Wir suchen uns jetzt die einzelnen Code-Teile zusammen, um Hintergrundfarbe, Schriftfarbe, Linkfarbe, ... zu ändern.

    Eine ausgezeichnete Quelle dafür ist Adam Hammond. Er hat wunderbare Video und Text-Tutorials, die Twine im Sugar Cube Modus, Schritt für Schritt erklären. Zudem bietet er auf seiner Webseite die nötigen Code-Blöcke zum Kopieren an.

    Folgender Code macht folgende Änderungen (Das eingebettete Bild mit der Katze hat nichts mit dem Stylesheet zu tun – das machen wir etwas später an anderer Stelle.)





Der erste Block schaut so aus:

body {
background-color: white;
color: darkgrey;
font-family: Futura,Impact,Helvetica,sans-serif;
font-size: 125%;
}

Der erste Block sagt: 
              • mach die Hintergrundfarbe weiß
              • mach die Schrift dunkelgrau
              • verwende die Schriftfamile: Futura, ...
              • und mach die Schrift etwas größer als in den Voreinstellungen, nämlich 125% 


Der zweite Block schaut so aus:

a {
color: pink;
}
a:hover {
color: crimson;
text-decoration: none;
border-bottom: 4px solid black;
}

Der zweite Block sagt:
              • wenn ein Link kommt, dann mach ihn Pink  
              • wenn ich mit der Maus über den Link fahre, dann mach den Link Rot und unterstreiche ihn mit einer Schwarzen Linie die eine Dicke von 4 Pixel hat


Der dritte Block schaut so aus:

#ui-bar {
display: none;
}

Der dritte Block sagt:
blende den Sidebar aus
(der Balken auf der linken Seite wo „Save und Restart” steht)


Der vierte Block schaut so aus:

#story {
margin-left: 3.5em;
}

Der vierte Block sagt:
gleiche nun den Platz, der für den Sidebar eingeplant war, auf der linken Seite um 3,5 aus.




Note: 
Verwende diesen Code als Grundgerüst und editiere ihn nach deinen Gestaltungswünschen.

Du kannst auch im Stylesheet angeben, dass eine einzelne Passage anders aussehen soll. Dafür musst du nur den Namen der Passage angeben und darunter deine Änderungen.



Code für Passage:

.namederpassage {
background-color: pink;
color: cornflowerblue;
font-size: 200%; 
}




12. Dein Bild bereitstellen:

Um ein Bild einfügen zu können, muss es erst mal „irgendwo im Internet” verfügbar sein, damit du die exakte URL des Bildes kopieren kannst.



Dafür gibt es folgende Möglichkeiten:

# Du kannst deine Bilder selbst auf einem Webspace bereitstellen. 
(Wenn du zum Beispiel eine Webseite bei Cargo Collective hast, kannst du einfach dein Bild hochladen und dir in der Image Libary die exakte Bildadresse anzeigen lassen und diese dann kopieren.)

# Du kannst auch dein eigenes Bild auf eine Plattform, die Bilder oder GIFS hostet, hochladen und dann von dort die
exakte Bildadresse kopieren. 
Zum Beispiel bei GIPHY:



# Oder du verwendest ein fremdes Bild, von einer Webseite/Plattform, die lizenzfreie Bilder anbietet und kopierst dort die exakte Bildadresse.

Note:
Bedenke zwei Dinge:
du musst immer die Bildrechte besitzen und wenn die andere Person das Bild von der Webseite runternimmt, dann ist der Link kaputt.



13. Bilder einfügen:

Bilder fügst du in der jeweiligen Passage ein. Bitte nicht im CSS, weil der bestimmt, wie du schon gelernt hast, nur das Aussehen deines Spiels.

Der Code für Bilder schaut so aus:

<img src= "https://LINKzuDEINEMbild.jpg">





Tutorials:
HTML Basics https://www.w3schools.com/html/default.asp


CSS Basics https://www.w3schools.com/css/


Best Twine Tutorials
Text & Videos 
http://www.adamhammond.com/twineguide/