Twine

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 2019 before posting.

Installing Twine

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.orgscreenshot of the Twine website landing page

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.

Getting started

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.

screenshot of empty Twine 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.

screenshot of a Twine passage being edited

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.

screenshot of three linked Twine passages

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.

screenshot of the passages in a non-linear Twine story

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.screenshot of a Twine story list

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.

More resources

The Twine wiki:

Two other introductory tutorials: