Twine Resources

Twine is a simple but powerful game creation tool focused on hypertext. Anyone who can use a text editor can use Twine. When a game is finished, it generates an HTML file that can be played by anyone with a browser. Twine has been used to create text adventures, interactive poems, strategy games, educational tools, real time games, and much more.

Download it here (latest version: 1.4!)

Note: The latest version of Twine and the creation of the new Twine site makes some of the information on this page obsolete.

 

Twine resources

Technical

Official Twine site

FAQ/How-to/Common questions

Twine Google Groups (technical chat)

Leon Arnott’s Twine macros (essential)

List of Twine macros

Appearance

Twine-specific CSS guide

Color scheme designer

Image to color palette generator

Google Font collection (copy Javascript into script file and update font-family)

Online image map creator

Source code

Most of my games link to source

Even Cowgirls Bleed (right click download)

electro primitive girl (right click download)

Other

Philomela (quick simple Twine hosting integrated with Twitter)

TwineHub’s huge list of Twine games (not currently updated)

Twine Garden (tumblr for showcasing the aesthetic of Twine node maps)

Twine, interactive fiction culture, hypertext design, and DIY creation essay

 

Twine jams

 BIG CHAOS TWINE JAM

BIG TRASHY TWINE JAM

 

Twine code

Here are some ways to add extra functionality to your Twine games.

Some are simply copy/pasting some lines of Javascript into a passage with the tag “script”. Others are CSS tweaks that go in a passage with the tag “stylesheet”. Many have their own instructions.

Please send new info to me on Twitter or leave a comment here!

 

Core (an arbitrary list of what I think are some of the most important snippets)

<<cyclinglink>>: Cycling links

apply CSS to specific passages

Instant passage transition

Defining custom CSS passage transitions for Sugarcane

One-screen Jonah

<<timedgoto>> (simple timer)

Javascript for preloading images (extremely useful for image-heavy Twines)

Twine macros to use sound files with HTML5 audio

escape line breaks with backslashes (avoid whitespacefrom code)

Combined <<Replace>> Macro Set

Record data to Google Drive spreadsheets + fetch it

 

Visual

apply CSS to specific passages

multipanel Twine

Color changing macro/boxes (as seen in Reset)

Sidescrolling CSS and Jonah tweaks (as seen in Capri Toot)

Sugarcane passage transition: dissolve

Instant passage transition

Sugarcane custom CSS passage transitions

Shaking screen (demo)

add/remove/toggle tags ingame (for CSS purposes)

apply inline CSS to passage text

Defining custom CSS passage transitions for Sugarcane

 Image with clickable zones demo

CSS stylesheets (HyperCard, ZX Spectrum, etc)

CSS to remove left border in Sugarcane: #passages {border-left: 0px !important}

Youtube video background

apply CSS to individual characters

Display numbers as text

 

Images

Javascript for preloading images (extremely useful for image-heavy Twines)

Twine image markup

How to insert images into Twine without linking

 

Mechanical

<<rememberall>> <<forgetall>>: Remembers or forgets all variables.

Timer (by Stefano Russo) (as seen in Panic! and CYBERQUEEN) (the one below is much simpler and good for most uses though–the advantage of this one is a countdown display)

<timedgoto>>, a simple timer

<<textinput>>: embedded text input which can be set to variable

Pop-up text input: <<set $name = prompt(“What’s your name?”)>>

Form text input: <<textinput $variable “passage to visit on button click” “button name”>>

either(): picks randomly from list (random selection can be assigned to variable)

Record data to Google Drive spreadsheets + fetch it

Display random text

Dynamic Minimap

macro for displaying random text

How to simulate for, while or do loops in Twine

macro to generate random nouns and adjectives

Health bars

Javascript arrays in Twine (like for inventories)

<<display>> macro altered to allow code parameters

 Text loop

visited() (see how often a passage has been visited)

<<else if>>, an improvement to <<if>>

Improved back and forward buttons in Sugarcane  (remembers game state changes when you use the browser’s Back button)

 

Templates

SugarCube (alternate story format–has robust saves, semantic HTML5, fully persistent state, and more)

One-screen Jonah (make Jonah display one passage at a time instead of scrolling–basically a mode where players can’t use Back to undo)

 eliminate the back button functionality in Sugarcane

How Rewind actually works/using bookmarks

Visit previously visited passages in Jonah

 

Links

 Combined <<Replace>> Macro Set (combines <<replace>>, <<timedreplace>>, <<revision>>, <<hoverreplace>>, <<once>> macros, all their variations, + new macros)

<<cyclinglink>>: Cycling links

<<mouseoverlink>>: Change text on mouseover

<<once>> (show text first time you visit page)

 

Audio

Twine macros to use sound files with HTML5 audio (best/most flexible solution for audio in most cases)

Twine snippet to put in StoryMenu for audio player

hidden Youtube videos as background music macro

improved YouTube background audio macros

 Adding SWF player for music

 

Experimental

How to integrate Unity and Twine

 

Utility

Use Google Drive to host Twine (somewhat obsoleted by Philomela)

mix HTML tags and Twine markup syntax

escape line breaks with backslashes (avoid whitespace from code)

HTML file to Twee source code converter

How to use parameters and variables in custom Twine macros

Twine code shortcuts, tips and unconventional operators

Making Twine work on phones

 Twine: loading jQuery without editing the HTML

 <<autolink>>, a macro to automatically make links

Whitespace generating macro

 

Twine tips

You can’t link back to the Start passage, so make a copy of it or use <<display “trueStart”>> instead.

Click and drag text out of a passage to create a new passage + turn it into a link

The error “The program can’t start because MSVCP71.dll is missing from your computer.” can be solved by searching for that .dll on your computer and placing it in the Twine folder, or alternatively by using the Twine alpha (I believe).

To get rid of the sidebar, edit the HTML file. Deleting the Rewind part will break Restart, so if you want to keep Restart but remove Rewind, just delete the words “Rewind” but not the surrounding code.

To make permanent changes to a template, go to your Twine\targets folder and edit the template html there.

When using CSS, some lines need “!important” appended at the end to override the default CSS. Example: “a {font-size:150% !important;}”

Twine code takes up whitespace (so each line of code, while hidden, will take up screenspace in the final game). To fix this, use the <<silently>> <<endsilently>> macro. If that breaks anything, delete spaces between code as a back-up solution.

25 thoughts on “Twine Resources

  1. interleaper says:

    It’s probably a good idea to avoid using <><> tags in passages that display themselves, as with the “for, while or do loops” link above.

    I don’t understand exactly what’s going on, but if you take the ForLoopDemo from that link, and change the passage in it like so:

    ::ForLoopDemo
    <>
    <>
    <>

    <>… <><>

    <>

    …then instead of outputting “1… 2… 3… 4… 5…” as the original does, it outputs “10… ” and that’s it. Only the last iteration outputs anything and something weird is happening to the variable tracking as well, even though all the active code is outside the silent brackets. This happens whether you have anything in the silent brackets for not.

  2. [...] My Twine resource page (snippets, game jams, etc) [...]

  3. interleaper says:

    …dammit, the tags got eaten… please read all curly braces as angle brackets.

    It’s probably a good idea to avoid using {silently}{endsilently} tags in passages that display themselves, as with the “for, while or do loops” link above.

    I don’t understand exactly what’s going on, but if you take the ForLoopDemo from that link, and change the passage in it like so:

    ::ForLoopDemo
    {{if $i lte 5}}
    {{silently}}
    {{endsilently}}

    {{print $i}}… {{set $i = $i + 1}}{{display “ForLoopDemo”}}

    {{endif}}

    …then instead of outputting “1… 2… 3… 4… 5…” as the original does, it outputs “10… ” and that’s it. Only the last iteration outputs anything and something weird is happening to the variable tracking as well, even though all the active code is outside the silent brackets. This happens whether you have anything in the silent brackets for not.

  4. [...] This tutorial by Anna Anthropy will have you up and running with Twine in as little as half an hour. I definitely suggest starting here. If you want to go further, Porpentine has a list of amazing resources including code snippets, documentation and other useful links here. [...]

  5. Dr. Fleming says:

    I have pretty much the same problem as interleaper regarding the silently macro (I tried it on some conditional code in the Creation Under Capitalism… article and it fucked stuff up). For the sake of anyone reading this: I’ve decided to condense all possible commands in one line in order to prevent unwanted whitespace (Porpentine herself recommended the exact same thing in that article, but still). Hopefully this will be fixed in the next version! I think it’s already been brought up in the Tweecode group…

  6. [...] Twine Documentation: http://www.gimcrackd.com/etc/doc/ Twine Resources [Porpentine]: http://aliendovecote.com/?page_id=4047 Twine Google Group [For Extra [...]

  7. [...] like to thank Porpentine for all her help with this. She’s the undisputed Queen of Twine. Her Twine resources page really helped me stop being afraid of CSS (the stylesheet, not the [...]

  8. [...] Porpentine – sviluppatrice di giochi e co-curatrice della webzine FreeIndieGam.es – ha raccolto tutte le risorse per Twine, compresa un’ottima guida all’uso realizzata da Anna [...]

  9. Jacqueline says:

    Thanks for this great set of resources. I know that I can use «remember» to set a cookie for the current state of a variable, and that the URL can be bookmarked to capture the state of which links have been clicked, but do you know of anyone who has coded this and made it an automated Save option along with the commonly provided Restart and Rewind links? Seems doable, but before I tackle it I was curious if there’s a wheel already invented somewhere. Thanks!

  10. [...] Download Twine here.  Read the documentation here.  Check out Porpentine’s Twine resources here. [...]

  11. [...] Porpentine’s Twine resources has everything you could need. [...]

  12. Chewy says:

    Just started off, working with Twine after reading “Beginner’s Guide To Making Your First Video Game | Kotaku”
    So far I am enjoying the simplicity of this program and I can’t wait to write my first story. However I want use a code that allows Users to enter their name into the story and Twine remember it. How do I do this?

  13. Thank you for this resource I’ve been looking through it for a while now :) I have a question though. If I use the <> macro to remember a variable, what can I do to stop the game from remembering the variable later on down the line?

    I want to use this macro to give players a sort of “new game plus” kind of thing, but I want to give them the option of starting over as if they had never played the game before (by having the game forget the remembered variables).

  14. porpentine says:

    I’ve never used it, so I may be wrong–but I think it’s stored in cookies from then on? I couldn’t say for sure, I would ask here probably https://groups.google.com/forum/?fromgroups#!forum/tweecode

  15. […] I found tools that were accessible to me and respected my time, like Twine and Gamemaker, and when I saw games by people like thecatamites that lit my brain up instead of […]

  16. dsrtrosy says:

    Where can we find very basic troubleshooting advice? I spent about 6 hours today painstakingly copying and pasting the bits of my story into twine, creating the links, beginning on CSS stylesheets and some of the other coding I needed to do, and saving every few minutes. Before I closed the program, I saved again. Tonight–the game is gone as if it never existed, but I have about 80 pages of absolute garbage that will only open in Text Edit. What the heck happened?

  17. lit says:

    thanks for posting all of this. since learning about IF, i’ve found i feel a lot more comfortable writing in hypertext than in text-prose, and you’ve been a tremendous help in the learning process.

    by the way, in the current version (1.4), twine now prints “0″ when using the print macro on a variable whose value is 0, so if you care you don’t need to keep the workaround up on this list anymore.

  18. porpentine says:

    i’m super glad to hear that! thanks for the heads up :)

  19. Greatbatch says:

    Thanks for all the amazing stuff posted above, Porpentine. It has been super useful. As someone new to CSS, a lot of the twine code you reference has proved surprisingly uncomplicated.

    One thing I can’t figure out is how to do multiple if/thens in one passage.

    For instance:
    <>
    You make a grilled cheese.
    <>
    <>
    You eat dry bread. Gross, but you are hungry.
    <>
    <>
    You eat cheese on its own. Good thing no one is watching.
    <>
    You have nothing to eat. You go hungry.
    <>

    This method seems very sloppy. Is there a better way?

  20. Greatbatch says:

    Sorry, all the variables were deleted. There was supposed to be the following, in the same order

    “if $Cheese and $Bread”
    “else”
    “if $Bread”
    “else”
    “if $Cheese”
    “else”
    “endif”

  21. porpentine says:

    i think the new twine has elseif or something like that? from 1.4.1′s patch notes:

    “The «else if» macro, which can also be written as «elseif», allows you to essentially have multiple «if» macros chained together, without needing to nest each of them within the «else» / «endif» tag pair of the other.”

Leave a Reply

Your email address will not be published. Required fields are marked *


8 − five =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>