Twine as a Prototyping Tool

I’m working on a commercial game in Unity 4. But before I write the first line of C# or import my first sprites, I’m building prototypes in Twine.

Twine, for the uninitiated, is a tool for making hypertext games in the form of webpages. This has been done before, but what makes Twine special is the visual interface.

Twine interface 1

Twine map from “What Are Little Girls Made Of?”

A game developer working in Twine can create a game without knowing anything about programming. It’s helpful, of course, since entire new vistas of gameplay open up to a Twine designer who understands how to declare variables and set up if/then/else statements. For the extra-ambitious, spectacular things can be done in Twine with Javascript.

But it’s not necessary for a basic Twine game. All that’s necessary is to put links-to-be in [[double brackets]]. Twine handles the rest.

Twine interface 2

There has never been a video game creation tool with such a low barrier to entry. And what’s more, Twine is free.

For these reasons, Twine has gained a slow but increasingly strong foothold in the indie development scene. Since its debut in 2009, an entire community of game designers has blossomed around creating and sharing Twine games. Notable game developers such as Anna Anthropy, Porpentine, and Zoe Quinn have embraced Twine, and in April 2014, Chris Klimas (the creator of Twine), observed with wonder that IFComp 2013 included more games created with Twine than with Inform 7.

But Twine’s usefulness goes beyond creating games.

Prototyping in video games

In the context of video game development, the purpose of a prototype is to increase the developers’ understanding of a project so that informed decisions can be made about how the game should be implemented.

The faster a prototype can be developed, the better, and the less engineering time needed, the better. Setting up a Twine prototype is as simple as a paper prototype – in most cases, it requires no engineering time at all.

Four things that you can prototype in Twine:

1) User flows.

I’m using Twine to plan out my current project’s user flows. It gives me a high-level look at my menus and engagement loops….

Twine user flows

…and then, when I run the Twine prototype, I can step through as if I were a user and look at what options are available to me at any given point.

Twine user flows 2

As a bonus, I can tweak this Twine prototype to show screenshots of the menu UI, and then I can show it to playtesters to see whether the UI and flow make sense to an external party. I’ve been at a studio before where this was done in Flash, but since I don’t know Flash, this is easier than learning.

2) Code architecture.

I’m using Twine to architect my code before I get started. I’m fairly sure this is traditionally done on a giant whiteboard, but there’s only a small whiteboard in my office. Plus, Twine gives me drag-and-drop map rearranging.

This is an overview of the systems architecture. Seeing it in Twine helps me visualize which systems will communicate with each other and spot problems in advance. I’m going to do the same thing with classes within each system before I get rolling.

Twine code architecture

This could be a bit cleaner than it is. But you get the idea.

You may note that what I’m really doing here is using Twine as a big flow chart. I don’t think it will be useful to “play” my code architecture in a browser! But it’s a flow chart in a tool I already know – and that saves me time and energy. (Plus, if it ever is useful to get a computer’s-eye view, I’m ready to go.)

3) Branching narratives.

This is a gimme, of course; Twine was designed as a narrative tool.

It’s worth mentioning, however, because I’ve been in a design situation where a complex narrative was outlined in a PDF. All parties involved agreed that the PDF was correct – but no two people shared the same interpretation of what the PDF meant, which led to confusion and delays. Eventually, we diagrammed the narrative and came to a mutual understanding that way.

With a Twine prototype, we would have had a built-in diagram from the very beginning, and then we could have stepped through the narrative in our browser. The confusion would have ended before it began.

4) Other branching game structures.

Anything that requires a branching diagram to understand can be meaningfully prototyped in Twine.

Examples: Mass Effect’s side quest requirements. Alpha Centauri’s tech trees. International diplomacy in Civilization. That excessive thing Path of Exile does.

When is Twine the wrong prototyping tool?

Twine is the wrong tool for anything that can’t be converted into discrete pieces of text. Generally speaking, these are things that rely upon spatiality or time. For example, while Twine would be a good tool for examining the story progression of Ridiculous Fishing, it would be terrible for examining the actual fishing mechanic.

Tetris Twine prototype

Also not recommended: Tetris.

Bookmark the permalink.


  1. Right on Carolyn!

    Another cool prototyping use for Twine is sketching out graphic novels. Twine’s passages can act like panels in a graphic novel page.

  2. Hi,
    great article for this new way to use Twine. Can i translate it into french?
    I use Twine2 for french IF and i write 2 articles to explain how use it.

Leave a Reply

Your email address will not be published. Required fields are marked *