Getting started with Twine

“Passages” are scenes in your story. Each “card” in the flowchart view is a passage.
Each passage can link to multiple other passages.

To edit a passage, double-click it. In the passage window, you’ll enter all of the following:

  • The plain text of your story
  • Special characters that create links to new passages
  • Other codes that change how text displays, store information in variables, and do other useful things

Try it now. Tell Twine you want to create a new story, and then double-click the first passage. Type an opening scene and first question. Then link the options to new passages as described below.

Create a new passage and automatically link to it

Easiest method:
What do you say?
[[Welcome, customer!]]
[[Go away.]]

This creates two links in the current passage. It also creates two new passages, one called Welcome, customer! and one called Go away. In those passages, you’ll describe the consequence of the choice. If you’re writing a branching scenario, you’ll also ask another question and provide more options.

Click Play at the bottom of the Twine window to see how this worked.

New passage with a custom name:
If the options are long, it’s a good idea to give the passages short names that are easy to remember. Here’s one way to do it.

What do you say?
[[Welcome! I’m delighted that you’ve joined us today!->welcome]]
[[Due to a lack of caffeine, I regret to inform you that I will not be able to serve you at this time.->goaway]]

This time the new passages are called welcome and goaway. The -> separates the clickable text from the name of the passage.

Format text in basic ways

If you know HTML, use those tags to make text bold, italic, etc. Otherwise, you can use these Twine codes:

”bold”
//italics//
~~strikethrough~~

Create a “Play again” link

When a player reaches the end of a storyline, you’ll probably want to encourage them to play again to try a different path. You could manually link the last passage to the first using the standard links described above, but that would add several lines to your flowchart view. A tidier way is to put this in the passage where you want the link to appear:

Play again code

The code above has the effect of refreshing the page. If the story is embedded in another web page using iframe, the link just refreshes the story, not the page in which it’s embedded.

Save your story

Twine automatically saves your work. You don’t need to click a “save” button.

Export your story for the world to see

1. Publish to file
Click the triangle near your story name and choose “Publish to file.” This will create an HTML file of your story that people can view with any web browser.

Screenshot of publish to file menu item

It’s best to give the file a simplified name, without capitalization or special characters. Example: Instead of Jerry’s Big Adventure.html, use jerrys-big-adventure.html.

2. Distribute the file:
It’s simplest to upload the HTML file to a web server that your audience has access to, and then give everyone the URL of the file. That way, if you need to update the story, you can replace that HTML file with the new one, and there are no out-of-date versions around. This also makes it possible for you to embed the scenario in another site or online course.

Don’t want it to be online? You could conceivably send the HTML file some other way, such as emailing it to people. When they double-click the file, it should open in their web browser and look like a normal website. This has the huge disadvantage of spawning multiple copies of your file and making updates hard to centralize.

 

More in this series

What is Twine?
Changing the look & feel of your Twine scenario
Links for more Twine tips

Share
Tweet about this on TwitterShare on LinkedInEmail this to someone