It’s YOUR Write!

Victor R. Ruiz

Learn how Twine can be used to make interactive games and stories.

Have you ever wanted to make a videogame, but you’re more comfortable as a writer than an artist? Or maybe you want to make interesting games that aren’t all about action? Do you want to make stories you’ve written come to life? Maybe you just want an easy way to get started with games without having to be an experienced programmer first?

If any of those are true for you, then you might want to try learning how to write interactive fiction.

Interactive fiction has been a part of videogames since the beginning of computers. Back in 1976, Will Crowther created the very first “interactive fiction” game for a computer: Colossal Cave Adventure. Colossal Cave Adventure was a small game where the game described every scene in text and you typed in a description of what you wanted to do next.

In this way, Colossal Cave Adventure was the prototype for text adventure games. These kinds of games were at their most popular back in the ’70s and ’80s, but they’re still being made today! A program called Inform7 is a really popular way to design these kinds of interactive stories. One of my personal favorites is a game called Photopia, a short and strangely poignant story that shifts between small scenes of space exploration, high fantasy, and real world tragedy with color as the underlying theme:

Text adventures aren’t the only kind of interactive fiction games that people make & play. There’s also visual novels, which are much more focused on art. Visual novels usually give you more limited choices in the stories that make it feel like a choose-your-own-adventure story. A great modern example of a visual novel is the game Long Live The Queen where you’re playing as a princess trying to survive subterfuge and court intrigue long enough to claim the throne. It was written with a framework called “Ren’Py” that lets you write visual novels in the Python programming language.

Now, we’re going to talk about a third, very easy to use, yet flexible system for making different styles of interactive fiction: Twine. Twine is fundamentally built around the idea of links and passages. You write passages that can either be scenes, descriptions of things, locations, or even menus for managing your character’s inventory. In Twine, you can tell pretty much any type of story. It’s centered around text, but you can still include images and play around with the formatting and appearance of your story.

Also, Twine is built off of really accessible and easy to use technology: HTML, CSS, & JavaScript. These are already the building blocks that every website is made from.

So we’ll go through some of the basic concepts and point you to some examples of games in Twine.

First, you can get started with Twine really easily through the main website: http://twinery.org/. All you need to do is click on the link that says “use it online”. After a short explanation of what Twine is and a link to their wiki, you should come to something that looks a lot like this:

From here, click on the +Story button to start a new project. Now we can introduce the two most fundamental concepts of Twine: the passage and the link.

A passage is what’s displayed on screen at a given time. In a Twine game, you’re always in a passage. Now, passages can mean a lot of different things. They can represent scenes or chapters in the story, dialogues taking place between characters, or places the player can visit. So if you want multiple rooms in a house, those might be different passages. If you want different choices in conversations, you can have different passages correspond to different dialogue that might happen. Even more complicated ideas like combat or inventory systems will be encoded as separate passages. Twine uses the concept of “passage” to do a lot of things.

The obvious question, then, is how do you connect passages? You connect passages with links. You can make links inside a passage with the double brackets syntax [[NameOfPassage]], like in the following screenshot.

With just links and passages, you can tell some pretty complicated interactive fiction stories. You can have conversations and adventures, exploration and puzzles. But that’s not all Twine can do!

There’s an entire programming language within Harlowe, the default “story format” of Twine, that allows you to add code to make your game more interactive or interesting. Within a passage you can have code that displays text only if certain conditions are true. You can have loops or countdown timers or code that changes the CSS classes of the passage when you click a link. There’s an entire rich programming environment for you to use as you learn Twine!

At https://clarissalittler.github.io/interactive-fiction/TwineDemo.html I’ve written a small collection of game styles to illustrate some of the things you can do with only a bit of programming. We have a puzzle game where you can accidentally blow yourself up if you enter the wrong code too many times. We have a horror-ish story where you have to figure out how to avoid being possessed by an alien intelligence. Finally, a tiny adventure game where you need to find the exit out of the caves you suddenly find yourself in.

You can download this game from github at https://github.com/clarissalittler/interactive-fiction and load it into Twine yourself. From there you can look at the code and learn more about how to do simple programming in Twine.

Learn More

The Photopia entry on the Interactive Fiction Database

http://ifdb.tads.org/viewgame?id=ju778uv5xaswnlpl

Ren’Py homepage

https://www.renpy.org/

Main Twine site

http://twinery.org/

Dan Cox video tutorials

https://www.youtube.com/playlist?list=PLlXuD3kyVEr5tlic4SRe6ZG-R9OyS1T4d

Vegetarian Zombie tutorials

https://youtu.be/1jukyU4EK2M?list=PLFgjYYTq6xyjBtXJTvEaBTVUWxirY6q24

Offical Twine guides

http://twinery.org/wiki/twine2:guide

Official Harlowe 2 documenation

https://twine2.neocities.org/

Twine game samples

https://clarissalittler.github.io/interactive-fiction/TwineDemo.html

Inventory systems in Twine

https://gersande.com/blog/designing-inventories-in-twine-2-with-the-built-in-harlowe-macros/

Also In The December 2017 Issue

Learn some nifty coding tricks while creating a Formula EV3 Race Car.

With binary search, you don’t have to be a mind reader to beat this simple coding activity.

Controllers have come a long way in 50 years. Let’s appreciate the bulky, awkward ancestors that led us here!

Take your Scratch games to the next level by adding multiple modes with multiple sprites.

Let the CSS Zen Gardens wow you with variety and elegance. Making a pretty website isn’t so complicated after all!

An introduction to a hip new alternative to Java. It’s all the rage in android development!

Resources to transform you into a web virtuoso, from messaging apps to testers to code converters.

New treasures and new enemies await in two unique, dangerous realms.

Create your own 3D digital museum and learn how you can help preserve cultural artifacts.

Interesting stories about computer science, software programming, and technology for December 2017.

Add data types to your new programming language in this third installment of the series.

Links from the bottom of all the December 2017 articles, collected in one place for you to print, share, or bookmark.