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
Get the 1.3.6 alpha if you run into errors
experimental test build (fixes <<remember>>, printing 0 error, incorporates targetable CSS)
Twine resources
Technical
Twine Google Groups (good place for technical chat)
Appearance
Image to color palette generator
Google Font collection (copy Javascript into script file and update font-family)
Source code
Most of my games link to source
Even Cowgirls Bleed (right click download)
electro primitive girl (right click download)
Other
TwineHub’s huge list of Twine games
Twine Garden (tumblr for showcasing the aesthetic of Twine node maps)
Twine, interactive fiction culture, hypertext design, and DIY creation essay
Twine jams
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
Defining custom CSS passage transitions for Sugarcane
Timer (by Stefano Russo) (as seen in Panic! and CYBERQUEEN)
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 whitespace from code)
Visual
apply CSS to specific passages
Color changing macro/boxes (as seen in Reset)
Sidescrolling CSS and Jonah tweaks (as seen in Capri Toot)
Sugarcane passage transition: dissolve
Sugarcane custom CSS passage transitions
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}
Images
Javascript for preloading images (extremely useful for image-heavy Twines)
How to insert images into Twine without linking
Mechanical
Timer (by Stefano Russo) (as seen in Panic! and CYBERQUEEN)
<<textinput>>: embedded text input which can be set to variable
Pop-up text input: <<set $name = prompt(“What’s your name?”)>>
macro for displaying random text
How to simulate for, while or do loops in Twine
macro to generate random nouns and adjectives
Javascript arrays in Twine (like for inventories)
<< timedreplace >>, << timedinsert >>, << timedremove >>: Timed text replace
<<hoverrevise>>: Toggle text anywhere with mouseover
<<display>> macro altered to allow code parameters
visited() (see how often a passage has been visited)
<<else if>>, an improvement to <<if>>
<<hoverreplace>> and <<mousereplace>> (change a span of passage text into a different span when the mouse moves over it)
<<once>> (show text first time you visit page)
Improved back and forward buttons in Sugarcane (remembers game state changes when you use the browser’s Back button)
Templates
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
<<replace>>: Replace link with something else when clicked
<<cyclinglink>>: Cycling links
<<mouseoverlink>>: Change text on mouseover
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
Macro to use hidden Youtube videos as background music
Experimental
How to integrate Unity and Twine
Utility
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
Twine: loading jQuery without editing the HTML
Twine tips
You can’t link back to the Start passage, so make a copy of it or use <<display “trueStart”>> instead.
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.
Twine doesn’t (currently) print 0 (like if you wrote <<print $var>> and $var was 0. Solution: <<if $var1 eq 0>>0<<else>><<print $var1>><<endif>>
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.
[...] My Twine resource page (snippets, game jams, etc) [...]
…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.
[...] 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. [...]
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…
[...] Twine Documentation: http://www.gimcrackd.com/etc/doc/ Twine Resources [Porpentine]: http://aliendovecote.com/?page_id=4047 Twine Google Group [For Extra [...]
[...] 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 [...]
[...] Porpentine [...]
[...] 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 [...]