Tech Tip: Getting Started with Twine
Twine is a browser-based tool that allows you to design a branching “choose-your-own-adventure” story which you can then download as an HTML file, publish in your own webspace, and also embed in a blog post or in a Google Site page (or in any other webpage where you can use iframe-style embedding). Here are some examples: Dungeons and Decisions is a Twine-based Storybook (with a WordPress blog to display the files) and Tragedy in Cate Center is a single story in a Storybook (with Google Sites to display the file).
For this tip, you will design something very simple to see how Twine works. I did a simple “pick a number” example here which you can see embedded in a blog post:
Twine can also get very elaborate because it has an entire programming language of its own. You can find lots of tips and tutorials at the Twinery.org site. For this tip, you will just create something simple that you can test in the Twine space. Maybe that will inspire you to write a story like this for class and then share it in your blog or your project website. I included a Twine story in my Portfolio for example.
Here’s how to create your first story:
Go to Twinery.org. Click on the “use it online” option that you will see near the top right. Click through the “Hi!” screen, and then click the green +Story button to create a story file. Give the file whatever name you want.
Create a passage. Each “chunk” of text is a passage, and it appears as a box on the screen. The title of the passage is for your reference; it will not appear in the game. What you type inside the box is what will appear in the game. So, for example, in my “pick a number” story, I created this passage which I called “pick” and which has two options:
As you can see, to make something a clickable option, you just put double brackets around it. You can have one or two or more options inside any passage. You have to have at least one option for the player to continue.
I did a simple pick-a-number type of game. You can come up with whatever you want! Just stick with something simple for the purposes of this test, and you can always come back and add more to the game-story later.
Edit the new passages. When you close the passage you just created and edited, you will see new boxes on the screen that are automatically generated by the text you typed in the brackets. Fill in those passages, either creating more options, or ending the game.
You can keep on creating passages, or you can play your game!
Play! To play your game, click on the play button in the lower right-hand corner. When you are playing the game, there’s a faint “undo” backwards-looping arrow (it only appears if you hover over it) that you can use to retrace your steps back in the game to try out all the options:
And that’s all there is to it!
Game file. The game will be saved in your browser, but it’s also a good idea to download the HTML file if you want to save it, and if you want to publish and share the game, the HTML file is what you need. To download the HTML file, click on the menu up-arrow in the lower left-hand part of the screen and choose “publish to file,” which will then prompt you to download the file to your computer.
Finishing Up: If you have played your Twine game there at the Twine site, congratulations: you are now the author of a hypertext story! Write up a blog post about the experience. Do you think you will want to write a Twine story for this class? Can you think of some other ways you might use Twine? Make sure to include the phrase “Tech Tip: Twine” in your blog post title and also use “Tech Tip” as the label on the post; then you can do the Declaration.
