This document provides an introduction to Twine, an open-source tool for telling interactive, nonlinear stories. It discusses what Twine is, how to get started with basic implementation using links and choices, and some advanced techniques like using variables, conditionals, and CSS styling. The document explains that Twine stories are interactive narratives where the reader makes choices that determine the path and outcome of the story. It provides examples using a simple "Pacman" story and outlines an agenda that includes downloading Twine, the basics of linking passages together, and more advanced topics like logic, variables and styling.

1. Intro to Twine
Tanya X. Short, Designer & Author
@tanyaxshort
@kitfoxgames
A performative adaptation of
http://www.auntiepixelante.com/twine/

2. Agenda
•
•
•
•
What is Twine?
Basic Implementation
Make a Twine!
Advanced Techniques

3. Step 1: Download Twine
• Twinery.org
• Upper-right corner

4. What is Twine?
(Answer: AWESOME)

5. Twine is About Interaction

6. Interaction Often Means Choice
Pacman the Twine
A ghost is coming.
CHOOSE: Run Left
or Run Right
Or Stay Put
Run Left
You get lost in
the maze.
Run Right
CHERRY
Stay Put
You were eaten!

7. Interlude: Plan a Choice
•
•
•
•
•
•
Your morning
Ordering at a restaurant
Important life moments
Your pet
An adventure
A weird dream
Pacman the Twine
A ghost is coming.
CHOOSE: Run Left
or Run Right
Or Stay Put
Run Left
You get lost in
the maze.
Run Right
CHERRY
Stay Put
You were eaten!

8. Basic Implementation

9. Implementation
•
•
•
•
Name titles the same as your link
Put square brackets around your links [[like this]] & magic happens!
Right-click to add a new “page”
Save Story (.tws) is not the same as Build Story (.html)

10. Dressing it Up
• Hide your links if you want. [[Whatever blah blah|Link]]
• Place images using [img[ghost.gif]]

11. Make a Twine!

12. Implementation
• Name titles the same as your link
• Put square brackets around your links [[like this]] & magic
happens!
• Right-click to add a new “page”
• Save Story (.tws) is not the same as Build Story (.html)
• Hide your links if you want. [[Whatever blah blah|Link]]
• Place images using [img[filename.gif]]

13. Advanced Techniques

14. Embedding Logic
• Variables:
<<set $cherries = 0>>
<<set $ghostcolor = “red”>>
• Conditional results
<<if $cherries gte 1>>Hooray!<<else>>Boo!<<endif>>
<<if $ghostcolor eq “red”>>Blinky is angry!<<endif>>
eq means “equal to”, neq means “not equal to”
lte means “less than or equal to”
<<if ($cherries eq 2) and ($ghostcolor is “red”)>>
• Surround multiple lines of code with <<silently>><<endsilently>>
• Displaying chunks (good for anytime you‟d want to copy/paste):
• Name a new page, such as Maze
• <<display „Maze‟>> will show everything on that page.
You can use CSS! Make a page named CSS, and write “stylesheet” in the
Tags. Then just put the style in there. Example: .passage { width: 400px
!important }

15. Intro to Twine
Tanya X. Short, Designer & Author
@tanyaxshort
@kitfoxgames
A performative adaptation of
http://www.auntiepixelante.com/twine/