from story to interactive game.

Twine is a free, open-source platform used for building interactive games. Coding isn't necessary to use Twine, but with some light CSS, you can add backgrounds, embed images, and change some of the aesthetics of your game. This page focuses on the basics of Twine, from downloading the software to basic game creation. For more "advanced" coding and other add-ons to your game, check out the Twine 102 tab on this Google Site.

Setting Up Twine

The initial setup is fairly straightforward. Visit twinery.org and download the version of Twine that is compatible with your machine. There is an option to use Twine entirely online, but it doesn't have as many features as the downloaded version. The online version is great for practice!

Anatomy of a Twine Slide

This slide of our Tarzan tutorial includes links, some text stylization, tags, and an image--basically all of the features we used to personalize the tutorial. You can learn more about some of these features on the "Twine 102" page of this site, but I'll go over the very basics here.

Linking Twine Slides:

Remember the murder wall from our presentation? Twine is set up like a digital board of index cards, their relationships shown with dotted lines. To add choice points to your slides (and add cards to your board), you do so with double brackets. When you surround text with double brackets, a new slide will be added to your Twine board. It will be titled whatever you have in the double brackets. This is illustrated at the bottom of the picture above.

Edit how the text looks:

• To bold font in Twine, surround the text you want bold with double quotes ("). To italicize, use double slashes (//).

• To change the color of your text, use this code (you can type in the name of common colors, like I did with navy below, or type a hex code preceded with the pound sign):

(text-colour:navy)[INSERT TEXT YOU WANT TO CHANGE THE COLOR OF HERE]

Add Hyperlinks:

• Want to link to your library catalog, to a Wikipedia page, or anything else? Use this code:

<a href="https://sites.google.com/uci.edu/humcore-research/toolkit/mind-map" target="_blank" rel="noopener noreferrer">mind map</a>

The blue text in the above code is the phrase that will be hyperlinked, the red the URL. The rest of the code is telling this URL to open in a new window. We did this because when the links opened in the same window as the Twine game, we'd lose all progress in the game.