This tutorial will walk you through the process of using Twine for non-linear digital storytelling. It was last updated in the Fall 2018 of for my HIST 696 Clio Wired graduate class and lightly edited in Fall 2021.
While you can download Twine and use this application locally, there is also an online version that you can use (unless you’re using Internet Explorer which doesn’t play nicely with Twine – but IE is a serious security risk even if you never use it and you should uninstall it anyway) Both the downloads links and the online version can be found at http://twinery.org.
There are no special installation instructions – installing this should be similar to installing any other program on your computer. (NOTE: Mac users may have to go to their systems preferences and security & privacy settings to open the file after download if their security settings won’t allow them to open applications from “unknown” AKA open-source developers.) Twine has themes, just like WordPress and Omeka – we’re using the default Harlowe theme but SugarCube is also a very popular one that lets you add multimedia easily.
From the Twine dashboard, click the bright green “+Story” button on the right side of the screen. You’ll need to give it a name and click the green “+Add” button to finish making your new story.
Hover over the square (aka story passage) labeled “Untitled Passage” in the middle of the screen to see menu options to trash, edit, or play the story starting in this passage. Click the edit button or double-click the square to edit it. Give it a short title like “start” then write however much text you want in the main text box. End your text with “[[you can click here]] or [[alternatively click here]]” then click the “x” in the upper right corner to get out of the box.
You’ll now see two new passages that are connected to your first passage. They have titles “you can click here” and “alternatively click here” because they were auto-generated when you were typing in the first passage and told Twine to create links to passages named “you can click here” and “alternatively click here” – because those passages didn’t exist yet, Twine created them for you.
You can also use the bright green “+Passage” button in the right hand corner to create a new passage.
Create a few more passages and link them together however you want – here’s an example of a quick story I threw together about DHSI, so you can really see the nonlinear structures you can create.
Then go back to your “start” passage and click the play button. Now you can test-play through your game.
More Advanced Twine Stuff
If you start creating really long passage titles, it might be annoying, especially if you want to link to the same passage from multiple other passages. With the default “[[run away screaming from the dinosaurs]]” method of linking passages, you’ve created a very long passage title of “run away screaming from the dinosaurs”. If you instead want to create a passage title of “run away,” you can use the “->” or “|” to separate out the text your reader sees and the passage name: “[[run away screaming from the dinosaurs->run away]]” or “[[run away screaming from the dinosaurs|run away]]”. Then you can have your reader run away screaming from dinosaurs, tornados, fluffy kittens, etc. in the text but link it all to the same passage where they are running away.
Wish you could bold, italics, underline, etc.? You can, using something called Markdown which are formatting instructions widely used throughout the web. You can make something **bold** or *italics* or <u>underlined</u>. If you’ve changed to the SugarCube format, you’ll use a variant set of formatting instructions for ”bold” or //italics// or __underlined__.
Want to embed images, videos, or sound? It has to be online already somewhere then just cut-paste in:
<img src=”the URL of your image” width=”500″ height=”300″ alt=”this is where you put alternative text of what’s in the image for people with screen readers“>
<video src=”the URL of your video” width=”640″ height=”480″></video>
(unless it’s a video hosted in a specialty service, in which case follow that service’s embedding instructions. E.g. for a YouTube video, you need to click the share option to get the “embed video” code and cut-paste that in instead)
<audio src=”the URL of your sound effect” autoplay>
Note: the SugarCube theme has way more options for multimedia and would be worth learning/using if you want to do multimedia storytelling with Twine.
Exporting your story
If you’re using the online version of Twine, it does not save your stories on the web – that information is actually saved in your web browser. That means if you switch computers or clear your browsing history, your Twine stories vanish as well! You can get around this by exporting your story and saving it as a file on your computer that you can then save, email to people, etc.
Click the home button in the lower left hand corner to get back to your story list. From here, you can click the wheel icon below your story title and choose the menu option to “publish to file.”
Note: if you’re on Safari, this will give you a bunch of HTML code you can cut-and-paste to a file on your computer. If you save it with an extension of .html (e.g. “text.html”) then when you double-click on it your computer will recognize it as a web browser file and let bring the story up for you in your web browser to play through.
The Twine wiki:
The Twine Grimoire:
Two other introductory tutorials:
Like the idea of non-linear digital storytelling but don’t like Twine? There are alternative software options to consider, including Inform, Ink, and ChoiceScript, which require varying levels of technical ability but are all well-documented.