NOTE: Material in this tutorial does NOT work with Twine 2's default format, Harlowe.

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 menu in the bottom-left, then click Edit Story JavaScript. Copy and paste the script from the blog into the Edit Story JavaScript 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 on any page in which you would like to change the background image. Be sure to include the URL for the image. Like this:

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

Finally, you might want to include some CSS like this:

body {
background-repeat:no-repeat;
background-size:100%;
}

Here is a DEMO that uses my setback macro.


This is part of a larger "How To" guide, click here for my full How To Use Twine guide.

CONTINUE TO THE NEXT POST: How to use Google Drive to store High Scores for Twine games

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 random 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 to (random: 1, 6))
(if: $diceroll is 1)[
  You found a dollar! (set: $money to $money + 1)
]

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 to (random: 1, 100))
You found $randomtreasure coins in the treasure chest!
(set: $coins to $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:

<img src="http://ohiofi.github.io/img/catdance1.gif">

STYLE

To customize the way your game looks, click the menu in the bottom-left, then Edit Story Stylesheet. 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:purple; in the section after body { changes the text color to purple. The code img { max-width:600px; } says to the computer, "All images (pictures, animated gifs, etc.) should be 600 pixels wide or less."

Here is some basic CSS that can be used with Harlowe, the default Twine 2 theme.

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

.mars { /* A background named 'mars' */
  background-image: url("http://ohiofi.github.io/img/mars.jpg");
  background-size: cover;
}

tw-story {
  /* The following changes the text */
  color: darkgreen; /* Set text to green or other color */
  text-shadow: 1px 1px lightgreen; /* Green text shadow */
  font-size: 20px;
  font-family: "Press Start 2P","Helvetica","Arial",sans-serif;

  /* Set background to fade lightblue to blue */
  background: lightblue; /* For old browsers */    
  background: -webkit-linear-gradient(lightblue, blue);
  background: -o-linear-gradient(lightblue, blue);
  background: -moz-linear-gradient(lightblue, blue);
  background: linear-gradient(lightblue, blue);

}

tw-passage {
  /* The following changes the text box */
  border: 5px groove gray; /* Gray border around the box */
  border-radius: 25px; /* Rounded corners on the box */
  background: rgba(255,255,255,0.7); /* 30% transparent box */
  padding: 25px;
}

tw-link {
  color:darkblue; /* Set the link color to darkblue */
  transition: color .5s ease-in-out;
}

tw-link:hover { /* Mouse over a link & it turns orange */
  color: orange;
}



img { /* Images won't get larger than 600px */
  max-width: 600px;
  max-height: 600px;
}

IF THIS, THEN THAT

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

(if: $health < 1)[
  You died. GAME OVER! 
]
(if: $health > 0)[
  Ouch! That hurt! Now where do you want to go?
  [[Go outside]]
  [[Go upstairs]]
]

A simpler way to check for a dead player is to use if and goto together. The code below says to the computer, “If the player’s health is less than one, send them immediately to the passage titled Game Over.”

(if: $health < 1)[
  (goto:"Game Over") 
]

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

(if: $health < 1)[
  You died. GAME OVER! 
]\
(else:)
[
  Ouch! That hurt! Now where do you want to go?
  [[Go outside]]
  [[Go upstairs]]
]

EQUAL TO, GREATER THAN, LESS THAN

In the previous examples, we used > greater than and < less than to compare our variables. Here are some of the most common comparisons:

FOR SALE

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

(if: $money >= 500)[
  [[Buy a sword for 500]]
]\
(else:)[
  Swords cost 500, but you only have $money.
]

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 the player has already visited the Blue Room, the room is empty. Otherwise, they found a key.”

(if: (history:) contains "Blue Room")[
  The room is empty.
]\
(else:)[
  You found a key. (set: $keys to $keys + 1)
]

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 > 0 and $eggs > 0 and $sugar > 0)[
  [[Bake cookies]]
]

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 <= 0 and $lives >= 1)[
  (set: $lives to $lives – 1)
  (set: $health to 100)
  You lost a life! You have $lives lives left.
  [[Continue]]
]
(if: $health <= 0 and $lives <= 0)[
  You died! You are out of lives. GAME OVER!
]

CONTINUE TO THE NEXT POST: Twine random numbers