twine homework
twine homework. Try to make a really short Twine story as practice to learn Twine, one of the platforms you could use for your team project this quarter!
Twine is a digital Choose-Your-Own-Adventure story maker. There are a bunch of others, but Twine is probably the easiest to learn. It makes HTML-based interactive text stories. If you want to make something with visuals, you could still use Twine, but there may be other more appropriate tools (which we’ll discuss soon, too, but ask Mark for help if you need!).
First Steps
Go to Twine / An open-source tool for telling interactive, nonlinear stories
(Optional) Follow one or both of these tutorials as much as you can get through:
A Quick Twine Tutorial by Allison Parrish (textual)
Twine tutorial by Dan Cox (video)
View these awesome articles about how choice-based stories are structured and alternatives to Twine:
Standard Patterns in Choice-Based Games
Other Choice-based Story Platforms
DO NOT USE SAFARI on a Mac NOR EDGE on Windows! They won’t allow you to save or export your Twine project without doing some security finagling in MacOS or Windows.
Challenge
(either do this individually or with your team – put your names on the project somewhere!)
Get a theme from this random theme generator OR pick your own topic related to your project.
Brainstorm a very simple plot with two endings (if you picked a random theme) OR get started with a simple structure for your project idea with some various paths or configurations.
Make a story with these features (refer to the tutorials above or to the Twine Info section below):
at least 5 passages,
one or more variables, using the (set:) command,
some (if:) statements that display dynamic text dependent on the variables, and
at least one image.
After you finish your story, select Publish to File on the bottom left drop-up menu, and save the .html file somewhere. Then drop the file into the Twine Challenge folder in our Google Shared Drive.
Post in Slack that you’ve finished with a brief summary of what your story is about!
Twine Info
The super basic things that you want to understand are:
what a passage is
Each box of text is called a passage aka room.
how to write in a passage
Just double click a box and start typing!
how to link passages together
If you put [[double brackets]] around some words in a passage, Twine will automatically create a new box called “double brackets” and link it.
More advanced things you want to understand are:
how to display images within a passage
Twine outputs HTML files so if you know HTML you got this.
Just insert the HTML tag for an image like so: <img src=”URL” width=”600”>
Replace URL with an image you found online, such as this one https://i.ytimg.com/vi/XCN-tmlxPTE/maxresdefault.jpg
Set the width to a reasonable amount if you need to.
how to create and use variables
Use (set: $variable to 0) to create a variable (named variable) and set its value to 0.
Then you can, later on, show dynamic text based on the variable value by using a conditional statement.
(if: $variable is 0)[Show this text](else-if: $variable is 1)[Show this text instead](else:)[Show this text if variable isn’t 0 or 1.]
Example use of variables:
Let’s say you have a story with two different paths that lead to the same ending but you want the story to change depending on which path the readers took to get to the ending. You can do this with setting a variable to one or another value and then have the last ending passage detect what that value is.
Most often, variables are (set:) when you enter a passage for the first time.
The below example can be found in the test.html file in our Shared Drive! Download it and open it in a browser.
First, I created an initialization passage and just set some variables to default values. Then I had that go to the actual start of the story. From there, there are two rooms to go into. One of the rooms has a key, the other is actually a hallway with a flashlight. Both lead to a door that is locked. If you have the key, you can open it and end the story. If you don’t, you can go back to the start room and try the other path. Meanwhile, you play around with the flashlight at the end, too, which might or might not happen, depending on if you went east the first time.
initialization
(set: $key to 0)
(set: $flashlight to 0)
[[Start]]
Start
You are in a strange room. There’s a door to the [[west]] and door to the [[east]].
west
You go through the door on the west and into another room. Hey there’s a key here!
(set: $key to 1)
There’s another door at the [[end]] of this room.
east
You go through the door on the east and into a hallway. There’s a door at the [[end]] of the hallway. Hey, there’s a flashlight here!
(set: $flashlight to 1)
end
You try the door. It’s locked!
(if: $key is 1)[But you have a key, and it works! You unlock the door and [[exit]].](else:)[And you don’t seem to have a key on you. Bummer.]
(if: $flashlight is 1)[You decide to shine your light around. It doesn’t help. I guess you could also go back to the [[beginning->Start]].]
exit
Yay, you got out! (if: $flashlight is 1)[With a flashlight even!]