Twine Cheat Sheet

Here’s a quick reference for some of the most common features in Twine.
  • Wrap words or phrases in [[double brackets]] to create links.
  • First lexia must be named Start.
  • Spelling and capitalization matters!
  • Give lexia these special titles to add meta-detail: StoryTitle, StorySubtitle, StoryAuthor, StoryMenu
  • [[fear|The Nature Of Fear]] will create a link that appears as “fear” linking to a lexia named “The Nature of Fear.”
  • Two built in styles (change through Story > Story Format menu option): Sugarcane (better for link-based work) and Jonah (better for choice-based work or stretchtext).
  • Jonah only: Create exclusive choices like this:
    • * <<choice “Go through the door”>>
    • * <<choice “Hold back”>>
  • You can display different text than the name of the lexia like this:
    • * <<choice “What should be displayed” “Name of lexia”>>
  • Basic text styling: ”word” for word, //word// for word, __word__ for word. Make a horizontal line with “—-“
  • Create conditional text with <<if $variable>>Text to show if $variable is true<<else>>Text to show otherwise<<endif>>.
  • Set variables with <<set $variable = true>>.
  • Variable names must begin with $ sign, can’t contain spaces or special characters, are case sensitive.
  • To include CSS styles, create a new unlinked lexia of any title and give it the tag stylesheet.
  • Some useful CSS selectors:
    • #sidebar  — The column of text on the left (in Sugarcane)
    • #snapback  — The “Rewind” link
    • a  — Links
    • a:hover  — Link color when mouse is over
    • .passage .content  — The main body text
  • Some useful CSS styles:
    • body { background-color: red }   — List of named colors
    • (or): background: #3a202a  — Hexadecimal color selector
    • background-image: url(file.jpg)
    • color: red !important  — foreground color.
    • font-size: 150%
    • font-weight: bold   — or “normal” to turn off bold
  • If you know HTML, you can include arbitrary HTML within any lexia by enclosing it in <html> tags. So for instance to include an image:
    • <html><img src=”mypic.jpg”></html>
    • (image should be in the same folder as your project file)
  • More advanced features possible: see the Twine documentation

Leave a Reply

Subscribe to RSS Feed