Category: Twine for Beginners

Twine for Beginners: Adding Local Images

Twine 2 lets you do a whole lot with simple text and hyperlinks, and it couldn’t be easier to get started. If you want to take things a step further and add images as well, that’s not hard either! There are actually a few different methods of doing this, each with their own strengths and weaknesses. I’d recommend adding images as Base64 where possible, but there are times when it’s handy to simply display a picture stored in the same place as your game, whether that’s on a website somewhere or on your computer.

About Local Images:

When I talk about “local images,” I’m referring to image files that are stored in the same place as the HTML file containing the actual Twine game. Your overall setup should look something like this:

This is a directory (which Windows refers to as a folder) containing the HTML Twine game itself – Visual Vera and the Three PNGs.html – as well as an image, bananas.png. When the player encounters the passage in which the banana image is supposed to appear, the game will look for a PNG named “bananas.png” in the same folder as itself and, if it’s there, display it in the appropriate place in the game. Continue reading →

Twine for Beginners: Adding Images as Base64

Twine 2 lets you do a whole lot with simple text and hyperlinks, and it couldn’t be easier to get started. If you want to take things a step further and add images as well, that’s not hard either! There are actually a few different methods of doing this, each with their own strengths and weaknesses. This guide will lead you through my favourite.

About Base64:

Base64 is a method of encoding binary data as strings of text. Put simply, it takes all the 1s and 0s that make up a file (such as a JPEG, PNG or GIF) and translates them into an ungodly string of letters, numbers and symbols that you can paste directly into Twine.

Why would anybody do this, you ask? Because this allows you to include images as part of your Twine game. If you want to share your game with people, you can send them the finished HTML file (or upload it somewhere such as philome.la), and any pictures you’ve added in this way will be right there inside it. Here’s a run down of why you might (and might not) want to use this option: Continue reading →

Twine for Beginners: Styling Text

Twine offers several handy options when it comes to displaying text in particular ways. From straightforward bold or italics to more eye-catching animated effects, there are a whole range of features built right in and this tutorial will show you how to use them.

The following techniques are all very simple, but if you’ve never used Twine before then you might like to start off with this tutorial which offers a very basic introduction to it. You might also be interested in my tutorial covering how to colour text in Twine, which this one will also touch upon.

Much of this tutorial is so simple that you could probably get the hang of it simply by reading through the example piece, Snazzy Susan and the Majestic Markup. However, the tutorial below will go into slightly more detail as well as linking to other guides and resources, so if you find that you’re struggling with anything then do pop back. Continue reading →

Twine for Beginners: Colouring Text

Colouring text in Twine is incredibly simple, but also incredibly useful. If you’re dealing with important information – whether that’s a particularly significant word or phrase, or a stat the player must recognise at a glance – then it helps to format it in some way that immediately sets it apart from the rest of the text on screen.

If you’re unfamiliar with Twine, you might like to familiarise yourself with it using this tutorial which will get you started in just four clicks – and possibly take a glance at some of the others in the series – but many of the following techniques will be very straightforward. If all you want to do is change the colour of specific bits of text in Twine, this tutorial will help you do just that.

In fact, this tutorial is so simple that you can probably just glance through the example story, Snazzy Susan and the Majestic Markup, which will contain most of the following information (as well as a few examples of how to style text in other ways). This post will only go into marginally more detail, but will also link to some handy external resources so do pop back if you get stuck. Continue reading →

Twine for Beginners: Timers and Live Text

If you want to make your Twine games more interesting, there are few easier ways to do that than the (live:) macro. This thing can do as little as shuffle your random text from time to time, or as much as introduce completely new mechanics into your game. This tutorial will borrow a few ideas from others in the series, but honestly – if all you want to do is make your games a little more dynamic – it shouldn’t be too hard to follow on its own. Here are a few different methods of using (live:) to do interesting things:

Method Zero: What (live:) Actually Does

This macro behaves a little differently to (if:), (else:), (either:), etc. so I think it’s worth taking a moment just to introduce it. If you open up Twine 2 and type in (live:)[Here’s some text I want to appear live.], this is what you’ll see when you run the game:

At a glance, it’ll appear that nothing’s going on. However, what’s actually happening is that the (live:) macro is constantly refreshing that text. You just can’t tell because refreshing the text doesn’t actually do anything. It looks the same every time it shows up, so it doesn’t really matter whether it’s being re-displayed a thousand times a second or it’s displayed once and just stays there. However, the fact that this doesn’t draw attention to itself can actually be pretty useful, as you’ll see in the next step. Continue reading →

Twine for Beginners: Importing Stories

Have you ever noticed a really neat feature in a Twine game and thought: “Hey, I wonder how they did that?” Well, wonder no more because it’s (usually) super easy to find out.

Twine 2 has many advantages over Twine 1:

In my first Twine for Beginners tutorial I recommended using the “Publish to File” option regularly in order to save your work in case of accidents. I touched upon the fact that this file is both a copy of your work and a playable game that you can share, but never really explained the full significance of that:

Anything that’s been made in Twine 2, you can open up and edit for yourself.

My philome.la profile includes just about every Twine project I’ve ever finished. The vast majority of these can be opened up and explored with the process I’m about to describe. For now, click on Ultraviolent Unicorn Deathmatch of Destiny.

You’re welcome to poke around any of my stories that you like, but a small handful were written using Twine 1 and so can’t be (easily) imported into Twine 2. For the sake of demonstrating the process, Unicorn Deathmatch was both written using Twine 2 and provides an interesting, comprehensible example once it’s imported with these simple steps: Continue reading →

Twine for Beginners: Displaying Random Text

Even using only the most basic range of tools, Twine gives you a lot to work with. You can produce a fully featured interactive story with nothing more than plain old hyperlinks, and if you’re willing to sink just a little time into learning how to use variables, you can introduce some very sophisticated adventure game elements with minimal effort. But those tools only take you so far. No matter what you do with them, games produced with only hyperlinks and variables will always be entirely deterministic: the same sequence of actions will always produce the same effect.

That’s actually a perfectly good way to go. Sometimes – if anything most of the time – you want people to know that what happens in the game will be a direct result of what they’ve decided to do. But an element of chance can spice things up, and if the player is going to be coming back to the same passage again and again (maybe it’s a room they pass through several times, or an action they must take repeatedly) then it never hurts to vary the text they see. There’s a really easy way of doing this:

The (either:) Macro:

Simply writing (either: “one thing”, “another”) is enough to display one thing or another. If you don’t have a whole lot of possible options in mind you can just stick this in the story where you want the random text to appear and it’ll do the job nicely.

This looks like a mess, but the text it generates when played is perfectly serviceable. It might look like this:

Continue reading →

Twine for Beginners: Using Variables

Back in my first Twine for Beginners tutorial (which I recommend at least taking a glance at before tackling this one), I mentioned that it was possible to do just about anything you see in the classic Fighting Fantasy books using only passages and hyperlinks. These gamebooks use a system of numbered passages and references, and choosing which passage to turn to performs exactly the same function as choosing which hyperlink to click in a Twine game. In addition to these standard choices, however, the passages will occasionally say something like “If you have a dagger, turn to 294. If you do not have a dagger, turn to 334.”

I think if I were going to fight Eyeface McBlubberson or Beardy the Dragon Wizard then I’d probably want something bigger than a dagger, but whatever.

There’s a totally obvious way to do this in Twine, and that’s to directly copy the method used in this Fighting Fantasy book. “[[If you have a dagger, click here]]. [[If you do not have a dagger, click here]]” will do exactly the same job and involves absolutely no Twine know-how that wasn’t covered in my first tutorial. If you’re happy to simply ask the reader to keep track of their previous choices (or note things down on some kind of character/inventory sheet) and don’t fancy reading on, then you can just do that. Continue reading →

Twine for Beginners: Pen and Paper Stories

If you’re writing interactive fiction, you’d be hard pressed to find a better tool than Twine. It’s incredibly simple and incredibly powerful, with a reassuringly shallow learning curve. With a little know-how you can use it to create very sophisticated role-playing games, but even with no know-how at all you can jump right in and write a fully functional Choose-Your-Own-Adventure-style story. I’ve already written a tutorial that shows how you can get started in just four clicks! This one will pick up where that left off and show you how to convert your Twine story into a format that can be read on plain old paper without the aid of a computer.

Just like these!

I do very much recommend having a look at that first tutorial before beginning to follow this one, by the way. At least keep it open in another tab to refer to. Nothing in here is going to be particularly complicated, and if you’ve already had a fiddle around with Twine 2 then chances are you could probably follow along well enough. However, having my Getting Started in Four Clicks tutorial handy would probably save some confusion, as I’ll be referring back to it here from time to time.

In Getting Started in Four Clicks I made the case that merely by knowing how to link passages in Twine using double square brackets, you’ve got just as many options available to you as Steve Jackson and Ian Livingstone did when writing the Fighting Fantasy series back in the ’80s. However, though these simple Twine stories would in theory work perfectly well on paper, there are a few extra steps involved in converting them from Twine’s (far superior) system of hyperlinks into the (slow but printable) system of numbered passages and “Turn to…” instructions used by pen-and-paper gamebooks. Continue reading →

Penny McPaperface

This is an interactive story intended to illustrate the principles outlined in this tutorial post about pen-and-paper interactive fiction. A hyperlinked version of it can be found here for comparison.

1

Once upon a time, Penny McPaperface was writing a story in Twine. Twine let her put together a really top-notch bit of interactive fiction using simple hyperlinks mixed in with the text. However, because she wanted the story to work when inscribed on a thin slice of dead tree too, she considered writing out all the interactive options at the end of each passage so she could stick numbers next to them. Whatever should she do, she wondered?

End each passage with a list of options: 2

Naah, it’s fine. Just keep the links in the text: 3 Continue reading →