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.”
“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.”
︎︎︎︎︎
Twine –
Vorbereitungen und Basics
Spickzettel mit Übersicht zum rauskopieren:
https://docs.google.com/document/d/1FJO9rdX7jeMozobT0AMk9TgZfsiXoRhXt0I7ayu-p8Y/edit#heading=h.q39ck0po7eq4
Spickzettel für Expert*innen
https://www.uni-saarland.de/fileadmin/upload/fachrichtung/geschichte/Fachdidaktik/Twine-Spickzettel_Stand_8.12.20.pdf
Colour Picker
https://colorate.azurewebsites.net/de/ColorPicker/FFFF00
-
Gehe zur Webseite von Twine und öffne Twine im Browser (Achtung immer das File am Ende herunterladen, da es sonst verloren geht, wenn du deinen Browser Cache löscht.)
- Tutorial von Johanna Janiszewski (Spieleentwicklerin, Geschäftsführerin von Tiny Crocodile Studios)
https://www.tjfbg.de/fileadmin/tjfbg/user_upload/aktuelles/2022/Methodenkarten_Meko_2022/03.pdf - Harlow Story Format
https://www.christytuckerlearning.com/harlowe-story-format-for-twine/ - Twine Text & Video Tutorial
https://schooltools.at/2022/12/04/twinery/
Spickzettel mit Übersicht zum rauskopieren:
https://docs.google.com/document/d/1FJO9rdX7jeMozobT0AMk9TgZfsiXoRhXt0I7ayu-p8Y/edit#heading=h.q39ck0po7eq4
Spickzettel für Expert*innen
https://www.uni-saarland.de/fileadmin/upload/fachrichtung/geschichte/Fachdidaktik/Twine-Spickzettel_Stand_8.12.20.pdf
Colour Picker
https://colorate.azurewebsites.net/de/ColorPicker/FFFF00
Best Twine Tutorials
Twine Spiel als Tutorial
https://johannajaniszewski.itch.io/wie-man-twine-benutzt
Harlowe 3.3.7 manual
https://twine2.neocities.org/
Twine Text & Video Tutorial
https://schooltools.at/2022/12/04/twinery/
Tutorials für die Schule & Materialien
https://www.storiesinderschule.ch/
weiterführende Tutorials:
HTML Basics https://www.w3schools.com/html/default.asp
CSS Basics https://www.w3schools.com/css/
Twine Spiel als Tutorial
https://johannajaniszewski.itch.io/wie-man-twine-benutzt
Harlowe 3.3.7 manual
https://twine2.neocities.org/
Twine Text & Video Tutorial
https://schooltools.at/2022/12/04/twinery/
Tutorials für die Schule & Materialien
https://www.storiesinderschule.ch/
weiterführende Tutorials:
HTML Basics https://www.w3schools.com/html/default.asp
CSS Basics https://www.w3schools.com/css/
︎︎︎︎︎
Useful code
Hintergrundbild für jede Seite festlegen:
(in CSS kopieren)
(in CSS kopieren)
tw-story {
background-image: url(https://DEIN-LINK);
background-repeat: no-repeat;
background-size: cover;
}
background-image: url(https://DEIN-LINK);
background-repeat: no-repeat;
background-size: cover;
}
Useful code
Hintergrundbild für eine Seite festlegen:
(in CSS kopieren)
(in CSS kopieren)
Code with tag: - The tag here is the word "snow"
tw-story[tags~="snow"] { background-image:url("ENTER YOUR URL HERE"); background-size:cover; }
tw-story[tags~="snow"] { background-image:url("ENTER YOUR URL HERE"); background-size:cover; }
Useful code
„hover” Farbe bei Links ändern
(in CSS kopieren)
(in CSS kopieren)
.enchantment-link:hover, tw-link:hover {
color: red;
}
Useful code
Vor- und Zurückpfeil deaktivieren
(in CSS kopieren)
(in CSS kopieren)
tw-sidebar {
display:none
}
︎︎︎︎︎