There are two kinds of files that Twine works with: story files, which are editable versions of your stories that you can only open with Twine, and output files, which are read-only versions that can be opened in a Web browser. While you write your story, you make changes to your story file, then check to see what the output file looks like. When you’re done, you can post your output file to a Web site or e-mail it to others.
Twine story files have a .tws file extension; output files are saved with a .html extension. If you’ve worked with Adobe Flash before, the situation is similar to Flash’s .fla and .swf formats. When you start Twine, it presents you with a blank story file. You can use the Save Story and Save Story As items in the File menu to save your work to your computer, and Open Story to retrieve it later. Twine also keeps track of story files you’ve recently used in its Open Recent submenu.
To create an output file, choose Build Story from the Build menu. This asks you to choose where the output file is saved, and then opens the resulting file in your Web browser so you can see your work. Once you’ve built an output file once, you can rebuild it in the same place by choosing Rebuild Story. The View Last Build menu item opens the most recent build in your Web browser.
If you’re in the process of writing your story and wish to quickly review changes, the Test Play option lets you build and play a temporary HTML file which doesn’t need to be saved to a directory. You can also begin a test play from a particular passage by right-clicking it and selecting “Test Play from Here”.
When you edit your story in Twine, most of the window is taken up by your story map. Each passage in your story is shown as a box, with links between passages shown as lines between the boxes. (Blue lines denote connections made by the <<display>> macro, and faint lines denote connections between resource passages (like images and stylesheets) and the passages that use them. The faint lines can be disabled in the application’s Preferences.)
To gain a broader or narrower view of your story, you can zoom in and out with buttons on the toolbar, or press the + and – keys on your keyboard. As you zoom in, more text of each passage’s body is displayed on the map. The Zoom to Fit button on the toolbar will automatically zoom the story map so that all passages are visible at once.
You can use the scrollbars on the window to move around the story map, or hold down the space bar and drag the mouse around to quickly pan across your story map. To add a passage to your story map, click the New Passage toolbar button or choose New Passage from the Story menu. You can also right-click an empty space in the story map to bring up a contextual menu allowing you to create a passage, or middle-click an empty space to immediately create a new passage there.
You can drag your passages in any arrangement you like on your story map; it won’t affect what the output file will look like. You can also cut, copy, and paste passages as you would with any other application. To select more than one passage at a time, hold down the Shift key as you click on them, or create a rectangular selection box by dragging your mouse across an empty part of the story map.
It is said that the most important tag in early World Wide Web history was <img> – with it, web pages could finally stop looking like structured documents and start looking like anything they wanted to look like. This was the Web’s defining advantage over its competitors. In that sense, images and hypertext are intimately intwined, and in Twine their revelance is not diminished.
- Importing images
Images can serve many purposes in a story or game – passage illustrations, page backgrounds, interstitial GIF animations, a title logo, and so forth. Given their vital importance, Twine enables you to incorporate image assets into your project’s story file, as separate “passages” alongside your text. Images stored in the story file will be embedded inside a finished story’s built HTML – guaranteeing that the images will always be visible in the story, even if the HTML file is uploaded to a site or service like Philomela.
You can add an image asset to your story by either using the “Import Image” menu items in the Story menu, or by dragging and dropping an image file into the Story Map: In Twine 1.4.2 or above, the program will ask you, when you close a passage, if it can automatically import the external images used in it – the images referred to by URLs.
Image assets appear in your story as passages with teal titles: If you try to edit an image, you’ll be presented with a preview. From there, you may save the image back to a file, copy it, or rename it.
- A note about formats
Since Twine games run in a web browser, any format that the browser supports can be displayed. However, the Twine development program only supports the following formats as imported image assets: PNG, GIF, JPEG, WebP and SVG. Furthermore, due to limitations in wxPython, WebP and SVG images will not display in the Story Map (but will remain usable in the browser).