Twine Guide!

For getting started using Twine 2 to make interactive fiction.

Table of Contents

Twine Tutorials

Twine 2 Harlowe story engine reference guide (my preferred story engine)

YouTube Tutorials by Dan Cox for various advanced techniques using all three Twine 2 story engines.

furkle's Twine 2 Harlowe CSS Tutorial.

Twine 2 Harlowe CSS Link selectors reference

Beginners guide to Twine by Adam Hammond using the Sugarcube story engine.

To learn more about HTML/CSS, check out these tutorials recommended by Neocities.

Tips and Tricks

Remove Undo/Redo Buttons

Paste this into Edit Story Stylesheet:

tw-sidebar tw-icon.redo {
	display: none;
}
tw-sidebar tw-icon.undo {
	display: none;
}

Change styles

Paste this into Edit Story Stylesheet:

/* CHANGE BASIC COLORS */
tw-story {
  background-color:white;
  color:black;
}
tw-passage {
  background-color: rgba(210, 210, 210, 0.8);
  padding: 20px;
  border: 2px dotted blue; 
  border-radius: 10px;
}

/*CHANGE LINK COLORS */
tw-link, .enchantment-link /* sets base link colors */
{ color: red; }
tw-link:hover, .enchantment-link:hover /* sets hover link colors */
{ color: crimson; }
.visited /* all visited links */
{ color: red; }
.visited:hover /* all visited hover links */
{ color: crimson; }

Advanced Scripts/Techniques

Add passage tag to HTML for CSS styling

"The following code takes any Passage Tags you assign to a Passage and adds them as CSS class attributes of the html element of the story, this then allows an Author to use CSS selectors based on those tags/classes to style individual passages. The following should be added at the start of your story's header tagged passage. Passages tagged "Header" will be prepended to every passage in the story. If you don't already have a Header passage then first create a new passage (it's name is not important but I name mine Header for easy reference) and then add the special Header tag to the new passage."

{
  (print: "")
  (if: (passage:)'s tags's length > 0)[
    (print: "")
  ]
}

"You can now use CSS like the following to style individual passages. note: the following assumes I have given one passage in a story a desert tag and another passage a forest tag."

html {
  background-color: #FFFFFF;
}

html.desert {
  background-color: Beige;
}

html.forest {
  background-color: LightGreen;
}

ALTERNATIVE METHOD: This CSS code will apply styling to a passage with the corresponding tags, without using the Header code.

tw-story[tags~="lake"] {
  background-color: blue;
  background-image: url("https://lakupo.neocities.org/kittenbg.jpg");
  background-size: cover;
  background-position: fixed;
}

Copy and paste the following script into the "Edit Story Javascript" section in your Twine story.

MP3 Music Player Script

You can add music or other looping background audio to your Twine Game with this script. Neocities does not allow MP3 hosting at the free level, so I recommend uploading MP3 files to a hosting service such as Dropbox. To make the audio available to your game, change the digit at the end of the share URL from 0 to 1, such as: https://www.dropbox.com/s/userinfo/filename.mp3?dl=0 to https://www.dropbox.com/s/userinfo/filename.mp3?dl=1. Add that URL to the play command in the script to change the starting audio.

Sound.play('URL_GOES_HERE')

To change looping audio mid-game, add the following to your passage:

<script>Sound.play('URL_GOES_HERE');</script>