Twine 101: Creating Your First Project

Note: This tutorial was made in January 2019 is for Twine version 2.1.3 and the Harlowe 2.0.1 story format. Newer or later versions of the program may be incompatible with this guide. This guide is rather long because I have tried to make this introduction to the program and its language as approachable as possible, not because using Twine is inherently difficult for people new to Twine, creating hypertexts, and/or programming languages.
The objective of this tutorial is to create a Twine project that includes hyperlinks and image, then upload said project to the web.
- If you'd like to view the more concise version, please click here.
- For a more advanced tutorial dealing with values and functions, please wait just a little longer! This tutorial is forthcoming.

Twine: An Introduction

Twine is free, open-source software that can be ran in Windows, Mac OS, and Linux operating systems. Twine is often utilized to create (but not limited to) hypertextual projects. The projects created in Twine are web-based.

Twine was created in 2009 by Chris Klimas. This tutorial is for Twine 2, the second release of this program which significantly differs from the original program; applying this guide's instructions to the original Twine program will, most likely, not be very helpful.
Using Twine can be as easy or complex as the user desires: this guide will produce a relatively simple hypertext story, but Twine can be a powerful and interactive tool through the use dynamic content (CSS, certain macros like if, variables, etc. This tutorial will not cover these aspects of Twine).

What can I make?

Interactive fiction (IF), choose-your-own-adventure stories (CYOA), many types of games including games with role-playing game (RPG) elements (inventory systems, hit points, etc.), interactive poems, visual essays, linear stories, nonlinear stories, all sorts of hypertexts, and so on. This program is not just for text: you can insert images and embed .ogg and .mp3 (audio) files into Twine's passages by inserting the appropriate code.

What can I not make?

I do not want to tell you what you should or should not create, but I will gently suggest that until you are comfortable with the program you do not try and attempt to create the following:

- 3D games; yes, you can use iframes to insert games, but Twine itself is not a 3D game engine. Try Unity instead.

- Slideshow presentations: you can make something similar, but it is an exercise in frustration. Again, Twine is not made for slideshow-esque projects. Just use a slideshow program if you can.

- Multi-player games/chats: this may be possible, but there are other programs you can utilize to acheive these goals instead.

Also note that if you upload your project online, to edit the project you will need to re-upload and replace the exisitng file for changes to take effect. Therefore something like a blog might not be well-served with Twine.

It is my belief that one should always try and push and question the limits of any piece of software, but on that same note you cannot always force a square peg into round hole (you can -- and should -- try, though!).

Examples:

These are projects I have created. I am not the utmost authority on this program (since honestly there should be no centering of authority when it comes to writing code); I have selected these projects for legal reasons -- you want to see and manipulate the code, right? -- and because I know how these projects work inside and out considering I made them.

Blork, The 60-Second Pet: a virtual pet made in the original Twine program in 2015. Runs on a timer and image heavy. Many parts of the code have broken due to obsolesence. Here is an image of the node map so you can see how large this game is/was. You can also freely download this game, its images, and its code by clicking here and scrolling down to 'download', but you will need to download the original Twine program in order to load the .tws (source) file.

Duck Quest 2: The Duckening: an advanced tutorial project that is a hypertext but includes more interactive elements and complex coding. I have designed this project to introduce certain interactive elements of Twine to non-programmers. This project is available for download, as is the file's source so you can look at the coding yourself.
Right click on this link and select 'save as', then open Twine and select 'Import file' on the main screen.

Part 1: Downloading and Installing Twine, Opening the Program

First, you will need to download the Twine program to your device.
- I would recommend that your device be a laptop, computer, or tablet with a physical keyboard you feel comfortable writing with versus using an on-screen keyboard. Twine is largely a text-based program, but even if you wanted to make a project that was only images, you will still need to write and edit code.

The only safe place to download this program is from twinery.org. You should see a download like on the page: click the name of the operating system your device is using to begin the download.
- It is possible to use Twine online, but I would only suggest this for practice. Saving projects and exporting projects so others can view and play what you have made is facilitated better via the actual applications.

Where is my download?
Depending on your web browser (Safari, Chrome, Firefox...), operating system (Mac OS, Windows, Linux) and/or your settings, the download could be located in any one of these places. It may be in your browser's download folder or on your desktop. If you cannot find the downloaded file, try searching for the file on your computer by searching twine or twine.zip.

Opening the file:
Once your download is complete and you can see the file name on your computer, open the file. On Windows, the file name should end in .exe (an 'executable' file); as long as you have downloaded this software from twinery.org's front page, the file will be safe. On a Mac, the file will be zipped (.zip). Double click the file to open it.

Part 1a: Error Messages

On some operating systems, you may receive this error message (I am using Apple software):

If you encounter this error, click 'OK' and follow the next set of instructions.

Bypass this set of instructions is you are not encountering this error.

Again, permitting you download the software from twinery.org's front page, the file is safe.
Open your System Preferences (or search for 'system preferences' and open it if you do not know where it is) and click Security and Privacy. You should see this dialogue somewhere in the window that opens:

Click Open Anyway
Your OS may try and warn you again not to open the program: click 'OK'.

The program should now finally launch. You may have to redo this process if you download future versions (updates) of the Twine program. This is not because Twine is inherently suspicious software but more so a choice on behalf of Apple (which, you may note, only recognizes App store-oriented content unless you tell the OS to to override the warnings and open the program anyway).

Part 2: Creating your first project

You will now see a screen similar to the image below on your screen, except your interface will most likely be blank unless you are re-installing or uploading Twine.

Whatever you create with Twine will show up on this screen:

Let's start a new story.

Click the green + Story button on the right side of the interface.

A prompt will appear asking you to name the project.
For the purpose of this tutorial, go ahead and name the project Duck Quest and click +Add

You should now see a screen similar to the following (click the image below to view the image in a larger size):

Part 2a: Understanding Twine's Interface

We should familiarize ourselves with this interface.

In the bottom left corner you will see a house next to the name of your project and an upwards-pointing arrow. If you click the name of your project, a menu will appear:

 

Let's breakdown this menu briefly:

Next, look at what we see on the right of the screen:

Quick find will search your passages for words.

The small box next to Quick Find is the 'find and replace' option which can be useful.

The next three boxes change the interface of the passages and are personal preferences.

The bug icon will launch your project in the 'debug' view (a way to look for errors in coding).

Play will launch your project as it would be viewed by others if you chose to upload the file to the web.

+ Passage creates a new passage.

You do not need to use any of these features except for Play and Passage.

Part 2: Creating passages

Passages are the backbone of Twine. Twine is a program that creates hypertexts, i.e. content that links to more content. Here, Twine's passages will connect to other passages. You definitely can only have one passage (the Start passage) but this is wholly dependent on what you want to create with the program.

For the purpose of this tutorial we will be making a hypertext game with several passages. Our game will be similar to the analogue 'choose-your-own adventure' (CYOA) novels -- you know, 'the monster asks for a cookie. Turn to page 12 to give the monster a cookie. Turn to page 22 if you want to run away'.

When you open a new project, you will have one passage already waiting for you: the Start passage.


Twine tells us this is the starting passage because of the green rocket ship icon in the passage; don't worry too much about this now. At the moment we want to open and edit this passage.

Double click the passage. A new window should open that resembles this (click the image below to view it larger):

We will now break down the parts of this new window.

3a: Parts of a Passage

Untitled Passage is the name of the passage. The name is important, but we will come back to this.

+Tag assigns certain tags to the passage. This is useful for adding CSS and JavaScript, but we are not using these features in this tutorial.

The large area with the text that begins 'double-click...' is what we want to focus on. What you type here will appear in your project.

For now:
1.) Rename the passage Start by clicking 'Untitled Passage'. Twine is case sensitive: if you capitalize the word 'Start' here, you must always capitalize the word when referring to this passage (this will make sense in a second). It is important to name your passages in a way that is easy for you to remember; no one else will see the names you give the passages.

2.) In the body of the window, type something like the following. To make a new line, just hit enter. To make a space, hit enter twice. Again, to view this image larger, please click on it.

You are walking down a shady path.
Suddenly, a duck walks out in front of you.
"Quack!"

What should you do?

Feed the duck
Walk by the duck and visit the goose

We have set up a scenario and presented our reader with two choices: feeding the duck or visiting the goose. We now need to create links to two new passages and these new passages themselves. To do this, let's create the links.

Part 3: Creating Links

In Harlowe 2 (the story format you should be using), there are several ways to link passages together. 

My preferred method is [[ | ]]

What I mean be that is: [[this is the text users will click on|passage name]]
The | needs to separate the text that will be clicked and the passage name.
You also need a set of brackets to open and close the link. If you type [this is the clickable text passage name]] you will create a broken link -- this is easily fixed, though.

For this example, type:

Your text should resemble something like this:

Now click out of the white text box anywhere else in the program. You should see your Start passage and a red x.

 

The 'x' is indicating that your passage (the Start passage) contains a broken link, or a link that does not function. Why?

We do not yet have a passage named feed. This is why we are being told our link is broken. No problem. Let's create a new passage by clicking the +Passage button.

It should appear above Start. Go ahead and leave it there, or drag and drop this passage wherever. I have positioned it next to Start. Where you place these passages is a personal preference with no bearing on the outcome of the project. Arrange the passages in a way that makes sense to you.

Hover your mouse over Untitled Passage. A menu will appear.

You can select the pencil or just double click Untitled Passage.

See the title? Untitled Passage? Delete that and type feed in all lower case. Again, no one can see the titles except you, and I'd urge you to name them simple words or phrases you can remember and type out easily. Naming your passage 'CHAPTER 57. Of Whales in Paint; in Teeth; in Wood; in Sheet-Iron; in Stone; in Mountains; in Stars.' will you require you to type this out every single time you want to create a link to this passage and you need to make everything capitalized and punctuated the same every time, too.
'ch57' would work a lot better.

Click out of the passage. You should see this:

Excellent -- let's now take a look at what exactly we have accomplished. Click Play, next to the green Passage button in the right corner. A new window will open and look something like this:

Feed the duck is a different colored text because it is a hyperlink. If you click it, you will be brought to this passage:

Nothing is there. You can click the back arrow (which is very hard to see but is to the left of the white text) to return to the former passage, or just click the red x at the top of the window to return to Twine.

Now that we are back in Twine, let's add some text to the empty passage.
Double click the feed passage and type something similar to the following:

The duck pauses in front of you, but then quickly waddles off towards the water when it realizes you have no food.
That's too bad.

Look for duck food
Visit the goose

What we essentially want to do here is present two more choices for the reader/player. We have now given them the choice to find food or essentially return to their former choice of visiting the goose -- but recall we don't have a passage for the goose yet. No problem, we'll make one passage and watch it now link to both Start and feed. First let's create the links to this passage:

remember: [[clickable text here|passage name here]]

Begin with the two-right facing brackets then type the words you want the player to click on (visit the goose), separated by |

the new passage will be named goose in all lowercase.

Close the link with two left-facing brackets ]]

[[Visit the goose|goose]]

While we're at it, let's go ahead and make a hyperlink for the 'look for duck food' option as well. Name this passage food (all lowercase)

Your links should resemble the following:

 

Click outside of the box. You will see another red x indicating broken links, so let's now make two new passages by click +Passage twice.

 

You should now see something like this:

Rename the passage food and goose. It does not matter which passage you rename, just as long as there are two separate passages named food and goose both in lower case. By renaming the passages, arrows will appear. The arrows are attached to passages that are linked to one another. Another way you may see this described is 'calling' the passage (i.e., feed calls both goose and food). Our links are functioning now.

I personally dislike how these passages are arranged; they don't make sense to how I am visually structuring my narrative, so I am going to move them. Again, this will have no effect on the outcome of the story: it is your personal preference. This is how I have now arranged my passages:

Recall that the Start passage had the option to visit the goose, just like feed. Let's add the link to the goose. Double click Start and create a link that calls the goose passage by using the same code we used before:

Now you should notice that Start has arrows pointing to both goose and food. Awesome. If we play test the game now, we will have two links, and therefore two options, to choose from. However, our story is still lacking some content. We have nothing in the goose passage or the food passage, so let's fix this now.

Let's open the food passage first. I typed:

"Hey there, duck-loving traveler!"
You turn around and see a cheerful-looking wizard holding up a bag of duck food.
"Are you here to feed the ducks, too?"

"Yes, I am."
"No, but I'm a big fan of geese."

We are making two more options. Let's create the links: we will name these passages yesduck and noduck.

It is okay that the dialogue in quotation marks is a different color.

Create two new passages called yesduck and one named noduck and position them however you want (or follow my example below):

"Oh," the wizard says and takes a step toward you. "But you have no food to feed the duck. Would you like some?"
You hold out your hand and the wizard sprinkles a handful of delicious duck food into your open palms.
"Quack!"
The duck has returned, sensing free food.
The wizard smiles warmly. "How nice, you already have a new friend!"

THE END

For the sake of this tutorial I am creating one ending with this passage: it will not link to any further passages and thus end this playthrough of your project. But we are not done here: let's emphasize the duck's 'quack' by making it italicized. To do so, add two forward slashes to the beginning of the phrase you want to italicize followed by two more forward slashes:

//Quack!//

Your text should now read:

"Oh," the wizard says and takes a step toward you. "But you have no food to feed the duck. Would you like some?"
You hold out your hand and the wizard sprinkles a handful of delicious duck food into your open palms.
//"Quack!"//
The duck has returned, sensing free food.
The wizard smiles warmly. "How nice, you already have a new friend!"

THE END

Open the noduck passage. Remember, that to arrive at this passage, the player must have selected the "No, but I'm a big fan of geese." option from the food passageWith that in mind, let's type something like the following:

"A friend of geese?" The wizard raises their eyebrows at you in surprise. "I don't know too many people who have goose friends. You must be a very kind person. Hold out your hands, won't you?"

You hold out your cupped hands. The wizard begins to sprinkle shimmering flakes of goose food into your palms. "If you feed this to the goose, it won't grant you a wish or anything. The goose will just like the food."

As you turn away from the wizard, you see a gaggle of geese lumbering toward you, honking as they plod along. You smile.

THE END.

So this passage has also ended our story, but we still have our lonely original goose passage from the beginning. Let's return to that passage by opening it up. We are going to call some passages that already exist and create one more new passage. You can choose to create a new passage now or create the link first: you will become comfortable with how you to prefer to work and code in Twine eventually. I like to create the link first and then make and name of the passage, which I have done here:

A singular goose is lounging by the waterside, honking away. It turns its head to look at you, no doubt looking for food. A glossy green duck makes its way past the goose, softly quacking to itself.

[[Visit the duck|feed]]
[[Visit the goose|goose2]]

We already have established the feed passage: if you have followed this tutorial and used all of my text, then the story between these two passages will make sense versus if we linked to the yesduck passage (since we haven't established there is a wizard character yet if we jump to this part of the story). Just something to consider when creating hypertexts.

I have now created the goose2 passage that is being called by the noduck passage. I have typed in goose2:

You slowly approach the goose, and it eyes you warily. The goose emits a low hiss and begins to rise. You reassure the goose everything is okay, and it settles back down. A second goose glides through the water and trods out of the lake, taking its place next to the other goose. In the distance, you can hear a duck quacking loudly.

THE END.

Not the most riveting story, I know. Essentially we have two paths the reader can select from when they begin the story, one of which is linear (the goose story) and one which branches (the duck). You can see this demonstrated below (click to view the image larger):

You can create more choices and branching paths, but for now let's just call this project complete -- unless you'd like to add an image!
The section below outlines how to add images to your project, but images are not needed. Feel free to skip the image section and continue on if you would prefer to learn how to upload your project to the Web.

Part 5: Adding Images

In Harlowe, images are added to passages using the standard HTML tag:

So for example:

Which will then give us this image of a duck:

This is a photo of a duck that I created. You may use this image: I have released it into the public domain, in which I have essentially relinquished any form of copyright protection for this image. I want this image to be freely used for everyone, hence why the image is now in the public domain.

There are many online resources that explain what constitutes media that is in the public domain. The wiki article is fairly to-the-point.

If you are not creating your own images (photos, paintings, drawings, etc.), then you want to find and use images that are available in the public domain. Be careful using images that are protected by copyright, especially if you plan on selling your Twine project. You could be in violation of copyright laws. For non-proprietary and educational projects, using images that you credit (attribute) to their creator(s) usually suffices, but usually the best practice is to create your own images, sounds, music, etc.

One more important note: do not hotlink. Always upload media (images, .mp3 files, etc.) to your own host (explained below). Hotlinking means copying the location of a pre-existing image. For example, I looked up 'duck' on Wikipedia and found an image. I right clicked on the image and selected 'view image address' (this may be phrased differently in some browsers). If I then insert this code into my project:

...I have just hotlinked an image. On some websites, the site may block hotlinking and your image will not show up. Other sites may replace the hotlinked image with a red x or another image. This is achieved through scripts on said websites: people do not like hotlinking because it costs the host (where the image is located: here, the image is hosted by Wikipedia) bandwidth and therefore money. Upload media files to your own host, which can be a free or paid hosting service (explained below).

Anyway.

This is what your passage should resemble if you have written the code correctly -- the URL for the image should ideally be where your file is located online, though:

Wait! I successfully embed an image into my story, but the image is HUGE!

You need to resize your image. If you have taken a photo on your phone, downloaded the photo to your computer, uploaded it to your web host, and then tried to embed the image, you may gave been surprised to see a very large image appear on your screen when you may have been expecting something a bit smaller.

Images are measured using pixels. The measurements we deal with on the web are also pixel-based: when we describe a span style as having a width of 200px, we are telling this element to be 200 pixels wide. The same can be applied to images. You can resize the image using HTML, but this is not desirable for two reasons: it takes up more bandwidth and is slower to load due to the fact the browser must load the image twice (once at its full size and then again according to the code implemented in the img tag).

To re-size images using HTML, insert the height and width variables behind the image file as seen in the example code below. You need to adjust the numbers until you are satisfied with the size of the image. You can make images smaller or larger using the width and height variables.

The original duck.jpg image is 400x300 pixels. Here I have forced the image to be 560 pixels wide by 500 pixels tall. It looks squished because the length and width measurements are not proportional. You can try playing with these numbers to see how they impact the size (and shape) of the image.

are not proportional

...and here is the same image, just 160px wide and 100px tall. Notice this image is not squished but is way too long.

Here is the image made smaller than its original file size. This image is not squished or too long; it is proportional.

Resizing an image in an image editing program, saving the image, and uploading it is always the superior option, but I recognize image editing software can still be prohibitively expensive.

Part 6: Viewing your project, creating an .html file, and uploading your finished project to the Web

We will now check out what our project looks like and export it. This way we can upload it to the World Wide Web so anyone can view and interact with your project.

To see what we've made, click the Play button next to Passages. This is also a good way to test and make sure all of your links are working -- is something broken? Return to that passage and see what you did wrong. Chances are you missed a bracket or messed up the capitalization or spelling of a passage name.

Now to prepare our game for the Web. Remember the menu with the export option? Click the name of the story in the left-hand corner and the option closest to the bottom of the page, Publish to File.

A new prompt will appear. What you save the story as (in the first input section) will be apart of the URL of the webpage. If you name the file woehrwihfosinjksdfnjkdf it will show up on the web as woehrwihfosinjksdfnjkdf.html... and people will need to remember this name. If you name the file Duck Quest, the name will be show up as Duck%Quest because of how the Web parses (or interprets) spaces. Again, not good. Let's just delete the space between Duck and Quest to DuckQuest. The web isn't case sensitive like Twine, so don't worry if you want to call the file duckquest or DUCKQUEST.

Don't worry about tags.

Save your file somewhere you can find it. I am putting the file on my Desktop; you can move the file wherever, just save it somewhere you can find it again for the moment.

You also don't need to worry about the format as long as you're seeing 'HMTL text'. We want this to be an HTML text.

Select save.

You should now have a file called duckquest.html on your desktop (or wherever you saved the file).

In order to release this creation to the world, the file needs to be hosted online somewhere. Some people pay for their own web space, but you can utilize free services.

Part 6a: Choosing a place to host your file

The two web hosts I am recommending here are philome.la and neocities.org. Note I am not being paid by either website to endorse them nor do I know the owners/creators of either site personally. I am suggesting these resources based on my own personal experience with both services.

philome.la

This is a free and generous service that requires a Twitter account. You can create one and never use it again if you do not use Twitter.
philome.la will only host your Twine file: you cannot upload music, images, or other files. Just the Twine file. If you want to upload media, see neocities below.

Follow the site's instructions: log in and drag your file from your desktop (or wherever) to the box.

Name your file -- this will be a part of the web url, so do not name your file something like skfsdfusdf unless you really want to. 

Before you hit publish choose to uncheck the box that allows philome.la to publish your project to the site's Twitter feed. What you have created still belongs to you, not this site, but you may not want the project published to the Twitter feed.

Now click publish. You will receive a URL to your project. You cannot edit this project anymore: if you need to make changes, you will need to return to Twine, make the changes, and create a brand new file. Working with a neocities website will eliminate this issue.

Neocities

This is a free webhosting service that does not force you to deal with ads on your webpage or any branding from the company. Neocities is a play off of 'Geocities', the now sadly defunct web hosting giant (and tour-de-force, I'd argue) that dominated the Web 2.0. The community of Neocities consists of many websites created in the vein of Geocities, but how you use this website and interact with the community (if you choose to do so) is up to you. I am recommending this site because it allows you to upload your Twine file, media files (music, images), and edit said files if you need to remove them, which are all features philome.la does not support.

You will need to create a username which will be a part of your URL (you can change this later) and a valid email address that you have access to in order to get started. Here I have selected the free version, but you have the choice of upgrading for more storage and bandwidth. Don't worry if you don't know what these things are: for now, let's just get our Twine project online.

As mentioned earlier, you need a valid email. Enter the confirmation token or click the link in your email to proceed. If you do not see the confirmation email, check your spam or trash folder.

You now have the choice of a guided tour of the site. You can view the tutorial or just click through to the dashboard. Navigating this site or creating your own website will not be addressed here as this is not a tutorial on how to create your own website.
We want to upload our Twine project. You should see something like this:

On the right of the interface you will see upload. Click this button and a window will appear allowing you to select DuckQuest.html

The file will now upload to your website. Note that neocities does not own this material: you retain ownership rights to Duck Quest.

You should now see the new file on your screen. Click it, and behold! Your project is now online!

My URL for this project is https://twine101.neocities.org/DuckQuest.html

If you copy this text and paste it into your URL bar, you will be able to access the file. This is also how you can send the link to others via email.

If you would like to update DuckQuest.html -- maybe you want to add a picture (check out the next tutorial) or made a spelling error -- save your new file and delete the DuckQuest.html file on neocities. Upload the new DuckQuest.html file. You may need to refresh the page or clear you browser's cache if you do not see the changes, but the file will have been updated. You cannot do this with philome.la.

You can also upload images to neocities, which will be discussed in the next tutorial.

Part 6b: Further Online Resources

Online Resources:
A list of web safe colors -- 'web safe' refers to how your colors/fonts will be interpreted across various web browsers: not every browser will support every hue or font. Web browsers understand colors as a variation of 6 numbers and/or numbers beginning with a hashtag/number sign (#). For example, #000000 is the color black, #eeeeee is a grey, #FFFFFF is the color white, and #ffccc is a pale red/pink. Hexadecimal or hex codes are not case sensitive.

A list of web-safe fonts -- as previously stated, not all browsers will understand ever font. Select a Web safe font for any online project; do not try and use Papyrus, Curlz, etc., as most (if not all) browsers will not understand these custom fonts and therefore will ignore your code, defaulting instead to Times New Roman. You can import custom fonts into Twine if you really want a certain font, though.

Open source programs:
The following links are to open source (non-propierty, free) software that you may find useful when creating Twine-based projects. These programs are availble for Mac OS and Windows unless otherwise stated.
Always be wary when downloading programs. At the time I created this document in early 2019 these links and downloads were legitimate, but always exercise caution.

I am not affiliated or paid by any of the individuals or groups associated with the following programs.
Also, please do not email me requesting that your product/program be listed here. These are my personal recommendations.

Audacity -- this is an audio editor that is easy to use even for people who have little no understanding of how sound and music functions (like me). You can use this program to create and edit your own sounds and/or music or edit music/sounds in the public domain. Twine will play .ogg and .mp3 files, but as a general rule of thumb always warn viewers your project contains sound before the sound(s) begin to play. This way you do not hurt eardrums.

Color Oracle -- a color blindness simulator that you can toggle on and off, enabling you to view your project and its colors based on several different forms of color vision impairment. If people cannot read your text or see your links, they may not be able to access and enjoy your project.

Notepad++ -- a text editor for code (Windows only). Always write code in a text editor, not a word processing program (Microsoft Word, Mac OS Pages, etc.) -- word processors are not made for coding in languages that are meant to be parsed (read) by computers.

Atom -- a text editor for Mac that is highly customizable.

PaintTool SAI -- Windows only. A free and robust image editor which is also very useful when paired with a digital tablet. User-made Mac OS versions of this program do exist but they are not official and may be buggy.

Ren'Py -- this is a program written in Python that enables users to create interactive stories and games like Twine, except Ren'Py is a.) slightly more robust and dynamic, b.) features save states not located in a web browser's cache, unlike Twine and c.) launches from the desktop versus being hosted online. However, there is a steeper learning curve to learning this program. Since Ren'Py is also written in Python, the code can also be slightly more frustrating for some people to write. A lot of resources are available online for this program with most centered around visual novels (the main focus of the software and its community), but you do not need to create a visual novel or even be interested in them to use and create with Ren'Py.

Part 6c: Advanced Twine Tutorials

Adding values (soon)
Not advanced, but here is an abridged version of this tutorial

You have arrived at the end of the Twine 101 tutorial, congrats!