Part 2 of my ongoing delve into making a simple Twine game. Part 1 is yonder.

I’ve hit a wall.

Like so many of my attempted magnum opi, my little Twine project spiralled out of control on its opening night. After my initial spurt of concentrated storytelling I found myself adrift on a sea of self-doubt and overwhelmed by the sheer number of paths I had constructed that needed attending.

My cork board currently looks like this:


The red section is the Ripping Yarn, Indiana Jones-esque adventure, the tiny little green section the meta-narrative ‘game about a game about a game’ section and the huge unwieldy blue section includes the multiple off-shoots from the ridiculous ‘poo’ introduction. This includes a sci-fi story centred on an AI (to the right) and the branch revolving around a break-up this version of You has recently gone though (centre).

Long story short, at the moment I want to scrap it all and start over.

This is not an uncommon impulse. Self-confidence in my writing has never been something I’ve had an adequate pool of, and often at the first sign of difficulty I will cut and run rather than forge on and iterate. The main issues causing me to consider this at this point are:

  • I hate the ‘poo’ intro. It’s… the worst.
  • I am intimidated by the sheer amount of work this, a first-try experiment, is going to demand.
  • I have no idea where the two most expanded branches are going, or what the point of them is.

Most of all what’s got me stumped is the potential of the thing. The two blue branches (not to mention the unwritten third) are potentially massive efforts in themselves: completely unrelated stories with differing themes and outcomes, one with a split narrative of the story being written and the second-person protagonist writing it. As this whole thing was based on little more than a brain-dump this now means I need to storyboard and framework these two narratives in order to give them meaningful arcs around specific themes. This in turn means coming away from the writing of the actual game and retreating to a planning text. In any other work I would have begun with this, but as the whole thing was birthed from me sitting down and writing for a hour or so, that forward momentum now has to be stopped in order to sure up the foundations.

In order to distract myself from story-time demolition, I decided instead to dig into the guts of Twine and discover exactly what the programme was capable of. First stop, style.

I’m very font of you.

I stated in my first diary that Twine was incredibly simple and this remains true, in a sense. The basic functions of creating a branching narrative are indeed rudimentary. As with most things in life however, it turns out there be monsters below the surface. In this case, the monster is CSS.

CSS is, as far as I can tell, an extremely common and fairly basic code-set that exists at around the same level as HTML. For those in the cheap seats, HTML (or ‘hypertext markup language’ I didn’t even have to google that booyah) is/was the basic language behind websites. CSS is, specifically “a style sheet language used for describing the presentation of a document written in a markup language like HTML.” Thank you Wikipedia.

Here’s the wiki entry on how to change a font in Twine:

Changing the Font

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

body, tw-story
  font-family: Palatino;
  font-size: 18px;

Fonts are not packaged with your story files automatically. If you use Palatino, and someone reading your story doesn’t happen to have Palatino installed, your story won’t display with Palatino. There are two strategies you can use:

  • Pick a font that almost everyone has. CSS Font Stack has some recommendations that include an estimated percentage of users on each operating system that have a particular font.
  • Use an embedded font, which browsers download when your story loads. Creating an embedded font is a somewhat complicated task, but take a look at this page if you’re curious how it works.

Using Google Fonts, which allows you to embed a font with a single extra line of CSS, is much easier. Here’s how you would use Lora as your story’s font:

@import url(,700,400italic,700italic);
body, tw-story
  font-family: Lora, serif;
  font-size: 18px;

I especially like the description of the process as ‘very easy.’

Still, after a few minutes of copy/pasting I found that it is, in fact, fairly easy to change the font style of your story. Changing the colour of the background is a similarly simple task: open your story’s stylesheet, pop in a line of CSS and done. Easy… and practically useless.

This method simply alters the RBG characteristics of the text and/or font, meaning you end up with something like this:


Even with the application of more subtle tones, this is garish and simplistic; the opposite of what I wanted from delving into the finer points of Twine’s back-end. More investigation is therefore required, including going back and re-learning HTML

Keep Calm and Oh God Look at What This Guy Did Oh Bollocks

I also decided, foolishly, to look at a few other Twine projects from people I admire. To gain inspiration perhaps, or to see the creative ways people were using the programme (also to crib ideas, obvs). One of these people was Austin Walker, Editor-in-Chief over at Vice’s gaming arm, Waypoint. He’s rapidly become one of the most interesting voices in video game criticism and commentary, bringing a decidedly academic analysis to the industry whilst remaining charmingly besotted with its tropes. On a recent episode of the Waypoint podcast he made passing reference to an old Twine game he made with a few others, so I googled the title and found the below:


The first thing of note is the style of the thing. It looks, if not artistic, then appropriate for the immediately apparent cyberpunk setting. It’s a relative proxy of a cyberspace terminal, complete with hexed borders and chunky links. The second is the language Walker employs: intentionally confusing portmanteaus and references, using unexplained terminology that either requires a leap of assumption from the reader or a separately linked, in-character explanation.

Upon seeing even the first screen my stomach sank; this was way beyond anything I’d thought Twine could produce. After reading the first line it sunk further. A soundtrack? What a fantastic idea. After clicking the link and finding not a random playlist of appropriate tunes but a custom soundtrack with accompanying original art, my meagre digestive organ imploded like a Coke can released into the crushing waters of the Mariana Trench.

It was quickly apparent that the research exercise was a mistake. This, my first example, had produced nothing but feelings of self-doubt. Of course it did. I’ve spent a grand total of maybe 2 hours with Twine and this was obviously the work of someone extremely well versed in its usage. It is also the product of at least 3 persons brought together by a GameJam (timed events where developers and other video game types meet to quickly hash out games, usually based around a theme).

I ended my last entry on a lesson learned and thanks to this misadventure I can once more. This time however I have the Big None-Existent Guy in the Sky himself to sum it all up. Take it away buddy:

For we dare not class ourselves or compare ourselves with those who commend themselves. But they, measuring themselves by themselves, and comparing themselves among themselves, are not wise. 

II Corinthians 10:12, NKJV







Post Credits Scene

After reading further into Walker’s piece I cheered up a bit.

Beyond the interesting use of language and capable world-building, the story of A(s)century seems fairly rote by cyberpunk standards. In a rare moment of positive reflection I realised I was more than capable of matching the imagination of the content at least. The idea of letting the player settle into the story before providing them with options was also something I found useful to see in practice, and is definitely an aspect to consider whilst furthering my own experience in Twine storytelling.

Also, the flashy styles and transitions were cribbed from pre-crafted CSS macros created by a member of the Twine development team. Cheeky.

Next time: Rik actually gets a move on and writes more of his bloody story.