Twine is, in my opinion, one of the absolute greatest freely available tools we have, currently. I use it for all my storyboarding, plot maps, and the like. I’m actually really excited about this particular tutorial. I think everyone should be aware that this tool exists.
So… What is Twine?
Per their site(https://twinery.org/):
Twine is an open-source tool for telling interactive, nonlinear stories.
What a coincidence…those are some of the same traits we see in ARGs…
But… Twine is so so so much more. Twine is a notepad. It’s a flowchart. It’s a storyboard. It’s a webpage. But most importantly, it’s a creator’s best friend!
This tutorial is going to seem kind of technical, as we get further through it. But believe me when I say… It’ll pay off in the end. So, with that said… Let’s get started!
Starting your Project:
Our first course of action is going to be downloading Twine. There’s a browser-based tool as well, but we’ll use the application. Go ahead and navigate to Twine’s website, here, if you haven’t already, and grab your copy! Once you’ve got that downloaded and installed, go ahead and open it up. You should be greeted with a screen similar to the image below (I’ve blacked out my own projects for personal reasons). For future reference, and googling…. Twine 2’s default story format is Harlowe.
![](https://i0.wp.com/argcreator.com/wp-content/uploads/2022/09/Twine1.png?resize=640%2C343&ssl=1)
On the right, we have the Twine logo, and a green button labeled: “+ Story.” Go ahead and click that, and enter the name of your new project!
From there, we’ll be welcomed into this lovely grid-patterned screen:
![](https://i0.wp.com/argcreator.com/wp-content/uploads/2022/09/image-5.png?resize=640%2C343&ssl=1)
Another one of the great things about Twine… it automatically saves for you. This, you’ll come to learn, is an absolute godsend of a feature.
Now that we’re in, you’ll notice a few things. The project title with an upward-facing arrow on the bottom left, a big green “+ Passage” button on the bottom right, and a little white square in the sea of blue grid, that says, “Double-click this passage to edit it.” So that’s exactly what we’re going to do!
Creating your first Passage!
![](https://i0.wp.com/argcreator.com/wp-content/uploads/2022/09/image-6.png?resize=640%2C343&ssl=1)
After double-clicking, you’ll have a new text editor window pop up, with a pretty interesting bit of buttons. We won’t cover all of them in this article, as some of them lead to much more complex conversations than we’re covering today. But there should be a few that you recognize straight away. Bold, Italic, Strike, for example.
Up at the top where it says untitled passage, is where you’ll name your passage. And the text block below is where the majority of the magic happens! In the above image, I named the passage “This is a Tutorial,” and the text block says “We made it!” for orientation purposes.
Go ahead and give your new passage a name, and some clever text to read, and then hit the “X” at the top right to exit. That passage now exists, and is deployable! Granted, we’re going to go a bit further before deploying. But still. This is a Twine experience! To test it out, go ahead and hit “Play” at the bottom right.
Your browser should open up, and your text should appear as a webpage. This is how you can test various things, should you choose to use Twine as your presentation vessel.
The Twine Web
Now that we have our first passage, and have seen it in action… It’s time to expand upon our project. We want to create a series of passages, and then link them together, to form an experience. Go ahead and make two or three different passages. They can be stories, ideas, whatever.
Once you’ve created them, we can start linking them together to create our “Twine Web.” To do this, we’ll jump back into the first passage we made, and grab this line of code below.
[[DisplayedText->FirstLink]]
Replace “DisplayedText” with whatever flavor we want to show the viewer. Maybe we want it to say “Start your journey,” or “Continue.” Whatever you choose, this is what will show on the page to the viewer.
Our second change will be editing “FirstLink” to the title of our first linked passage. This will be your destination for the viewer.
The result should connect your first passage to your second. You can see this change in the grid view with an arrow coming from the first, going to the second passage. This is the start of your web!
Alternatively, if you know what your next passage will be named, you can place that code in the previous passage and it will generate the new passage for you. In the image below, I created the “FirstLink” passage manually, and the other two by using the code line.
![](https://i0.wp.com/argcreator.com/wp-content/uploads/2022/09/image-7.png?resize=640%2C343&ssl=1)
Another thing to keep in mind, you can name your passages as your flavor text, and create a slightly shorter link method. Though I don’t personally recommend it, for organizational reasons. An example of this would be:
[[FirstLink]]
More Twine for your buck!
At this point, we have everything we need to create our own Choose Your Own Adventure story, or CYOA for short. It’s not the prettiest, but we can use this singular line of code to create sprawling text narratives. We can weave passages in and out, connecting them across hundreds and hundreds of possibilities. And while that’s massively exciting… That’s only scratching the surface.
Twine takes HTML, CSS, and JavaScript, to further add to the complexity of presentation and ability. You can add images, embed YouTube videos, hide ciphers and puzzles, and so much more. If this was the vessel we chose to present our game in, we’re set.
But now, for our final bit… We’re going to look at how to use just what we’ve covered with linking, to use Twine as a planning/storyboard tool. This will be an example of why I personally praise Twine so highly, and think every creator should have it downloaded.
Repurposing Twine
We’re going to start off using the handy dandy ARG Generator tool to pull a quick plot and character together. This is what we get:
Our main character, Windy Morgan is 33 years old, and originally worked as a Analyst for a questionable Pharmaceutical company. Despite what they appeared, the company was actually a cover up for their real purpose: genetically altering humans to become weapons .
The trailhead starts as our main character tries to connect to the player using the ROT13 cipher, in an Instagram image description .
Awesome. This sounds like an easy launch. Now I’m going to show you a quick breakdown of this generated story as a video, intended to be posted on YouTube. This would be the Trailhead if it were a real game (Yes, I know the generated plot says the Trailhead starts on Instagram. But the cool thing about the generator is it’s meant to be a tool to inspire, not take as law).
![](https://i0.wp.com/argcreator.com/wp-content/uploads/2022/09/image-8.png?resize=640%2C343&ssl=1)
So how does this work? Well, I renamed the first passage to Video1 and then renamed the linked passages to something a bit more useful to my workflow. Story1 leads to Story2 which acts as two separate scenes for the video (One exterior, one Interior) where I’ve described the video in detail. I was able to do this because I created “Plotpoints1.” Plotpoints1 is a breakdown using single sentences of the overall plot points in the scene. From there, I created a “Resources” passage to contain a list of the resources I’ll need to make this video work.
You’ll notice that Story2 connects to another passage, called “rot13puzzle.” This passage is where I store the puzzle, the solution, and the source I verified it with. If you’re unfamiliar with ciphers, rot13, or want a quick tutorial on how it works, click here.
With that said, I now have a visual map in Twine’s editor, as well as a browser-friendly map, that breaks down the essentials for getting this trailhead video together and out the door. I’ve posted the Twine for you guys to read through at the bottom so that you can get more value from the example. Enjoy!
Conclusion:
Twine is so ridiculously versatile, and can be used for so many things. You can create so many different things with it’s easy-to-use, and repurpose, editor. Stories, storyboards, planners… This list is limited only by your creativity.
Oh, and did I ever mention… It’s completely free?