Twine

This tutorial by Tierney Steelberg, Digital Liberal Arts Specialist at Grinnell College’s DLAC, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

 

Table of Contents

Click any link to head to that section.

1. What Is Twine?
2. Twine Inspiration
3. Storyboarding
4. Twine Basics Walkthrough
5. Taking a Twine Game to the Next Level
   • Simple HTML and CSS
   • Default Story Format: Harlowe
   • Additional Story Formats
6. How to Host a Twine Game
   • Sites @ Grinnell
   • Itch.io
7. Resources
8. Try It Yourself

What Is Twine?

Twine is an open-source tool for telling interactive, nonlinear stories. You can use Twine to create interactive fiction, digital and hypertext stories, choose-your-own-adventures, text games, and more.

You can download it (on Windows, Mac, or Linux), or use it online from your browser. For the purposes of this tutorial, we’ll be working with ​Twine 2,​ and we’ll be using the ​browser​ version. We’ll also be using Harlowe​, which is Twine’s default story format.

Twine Inspiration

Before you start writing in Twine, it’s helpful to play some Twine games first to get inspired and to get a feel for how they work! If you’re new to Twine (or even if you’re not!), try playing through a game or two before following the instructions below and writing your own. Here are some examples:

• Depression Quest by Zoe Quinn
• Queers in Love at the End of the World and many more by anna anthropy
• Bell Park, Youth Detective and Birdland by Brendan Patrick Hennessy
• Howling Dogs, With Those We Love Alive, and many more by Porpentine
• Horse Master by Tom McHenry
• Brooklyn Trash King by Ben Esposito
• Even Cowgirls Bleed by Christine Love
• Terror Aboard the Speedwell by Javy Gwaltney

There are many, many Twine games out there – check out this roundup for even more inspiration.

Storyboarding

As you can see from the examples you played around with, the power of a Twine game is in the branching story options. This means it would be helpful for you to brainstorm and plan your game out in advance. You can “storyboard” your game, either physically on paper or using a digital application: figure out your plot and setting, your starting point, and what options branch out from there. It might be helpful to use index cards to showcase different options and paths, especially if your game idea is a complex one.

Twine Basics Walkthrough

1. Go to https://twinery.org/ and click “Use in your browser”​ on the homepage. (You can download the desktop app if you’re using your own computer, if you want.)
2. Create a new story using the button at the top and give it a title.
3. Start adding story options! Double click the first passage automatically generated by Twine, add text to the box, and create new branching passages by putting text between [​ [double brackets]]​.
4. Twine will automatically create new passages for you, using the text you put in double brackets as the title. ​Double click​ these passages to edit them and add more branches in turn. As you type double brackets, Twine will suggest past passages to you, if you want to re-link to them.
   • For creating link text that is different from the passage title, see t​hese instructions​ from the Twine wiki.
   • Example: [​ [O​pen the cage door​->D​evoured by Lions]​ ]
   • In this example, the clickable text will say “Open the cage door” and the link will lead to a passage named “Devoured by Lions,” so your reader won’t be spoiled.
5. As you write passages, explore the style bar at the top of the text editor: you can customize the styling of text in your passages. Much of this styling can also be accomplished by marking up your text, once you learn which markup symbols achieve which styling goals.
   • Styles > “More Styles” has additional text options, including things like text outlines and animations
     
6. Use the Build > ​“Test”​ button in the top menu to debug your game. Use the ​“Play” button to play it.
   
7. Twine will not save your story if you’re using it in the browser! When you’re done playing around for now, save your game as an HTML file by clicking “Publish to file”​ in the story menu (bottom left) or the Build > “Publish to File” option from the top-level menu.
   • When you want to come back to your game, you can go to the Twine website and import it from the HTML file you downloaded.
   • You can also download the Twine application to your computer, and import your file there, and create new game files that will be saved to your computer.

Taking a Twine Game to the Next Level

You can make a Twine game by just creating passages and writing out their text contents – but once you’ve mastered those skills, you can take your Twine games to the next level with more styling, customization, and interactivity. Advanced Twine games even use coding and story features to incorporate conditional logic, inventory systems, player stats, and the like.

Twine uses something called story formats to handle how a story displays onscreen. “Story formats handle displaying your story onscreen: displaying text and images, playing sound and video. They provide additional ways for players to interact with your story, like buttons or drop-down menus. And they offer the ability to add conditional logic, variables, and other kinds of programming to your story. Story formats are like game engines or small programming languages.” (Source: “Story Formats,” Twine Reference)

Simple HTML and CSS

You can use simple HTML and CSS to do things like display images or change text color.

See this walkthrough on adding local images, for example.

Default Story Format: Harlowe

The default story format for Twine, which you used in the Twine Basics Walkthrough, is Harlowe: Twine Reference describes it as offering “a lightweight but versatile programming language.” Using something called macros in Harlowe, which are basically functions, you can create games that are more interactive, with text that changes based on input from the player, and story options that are modified based on choices the player makes. You can learn more about Harlowe from the Harlowe Manual.

To get started with macros in Harlowe, check out this tutorial for getting a name input from a player and adding it to your story.

Additional Story Formats

Here is an overview of the 3 other story formats included in Twine when you download it, each of which offers its own specific possibilities – check out the links to learn more:

• Chapbook is the youngest story format. It’s designed to be easy to learn and to make many common tasks people have when creating with Twine as simple as possible.
• Snowman is a minimal story format designed for people who are familiar with web development technologies like CSS and JavaScript, and prioritize customization.
• SugarCube is the oldest story format of these, and as a result, has the largest community and resources to draw on. It offers extensive customization possibilities.

Source: “Story Formats,” Twine Reference.

How to Host a Twine Game

For users to be able to play your Twine game, it needs to be hosted somewhere. Twine outputs your game as an HTML file that can be used and accessed when hosted.

Sites @ Grinnell

Any web hosting platform can be used to host a Twine game – including the College’s Sites @ Grinnell web hosting platform.

Follow these instructions for a step-by-step walkthrough:

1. From within your cPanel at https://sites.grinnell.edu  (cPanel Dashboard), create a new subdomain.
   • Follow these instructions from the Sites @ Grinnell documentation if needed: https://sites.grinnell.edu/support/domains/#setting-up-subdomains
2. Navigate to cPanel Files > File Manager.
3. Look in the left-hand column for the folder with your new subdomain’s name and click into it.
4. Click the Upload button in the top menu.
5. Upload your Twine game files on the upload page.
6. Navigate back to the subdomain folder.
7. Select your game’s main HTML file then click the Rename button in the top menu. Rename the file index.html
   • This makes the file the default homepage for the subdomain.
8. Your game is now available to be played via the URL for the subdomain that you set up (along the lines of subdomain.yourdomain.sites.grinnell.edu) – navigate there and try playing it in your browser!

Itch.io

Itch.io is an “online indepedent gaming marketplace” that can be used to host Twine games for free. Users must create an Itch.io account to host Twine games on Itch.io. See these Twine Cookbook instructions on “Publishing Twine Games on Itch.io” for more information.

Resources

There are lots of great resources on the web to help you get started with Twine:

• the Twine Wiki, which covers all things Twine-related – the Getting Started page is a good place to start
• the Twine Cookbook and its How to Create Your First Story page
• Allison Parrish’s Quick Twine Tutorial

Try It Yourself

Following the Twine Basics Walkthrough above, try making a simple Twine game of your own, choose-your-own-adventure style! Start by storyboarding it, work on making the game itself (either in the browser version of Twine, or using the application on your computer), and upload it to Sites @ Grinnell so others can play it, following the How to Host a Twine Game instructions.

If you don’t have an idea for a game scenario, try taking a simple fairy tale or folktale (along the lines of Little Red Riding Hood or Hansel and Gretel) and think about other possible turns the stories could take, depending on a character’s choices!

If you want, you can take your game to the next level by playing around with styling and other customization using the default Harlowe story format (or another story format of your choice), as outlined in Taking a Twine Game to the Next Level.