Each section of your game is a box called a passage. To add a passage, click the New Passage button (a white page with a yellow flash) or right-click an empty space and click New Passage Here.

To edit a passage, double-click it.

PASSAGES

A passage has three main fields: the title of the passage, tags, and the body. The title of the first passage MUST be Start (not “START” and not “start”). If you do not have a passage named Start, you will get an error message when you try to play your game. You can name other passages anything you like, but do not use the same passage name twice. Tags are only used for special types of code, so you can ignore the tags section. Everything that you type in the body will be shown to the player.

LINKS

Links between passages are shown as arrows between passages. Links are like doors to other passages. They are the same as being told to turn to another page in a Choose Your Own Adventure book. Links are marked in the text of a passage by two square brackets:

[[This is a link]]

The text between the brackets must match the title of the passage that it links to. Passage titles are case-sensitive, which means that “Blue door” and “BLUE DOOR” are NOT the same.

HIDING LINKS

It is possible to change what text is shown to the player for a link. This can come in handy if you want to hide the title of the passage from the player. You can do that with a vertical line like this:

[[The text you want to display|The REAL Title Of The Passage]]

For example: You may want to send the player to a passage called “Wrong” without letting them know that the link they are clicking is wrong. You can do this:

[[New York City is the capital of New York|Wrong]]

If a game has a broken link in it, it is shown in red in your game, and clicking it shows an error message:

The passage 'BLuE dOoR' doesn't exist.

Here is an example of a passage body with links:

You decide to go to the hotel dining room. You [[read the newspaper]] and order a coffee. You get the strange feeling that some is watching you.

[[Look behind you]]

[[Hide under the table]]

[[Go back to your room|You lose]]

MULTIPLE CHOICE QUIZ

Here is an example of a multiple choice question with links:

How many sides does an octagon have?

[[7|Wrong]]

[[8|Question 2]]

[[9|Wrong]]

The correct answer takes the player to a passage called “Question 2.” All of the incorrect answers take you to a passage called “Wrong” which should look like this:

I’m sorry. That is incorrect.

<<return>>

Writing return inside of two angle brackets creates a link back to the last passage. In this case, it will send the player back to whatever question they were trying to answer.

PLAYING YOUR GAME

To test play your game, click the Build drop-down menu and then Test Play. You can also use the shortcut: press Ctrl + T. Twine will open your game in a web browser.

To save your finished game, click the Build drop-down menu and then Build Story. This asks you where you would like to save your game. The game will save as an HTML file (a webpage), so make sure to give your file a .html ending (for example, TheHauntedHotel.html). After you have saved your file, Twine will open it for you in your web browser.

LEVEL TWO

CODE

Wouldn't it be great if your Twine game could remember if the player picked up an item? Code will let you do this and much more. Code is special directions for the computer that will not be seen by the player. In Twine, code is written inside of two angle brackets:

<<write code inside two angle brackets>>

The first thing that you need is a variable. A variable stores something so that the computer remembers it later. You can store either words or numbers in a variable. A variable MUST start with a dollar sign. The variable $name might contain the player's name, “David”, and the variable $keys might contain the number of keys David has in his pocket, 1.

KEYS

You can keep track of the number of keys that the player is holding. At the beginning of the game, in the Start passage, use this set code:

You have one key in your pocket. <<set $keys = 1>>

Later if the player finds a key, you can change the stored number with another set code. The code below says to the computer, “Take the number of keys, add two, and set this as the number of keys.”

You found two keys on the floor. <<set $keys = $keys + 2>>

In most games you only use a key once, so you will subtract one key when you unlock a door. The code below says to the computer, “Take the number of keys, subtract one, and set this as the number of keys.”

You use a key to unlock the door. <<set $keys = $keys – 1>>

You can also attach code to a link so that the code only runs when the player clicks on the link. In this case, do not include set in the code. The code below says, “Take the number of keys, subtract one, and set this as the number of keys.”

[[Unlock the door][$keys = $keys – 1]]

You can show the player the number of keys like this:

In your pocket you have <<print $keys>> keys.

The player will not see the code, <<print $keys>>. The player will see:

In your pocket you have 2 keys.

If you make a mistake with code, a highlighted error message will show up. For example, if you forget to put the dollar sign in front of the keys variable you will see:

Bad expression: keys is not defined.

LOCKED DOORS

Variables can determine what the player sees. For example, the player should only be able to unlock a door if they have more than zero keys. You can use the code if and endif to do this. Anything you type between if and endif is ONLY displayed if the number of keys is greater than (gt) zero.

The blue door is locked.

<<if $keys gt 0>>

[[Unlock the blue door][$keys = $keys - 1]]

<<endif>>

LEVEL THREE

POWER-UPS, COINS, AND OTHER ITEMS

Lots of things can be stored as variables. A variable can be something that is typically found in a video game (points, lives, power-ups, coins, items, weapons, health, etc.) or a variable can be something weird (ninjas, cellphone, fire breath, pizza toppings, random treasure, etc.). You can use $icespell to keep track of if the player has learned the ice spell. The number of coins can be remembered with either $coins or $money or $rupees or something like that.

WEAPONS, HEALTH, AND WEIRD THINGS

You can use $lives to store the player’s extra lives and $pizzatoppings to store the number of toppings they have collected. The player’s $health might start at 100, but can change during the game. The player might start without a $weapon, but then find one later. The first thing you need to do is set these things to zero (or to 100 or to whatever number they should start at) in the Start passage.

Just like with the number of keys, use set to change things later in the game. The code below says to the computer, “Take the player’s health, subtract ten, and set this as the player’s health.”

You fell down the stairs. <<set $health = $health – 10>>

The code below says, “Take the player’s money, add 25, and set this as the player’s money.”

You found $25. <<set $money = $money + 25>>

WHAT IS YOUR NAME?

You can store either words or numbers in a variable, but so far we’ve only been talking about storing numbers. One common word variable is the player’s name. The following code shows the player a popup box that says, “What is your name?” and stores what they type as $name.

<<set $name = prompt("What is your name?")>>

Once the player’s name is stored, you can use print to show their name .

Hello <<print $name>>, how are you today?

LEVEL FOUR

IF THIS, THEN THAT

You can use if and endif with your variables in order to hide or show things to the player. The code below says to the computer, “If the player’s health is greater than zero, keep playing. If the player’s health is less than one, they died.”

<<if $health gt 0>> Ouch! That hurt!

[[Go outside]]

[[Go upstairs]] <<endif>>

<<if $health lt 1>> You died. GAME OVER! <<endif>>

You can also use else along with if and endif. The code below says to the computer, “If the player’s health is greater than zero, keep playing. Otherwise, they died.”

<<if $health gt 0>> Ouch! That hurt!

[[Go outside]]

[[Go upstairs]]

<<else>> You died. GAME OVER! <<endif>>

EQUAL TO, GREATER THAN, LESS THAN

In the previous examples, we used gt and lt to compare our variables. Here are some of the most common comparisons:

eq Equal To	lt Less Than
gt Greater Than	lte Less Than Or Equal To
gte Greater Than Or Equal To

FOR SALE

If you want to sell an item to the player, you can do this:

<<if $money gte 500>> [[Buy a sword for 500]]

<<else>> Swords cost 500, but you only have <<print $money>>.

<<endif>>

ONLY ON THE FIRST VISIT

When a player picks up an item (a key, some money, etc.), how can we make sure that the player cannot pick up that same item again? Use the code below, which says, “If this is the players first visit, they found a key. Otherwise, the room is empty.”

<<if visited(passage()) eq 1>> You found a key. <<set $keys = $keys + 1>>

<<else>> The room is empty. <<endif>>

AND IF THIS

Sometimes you need to say if this is true and if this other thing is true. The code below says, “If the player has flour, eggs, and sugar, they can bake cookies.”

<<if ($flour gt 0) and ($eggs gt 0) and ($sugar gt 0)>> [[Bake cookies]]

<<endif>>

The code below says to the computer, “If the player’s health is less than or equal to zero and they have one or more lives, lose a life but keep playing. If the player’s health is less than or equal to zero and they have no more lives, game over.”

<<if ($health lte 0) and ($lives gte 1)>> <<set $lives = $lives – 1>> You lost a life. You have <<print $lives>> left. <<return>> <<endif>>

<<if ($health lte 0) and ($lives lte 0)>> You died. You are out of lives. GAME OVER! <<endif>>

LEVEL FIVE

RANDOM NUMBERS

Games are more interesting if they are different each time you play. In board games, rolled dice and shuffled cards are typical. In video games, random numbers are used. You can use the code Math.ceil(Math.random()*6) to roll dice and get a number between 1 and 6. The code below says to the computer, “Generate a number between 1 and 6. If you roll a 1, the player has found a dollar.”

<<set $diceroll = Math.ceil(Math.random()*6)>>

<<if $diceroll eq 1>>

You found a dollar! <<set $money = $money + 1>> <<endif>>

The code below say to the computer, “Generate a number of coins (between 1 and 100) to be found in a treasure chest and tell the player how many coins they found.”

<<set $randomtreasure = Math.ceil(Math.random()*100)>>

You found <<print $randomtreasure>> coins in the treasure chest!

<<set $coins = $coins + $randomtreasure>>

PICTURES AND ANIMATED GIFS

You can use <img src=” “> to add pictures and animated gif files to your game. Make sure that you only use one angle bracket on each side, not two. The web address of the file needs to go in between the “quotation marks,” like this:

STYLE

To customize the way your game looks, click the Story drop-down menu, then New, and then Stylesheet. You can also right-click an empty space and click New Stylesheet Here. In the stylesheet, you can write CSS code that will allow you to change the background color, the text color, the maximum size for pictures, and much more.

If you put the code background:lightblue; in the section after body { , it changes the background to light blue. Putting the code color:black; in the section after body { , it changes the text color to black. The code img { max-width:600px; } says to the computer, “All images (pictures, animated gifs, etc.) should be 600 pixels wide or less.”

body {

font-family:Helvetica,Arial,sans-serif;

color:black;

background:lightblue;

margin:40px;

}

img {

max-width:600px;

max-height:600px;

}

#sidebar,#title {

font-family:Helvetica,Arial,sans-serif;

color:black !important;

width:125px;

}

.passage {

font-size:25px;

}

.passage a {

color:darkblue;

}

.passage a:hover {

color:orange;

}

SCRIPTS AND MACROS

Scripts allow you to add new features to your Twine game. You can find these scripts posted on blogs and in Twine forums. For example, Leon Arnott has created many scripts and has posted them to his blog, Glorious Trainwrecks.

To add a script to your game, click the Story drop-down menu, then New, and then New Script. You could also just right-click an empty space and click New Script Here. Copy and paste the script from the blog into the New Script passage. Here is a simple script that I created that will allow you to change the background image within passages:

//changes the background image

macros['setback'] =

{

handler: function (place, macroName, params, parser)

{

document.body.style.backgroundImage = "url("+params[0]+")";

}

};

After adding that, you can use the macro <<setback>> on any page in which you would like to change the background image. Include the URL for the image after the word setback, like this:

<<setback http://ohiofi.com/img/oh.png>>

Here is a DEMO of my setback macro.