DIY Twine Making


Twine is an easy-to-use tool for creating interactive, non-linear narratives (multimodal stories, poetry, essays, visual novels) and interactive narrative games (adventures, role-playing games, etc.), as well as interactive video and documentary film projects and multimedia artworks.

Based on this week’s readings and lecture, the ‘aim of the game’ is to design a Twinework of any genre: a critical/empathy game, an interactive fiction, a historical (no)fiction, an adventure RPG, a simulation/serious game for learning, or some kind of an ‘art game’. Possibilities are endless (but here is a question set to get you thinking in terms of role-play, simulation and empathy game making). See the lecture slide deck PDF for ideas, too.

Starting Points

  • Premise of the Game? Goal of play, or of the narrative system (story)?
  • Define narrative situation, conflict(s), or situational challenges in relation to goal or player experience?
  • Simulation? What kind of social and/or physical system and/or practices are being modelled? (see ECO-MUVE in slide deck for one example).
  • What identity/role(s) does the player take within context or situation (e.g., the world – or system – they are inhabiting, acting within)?
  • What it is like to be the character(s) within the world, situation, and/or narrative? A character can be a person (in the past, on earth, or elsewhere), but also, if you want to model other types of experiences adn systems, the ‘character’ could be an electron, a virus, a piece of plastic in the ocean, or even a tornado, etc.
  • World-building: How can I build an immersive multimodal world for the player? Use of ‘branching pathways’ (interactivity / consequences / game feedback)?

To save and share a game: save as html file from (save and download the file as html if you are using online version) and attach the HTML file as email. There are also ways to upload your game to Wix or make shareable from google drive or dropbox.

Expectations: Create a game or story system – integrating as many Twine features as you wish, depending on what features serve the game experience or ‘mechanic ‘.

The game should be in depth enough to satisfy your purposes or aims as author/designer. If you wish to create a very complex game – but only have time to turn in an introductory level – just turn in the first ‘level’ or ‘chapter’ of the game/story/simulation (just ensure the first level is complete as a chapter or player experience). The aim, here, to become fluent enough in Twine to share (pedagogically) with others.

Twine 2.0 documentation (Twinery Wiki)

Bernardo’s Twine Tutorials:

[[ PASSAGE ]] : creates a new passage. You can put as many passage links (player ‘choices’) as you want on a page.

Short forms or ‘tricks’ can be done by typing | to create a path: [[ PASSAGE | True Passage]]

Adding an Image and Video

Once you know what your image’s URL is, having it display in your story is as simple as entering the correct HTML code to show up: You can upload images and audio files to your websites.

<img src="the URL of your image" width="500" height="300" alt="image description">

The width/ height of the code control the size of your image on the page. If you leave that out, the image will display in the original dimensions. However, if you increase size or alter the dimensions in the code, the image may look distorted or pixelated. Do your MATH (ratios) to ensure that consistent dimensions if you enlarge or reduce image size.

To add videos: Directly go to youtube, click on ‘share’ and go to ‘embed’ copy and paste the code as it is into your passage! Change size to taste. Avoid videos that play ads.

Adding Music or Audio File

First: Upload the Audio File to your Website to Create a URL

<audio src="the URL of your sound effect" autoplay>

For sounds, visit:
Better, yet: make your own sounds and music or 'voice work' and then export as MP3 files, or .wav files. 

Background Image: Covers Whole Page

Click “Edit Style Sheets”. Add code snippet below and change URL (make sure to avoid low-resolution or small images for background images).

tw-story{background-image:url(“ YOUR URL”); background-size:cover; }

To creates unique background images for different passage (e.g., to change setting or tone/ambience/mood) you will need to create a tag for your passage and then add the tag to the code below.

tw-story[tags~=”YOUR TAG”]{background-image:url(“YOUR URL”); background-size:cover;}

You can have as many unique backgrounds as you wish, or you can use the tag feature to have different (or the same) backgrounds appear in passages you choose (by using the appropriate “tag” name).

NOTE: If for some reason the background image is not showing up, then try to paste the URL in without the “quotes” around it.

tw-story { background-image:url(“”); background-size:cover; }

if the top one does not work, then try it this way (sans “quotes).

tw { background-image:url(; background-size:cover; }

Create/Edit your Soundtrack or Sound Effects of Passage Voice-Work

I saved this file as an MP3 and uploaded to my site (or googledrive etc). Garage Band.

I saved this file as an MP3 and uploaded to my site (or googledrive etc). Audacity.

How to Format Text

Bold**Bold** or ''Bold''
Italics*Italics* or //Italics//////
For more informationVisit hereVisit here

Change the Font, Colors, or Appearance

If you’re looking for simple formatting changes such as bolding or italicizing text, then the How to Format Text page will help you out.

But what if you’d like to change the font or color scheme of your published story? The best way to accomplish that is to edit your story’s stylesheet. This uses CSS, a standard web technology.

If you’ve never written CSS before, there are many tutorials out there that can help you learn it. The Mozilla Developer Network in particular has a very comprehensive tutorial.

Basic changes are not terribly complicated. Let’s talk about some two common scenarios.

Changing the Font

CSS Editor

You can very easily change the font your entire story uses with a declaration like this in your story stylesheet:

Changing the Color Scheme

Colors are recorded in CSS in variety of ways, but the most succinct and commonly-used is called a hex triplet. The first two digits represent how much red the color contains, the second duo how much green, and the final how much blue. So, pure red is written as #ff0000. 1) You can play with colors with online tools like Adobe Color or Paletton, and then using the hex triplets in your own code.


If you’d like to add HTML to your story – for example, some text you have customized, or you have some code to embed a resource like a YouTube video – you can add it directly to your passage’s text. It will displayed exactly as you’ve entered it. Go here to learn some HTML