Case Study: Twine

By Al Preston

---

If you’ve played the museum’s Saints Game, you’ve played a Twine game! Twine is an open-source program that allows users to design and create text-based games much like Saints Game. If you go to Twine’s website you can play all kinds of games users have made.

I greatly enjoyed making Saints Game. Twine isn’t a perfect system, however. This case study will focus on Twine as a program and a tool for historical work.

If you’ve never seen a text-based game before, it’s all in the name. Think of a choose-your-own-adventure book, but with text on a screen and math. Twine makes creating a game like that very easily. When you go to Twine’s website you can choose between using the browser or the desktop version of the program. Each has its pros and cons.

I used the desktop version. I liked that I could use it when my computer was offline and that it could easily handle how big Saints Game became (about 512 unique panels). However, features easily used in the browser version of Twine (that is, a version that runs in your internet window, be that Chrome, Safari, or Fire Fox) did not work in the desktop version or worked very differently.

I could not choose between coding languages or styles of game creation (AKA, how you visually design the game). I was stuck with what was the default which meant some of the designs displayed in the Twine manual (link) would not work, such as a typewriter text design that would make it appear as if the text was being typed onto the screen.

I also couldn’t add images to the game as they refused to load on any computer outside of my own. That has something to do with how the two versions call on images to display them. They aren’t downloaded directly into the game.

Thankfully, I didn’t want to go too fancy with Saints Game. Mid-way through, I did try to switch from the desktop to browser version, but by that point, the game was so big that my browser kept crashing trying to load it all. So, if you’re looking to make a small game or highly stylized one, I recommend the browser version.

Functionally, Twine is really easy to use! You don’t even need any programming experience, although it never hurts. For pre-set and easy animations like this:

You just have to highlight the test you want to animate then pick the animation. It’s the same process for choosing colors.

Below, I’ll show off some panels of Saint’s Game and their finished page to demonstrate how Twine works.

            To start, here’s how big Saints Game is, all 512 panels. This is the general layout of Twine games in the program itself. Each box is a panel that can be viewed by the player. Each line coming from the box goes to one of the options presented to the player. For example, if the player is presented with a question in which the options to choose from are ‘yes’ and ‘no’, the ‘yes’ option has its own different panel and the ‘no’ option has its own different panel. You can have two responses go to the same panel or have hidden options that are only visible when certain criteria are met by the player, we’ll see that in a bit.

            This is a great example of what I just mentioned. You can see the ‘baby girl’ panel has lines coming from it going to the ‘Codex Amiatinus’ and ‘The Aeneid’ panels. Both of those panels are the possible choices from the ‘baby girl’ panel. To minimize confusion, Twine labels each new panel with the text of the option in the previous panel.

            As you can see, that choice branches the player off into two different directions, rather than the same direction with different possible responses. Let’s focus in on that ‘baby girl’ panel to show off the color and animation parts of Twine.

            On the left is the Twine code that makes the display image on the right. As you can see, there’s a lot that goes into changing the color or a word or making it blink. There are a few coding languages that make this effect, especially in web browsers. The coding around the word mother creates the color and the blinking effect using that coding system.

            As mentioned before, Twine has other coding systems available for use. I just stuck with (and kind of had to) the default options.

This is what the coding looks for a particular panel.

This is what the above panel looks like in game.

            However, as you can see with these two above screen shots, that doesn’t mean I can’t get creative. There are a lot of ways to stylize text in Twine. In playing around with their pre-set animations and styles, I was able to create God’s name and words in a vastly different look than the normal text. I use this system throughout Saints Game to make sure it’s clear to the player who is talking.

            Now, I mentioned before that players can access hidden options. To do that, one must assign a value to responses or panels and create conditions in which the player can gain or lose those values in order to unlock secret options.

            Above is an example of that. Here, the player has chosen to take a bag of marbles with them while sneaking out of their home. That gave them a sneakiness value of 15 which they can visualize on the panel thanks to another little bit of code. Later on, the coding looks like this:

            As you can see, depending on how the player made their choices prior to this panel, they may only see a few of the options of the ones available to them.

            I use this method a few times, but my favorite instance is in the Scribe path of the second portion of the game. I explained all of that in a video on our YouTube channel.

            As you can see, Twine is a very cool and interesting tool, but is it good for teaching history?

            As I’m sure some of you are aware, I love games and teaching through them. I have found that making learning a game can help people retain information and games themselves can help people find new things to look into and enjoy.

            A combination of interactive play and good story telling can get people invested in topics they otherwise would have passed up. Twine is a very useful tool in that aspect. It’s relatively easy to access and use for creator and player. Additionally, it is flexible enough to handle a lot of creativity.

            I will warn that, as with all stories and games, there are some topics not suited to this mode of education. The toucher the topic, the more difficult it will be to make a respectful attempt at a game. You have to be a real expert and willing to defend your choices or even be willing to change your own stance and understanding of the topic to do so.

            If you’re interested in a quick tutorial on Twine, I recommend the lessons on the programming historian! They’re not only easy to follow, but free!

            Please do check out Saints Game or any of the other Twine games on their website. Make your own Twine too! It’s always fun to learn a new skill.