Learning Twine
As part of my MA in User Experience Design, I was introduced to different ideation and prototyping techniques.
This blog post was originally published in 2022 as part of a reflective journal I wrote.
I am feeling super proud of myself today. Why?
The backstory
Years ago, a colleague (now former colleague) told me he had discovered something called Twine. It’s “an open-source tool for telling interactive, nonlinear stories” (Twine, no date). I was learning how to write interactive stories at the time so I was keen to explore this tool. However like many things, I became busy, didn’t have time to look and subsequently forgot all about it.
Until last week.
Twine was one of the tools listed for creating narrative prototypes.
“Ooooooh” I thought. “I’d like to have a go at that.”
So I went into the rapid ideation session, hoping that one of my ideas would provide an opportunity for me to have a go at learning how to use Twine and develop a narrative prototype. Unfortunately, my “crow tour guide” idea doesn’t seem to lend itself to that, at least not right now.
However, I realised I might be able to do something a little creative with revealing the theme. Something that might give me an opportunity to play with Twine. So I set out to create a simple reveal interaction in Twine.
Getting started
Like most things, I started by just opening it and having a poke around. However, the interface doesn’t offer many clues about what to do so I went looking for tutorials on YouTube.
I found the following video by DigitalExposureTV (no date) which really helped me out with a lot of the basics.
After watching that video, I managed to create an introductory “passage” (what Twine calls a page or story segment), another passage for the theme reveal and link them together.
Adding an image
I wanted to include an image of the Dixit card used to set the ideation theme so I needed to learn how to add an image to the theme reveal passage. Unfortunately, this is not as simple as copying and pasting it into Twine, nor does Twine have any kind of upload image button.
Instead, I needed to think about my Twine “game” in a similar way to an HTML website. I needed to type in the HTML code telling Twine to display the image and in that code, I needed to tell it how to find the image. I used the following video (Hammond, no date) to learn how to do that.
Adding sound
When I found that video, I noticed the “and Music” part of the title and it gave me an idea. How cool it would be to add a little drama and have a drumroll in my “game”?
I found a drumroll sound effect on a free audio clips website and followed the steps in the YouTube video to add it to my Twine “game”. This took me ages and I couldn’t figure out what I was doing wrong (see figure 1) until I realised I’d left some chevrons out of the audio instructions I’d written. Ah joy.
Publishing
After I’d managed to get the image to view and the audio to play, I published my Twine game to an HTML file. The HTML file doesn’t contain the image or audio files, just the instructions on how to find them on my computer. So, for it to work anywhere other than my own computer, I needed to compress the HTML file downloaded from Twine, along with the folders I had saved the image and audio files into.
Sharing
This is something else which took me ages to figure out. I used the following video (Gamify, no date) which was somewhat helpful. However, it still left me a bit confused about exactly how I would share the game in my blog post, since my site is built in Squarespace rather than the example used in the video. I couldn’t figure out how to adapt their instructions to my situation.
However, in the search results that led me to that video, I also noticed other videos providing guidance on how to upload games built with Unity to itch.io. I hadn’t heard of itch.io.
Even though I’ve created something in Twine rather than Unity and I wouldn’t call it a game, I thought maybe they might be useful. They led me to the following video (Eric, 2020).
This was so helpful! Yay! Thank you, Eric.
Getting stuck
Once I’d done that, I then needed to figure out how to embed it into my blog post. I tried figuring out how to add it as an iFrame myself but, to be honest, I got a little stuck and annoyed. So I decided to go and do something else for a while (see figure 2). This is where that cheese sandwich came in.
When I came back, I decided to retrace the steps I had taken to embed the prototype I had created in Figma for a previous post. I’d found an embed code in Figma and just copied that in.
So I went back to where I’d uploaded my Twine “game” to itch.io. Yes, there was an embed code bit. And yes, it worked.
Woo hoo!
I’ve created a super simple interaction but I’ve learned so much!
Definitely feeling proud!
-
DigitalExposureTV (no date). Twine 2.0 - Introduction / Tutorial #1. [YouTube video]. Available at: https://www.youtube.com/watch?v=iKFZhIHD7Xk (Accessed: 19 February 2022).
Eric (2020). Publish Your Twine Game to Itch.io. [YouTube video]. Available at: https://www.youtube.com/watch?v=v_ms56OWP8M&t=166s (Accessed 19 February 2022).
Gamify (no date). How To Put A Game On Your Website. [YouTube video]. Available at: https://www.youtube.com/watch?v=fPzsWFJ2JG8 (Accessed 19 February 2022).
Hammond, A. (no date). Adding Images and Music to Your Twine 2.1 Game (SugarCube 2). [YouTube video]. Available at: https://www.youtube.com/watch?v=N_CRN9mLbUs&t=17s. (Accessed: 19 February 2022).
Twine (no date). Available at: https://twinery.org/ (Accessed 19 February 2022).
Thank you for reading.
If you liked this, you might enjoy reading the case study for Under the Wing in my portfolio or exploring the blog posts below.
