Twine without CSS or Javascript

I recently learned that an online Twine jam was going to be happening this weekend. It’s a “Naked Twine Jam”, where all submissions must avoid using any CSS or Javascript modifications whatsoever:

Twine is also very easy to customize. However, while visual modifications and external modifications can produce lots of interesting results, they aren’t at all necessary to tell compelling stories.

For this event, we’ll all work within the creative restriction of using only the basic Twine program with no CSS or Javascript modifications. If you don’t know what that means, then don’t worry about it! Just download the program here and start playing around with it.

I haven’t actually completed many Twine projects I’m proud of, but all of the ones I’m deeply invested in involve a LOT of javascript plugins and CSS modifications. My favorite thing about Twine is the versatility you can achieve through unusual text behaviors and page layouts. A lot of my favorite Twine games ever would be impossible without javascript plugins. Breakfast on a Wagon With your Partner, for example, could not exist without the cycling link macro. All I want is for all my friends to become insanely powerful would not have the same crescendo without the targeted CSS macro. Anhedonia has important audio and visual elements that would not be possible without javascript and CSS. Without those elements, it would be a completely different kind of art.

I have no problem with the idea of a “naked” Twine jam– in fact, I’m already participating– but it is making me realize how much I value customization and specialization in Twine projects.  I’m fascinated by words changing and behaving uniquely on-screen. I like cycling links, unfurling sentences, etc. Not all of my projects use these kinds of behaviors, but I really like them, both in my work and in others’. I like that Twine allows authors to add this functionality.

Fact is, when you add new behaviors to onscreen text, you can actually say new things. I recently met with another writer who’s interested in new ways of presenting nonlinear narratives, and during that conversation we talked a little bit about how the artistic possibilities of hypertext are unrealized by the tools and platforms people have been using to consume digital writing. When you add cycling text to a page, you can actually communicate in new ways that you could never could before. When you add “unfurling” text, the possibilities for communication expand again. To make an awkward analogy, when it comes to the communication of ideas, these features are less like fonts and more like entirely new words.

Twine is special because it’s accessible, but it’s also special because it can be incredibly complex. You can make Twine behave in extremely specific and unusual ways, which in turn allows you to say very specific and unusual things that can’t be quite said in any other way. If I’d been writing Swan Hill in linear form as a short story, I could have communicated the Chancellor’s inward-looking attitude in a number of different ways, but I couldn’t have possibly communicated it in exactly the way that I ended up doing so. And I have the replace and revise macros to thank for that. That’s the kind of thing that I value about Twine.

Nevertheless, I’m enjoying the challenge of making a game without CSS or javascript modifications of any kind. I’ll probably go back after the jam and spruce it up before hosting it on my own website, but until then, the story looks a little like this:

1510593_2046495157039_570962320_n[1]

More word stuff I’ve enjoyed recently

Aliens by James Cameron

aliensscript

I recently read the shooting script for Aliens. If you enjoyed that movie (or any well-made action movie), I highly recommend you take a look at this script. It’s pretty damn excellent. Use the above image to find a good copy to read.

Destroy/Wait by Pierre Chevalier

14e68b93c6314b9be9221bd170348fbf[1]

A beautiful little Twine poem. Strong imagery. A melancholic mood.

Solarium by Alan DeNiro

solarium-cover[1]

Structurally complex Twine story in a post-apocalyptic Cold War setting. The story is told in a looping, circling style, which Alan previously used in We Are the Firewall. His stories bring the reader back again and again to the same passages, but give them opportunities to experience those passages differently. He is the only Twine author that I know of who currently uses this style in this particular way. Besides the fun structural stuff, though, this is a wonderful story with a surprising and satisfying ending. Very much worth playing through completely.

Broke Down by Saguaro

brokedown

As you read each passage of Broke Down, you have the ability to add or remove detail, making the story more or less complex. Sometimes the details you add are interesting and funny. Sometimes they hurt, a lot. I like this (and Solarium to a certain extent) because I like stories that have “mechanics”, that have consistent and interesting ways of changing or presenting the text. One day I want to write a story that has a whole bunch of link “mechanics” like this one, all interacting in unusual ways.

Device 6 by Simogo

device_6_screen07[1]device_6_screen02[1]

Simogo previously created Year Walk, a popular iOS game about Scandinavian legends. Both Year Walk and Device 6 present worlds which the player must explore via strange and novel navigation methods– methods which encourage a refreshingly frank and direct interaction with whatever’s on-screen. Unlike Year Walk, however, Device 6 is a textual experience. It’s not hypertext, it’s not parser– it’s something completely different and weird.

Instead of linking to new areas or entering commands, the player scrolls along vertical or horizontal panes and lines of text that twist and turn to imitate the shapes of the imaginary spaces the story takes place in. Pictures appear in frames and slowly scroll or pan by beneath the text as players swipe from side to side. Some of these panes contain pictures of ancient electronic equipment, which the player manipulates using obscurely-labelled buttons. Sound, too, is central to many of the puzzles. A few gems require the player to do unusual things to the iOS device itself in order to uncover the solution.

The game’s visual presentation is all about layers– layers of text, layers of images– and the story itself echoes this. There are several nested layers of narrative in this game, and nested protagonists, too. Some of this is never completely explained.

It took me only about an hour and a half to play Device 6. I completed pretty much every puzzle within 5 minutes or less. None were particularly hard, but they were all satisfying to solve.

I highly recommend taking a look at this game if you have the time and money.

Things I’ve recently learned about hypertext

Prior to writing Swan Hill, I had never tried to make anything in Twine but standard “choose your own adventure”-type stories with text prompts and choices. They were fun to write but left me feeling a little bit cold. To be honest, the CYOA text-prompt-and-choice structure– the stilted, awkward way it seems to constantly interrogate the reader– doesn’t always fit very well with my writing style.

After almost a year of reading great Twine stories without the CYOA structure, I came across Breakfast on a Wagon With Your Partner, which uses Leon Arnott’s replace macro super-effectively. It reminded me that I’d never actually experimented with replace myself!

I’d recently attended a loud, busy party for the first time in months, and had left feeling pretty sick and overwhelmed. I quite liked the idea of using the replace macro in a party scene to give a reader that same sense of wandering overwhelmed-ness. I imagined a paragraph which slowly expands from concise sentences into long, confusing ones as detail upon detail is added.

The idea excited me. To prepare, I went back and read a bunch of other stories that feature this macro. I immediately noticed two things:

  1. Writers do not usually distinguish replace links from other links. This can lead to confusion and missed content, particularly if the page is covered in links that all behave differently.

  2. The use of color in Breakfast on a Wagon With Your Partner was really helpful! It distinguishes your speech from Sam’s without cluttering up the page.

I wondered why I hadn’t seen color used to distinguish replace links from non-replace links in more Twine stories. In the end, I decided to give my story color-coded links. It was going to use a LOT of replace, and I wanted the reader to anticipate and understand what each replace link would do. I thought I could write the story in two weeks. There were really only a few things I wanted to illustrate with it.

But I didn’t realize how complicated the replace macro could be! The first night I sat down to write the story, I wrote straight up up to the first +++ in one go. When I wrote the scene where the Chancellor lights the Duke’s pipe, however…

iL4QxWv

I realized that I could use replace in more interesting ways. I’d been thinking of using replace simply to add more detail, but now I realized that I could also use it to give scenes a sense of timing and suspense.

Then I discovered the combined replace macro, which includes replace, insert, revise, and other macros. With this expanded toolset, I realized that I could use replace and the other macros to:

  1. …Illustrate the main character’s style of thinking. He spends a lot of time in self-reflection. I could use replace to show these moments of reflection and make the reader replicate his way of thinking.

  2. …Replicate various feelings, like confusion, the sensation of being overwhelmed, the passage and transformation of one kind of physical pain into different kinds of physical pain, etc.

  3. …Apply timing to specific events. The pipe-lighting scenes are good examples of this.

  4. …Avoid walls of text. “Unfurling” the text makes sure that the reader is “checking in” at various points during a longer passage, and prevents that longer passage from being so overwhelming at first glance.

  5. …Make the reader focus on specific words and pieces of information by inviting a click, but not whisking them away to another page. Many Twine games use page links to direct attention to specific words, but page links can be disruptive, because they replace all the text on the page. Replace let me keep the text on the page, and even keep the clicked word on the page, if I wanted. This let me use the clickable-word attention-directing mechanism multiple times in one passage, if I wanted.

I was so excited by replace that the first completed draft of my story used it WAY too much. Here are some of the pitfalls I ran into when I began over-applying replace:

  1. Although replace is often less disruptive than a page link, it is still disruptive. Some passages– particularly those which do not contain a rhythmic series of events– suffer if the reader is forced to “check in” with clicks. I ended up removing replace from many passages where the events taking place were contemplative or slow.

  2. Replace can draw too much attention to something. Applying it overenthusiastically caused me to “unbalance” some of my paragraphs.

  3. Using replace to insert one idea inside of another is not always the best choice. Too many disparate ideas on one screen can diminish one another.

I also ran into some problems when readers began reporting that they could not understand the difference between red and black links. This was pretty confusing to me, since I’d constructed the first several passages with an eye toward teaching the player how red and black links differed. The first screen after the title screen, for example, forces the player to click a black link in order to expose a red link. Other passages in the first section of the story give the player a good opportunity to see how black links behave. I thought that by the time the player got to the pipe lighting scene, they’d understand completely.

However, it turns out that some people didn’t. I spent a good week trying to figure out how to communicate the color-coding effectively. It was a pretty weird problem, since some people were telling me, “man! I love the color-coded thing!” while other people were telling me, “HELP! I DO NOT UNDERSTAND COLORS.” There was very little difference between these two groups of people. Some people who had never played hypertext were fine with the colors, while some people who had already played a handful of diverse Twine games were intimidated by the colors.

In the end, I realized that most of the people communicating a confusion with link colors were communicating the confusion they had first felt with the link colors, and that an initial confusion with the the link mechanics did not prevent them from finishing the game or appreciating the tale. I was worried about cluttering up the story or diminishing the simplicity of the beginning by introducing an explicit tutorial. It was very important to me that the first part of the story focus 100% on the brothers and the way they interacted. I decided to add the three small clicks on the first page– “to begin the story, click here; now click this word; now start”. This, I guess,  pretty much doubled the “tutorial” on the first two screens. I’m still not sure it was completely effective, but by that point my feedback was getting so contradictory that I was eager to give up and let the story go.

I have another idea in the works for a different “link mechanic” that I also plan to use with color. Even though some of my playtesters reported difficulty understanding what was going on with the links at first, I think the colors were ultimately an accessibility boost, and they gave me more tools to tell a more complicated and nuanced story.

I’ve played a lot of Twine games where the player was supposed to feel unsettled or confused, and confusion about what a link was likely to do helped to create this feeling. However, my stories are usually about specific characters whom the player “plays” like a character in a play. They are “controllable,” but they have personalities, and I want to convey very specific things about their personalities and experiences. This requires a precision of communication that is not possible when all links look confusingly alike.

Anyway, I’m still excited to figure out cool new stuff to do with replace! I feel like I’m really starting to “get hypertext” in a way that I couldn’t when I was exposed to lifeless, dull, academic hypertext stories in college. There’s a huge difference between learning about interactive story structure by reading dull writer dudes from the 90s, and learning about it by actually examining how it affects your own work. I learned a lot while writing Swan Hill and I can’t wait to apply it to my next project.

Visual resources for Twine

I’m a huge fan of pictures in Twine. Sometimes even extremely simple images can add a lot to a Twine story. For example, the small square pictures in Porpentine’s Climbing 208 Feet Up the Ruin Wall are beautiful, brightly-colored little accents. But sometimes pictures can be more than accents– they help tell the story, or do the major work in setting the mood. I recently played a super-throwbacky little horror adventure called Mad Dog which used simple but evocative images to set the story in time and place.

Using pictures in Twine games is not a problem; unlike prose or poetry, hypertext fiction doesn’t have thousands of years of rules to follow about whether it’s OK to stick pictures randomly in our stories or not. So I think we should! Pictures everywhere! More pictures in Twine games! They’re fun and they make me happy. I don’t see them enough.

HOW TO PUT A PICTURE IN YOUR TWINE GAME

Let’s pretend we have a picture we want in a story. The picture could be any file format that displays in a web browser– picture.png, picture.gif, whatever. Today, though, we’re using picture.jpg.

The first thing you have to do is put the image file in the same folder as the .html file of your game.

KN2Ht6q[3]

Once you’ve done that, the syntax for placing picture.jpg in the story normally would be:

[img[picture.jpg]]

But what if you want to make the image clickable, like a word link? You definitely can! You can have the image act as a link to another passage in the story. Let’s pretend we’re writing a story where we want to have the player click on a map to find a buried treasure. The treasure is found in a passage called ‘treasure,’ and the image is called map.jpg. In that case, the picture link would look like this:

[img[map.jpg][treasure]]

You don’t have to save the image in the same folder as your html file if you don’t want to, though. You can also link images directly from the web:

[img[http://i.imgur.com/KN2Ht6q.png]]

You can also make images link to webpages instead of other passages:

[img[map.jpg][http://en.wikipedia.org/wiki/Treasure_Island,_San_Francisco]]

PLACES TO GET COOL IMAGES

If you’re looking for high-resolution pictures on a specific topic, it’s sometimes hard to find good art that you’re allowed to use in your own projects for free. However, there are some pretty reliable art resources out there that will connect you to creative commons or public domain images that you can use for whatever you want, or even modify.

1) Creative Commons Search

This website will search image databases that contain a lot of creative commons images. Images under a creative commons license are free to use, but some are restricted. If you want to find a picture you can edit yourself, make sure the little box that says “modify, adapt, or build upon” is checked under the search bar.

My favorite database to search on this page is Flickr. It’s huge and, of course, very frequently updated.

Remember to cite the creators!

2) Wikimedia Commons

Free-to-use images from Wikipedia’s media collections. They currently have almost eighteen and a half million images. This means that navigating the content through the category browsing links on the front page can be a little daunting and overwhelming. However, the search function is good.

Remember to cite the creators!

3) Getty Open Content Program

The Getty is a big art museum in southern California. It contains a lot of old and weird works of art purchased by an ancient captain of industry. They own the reproduction rights to some of the artwork they have. They also own a lot of art which is SO OLD that nobody has a copyright on it anymore. They’ve decided to release both of these kinds of images for free use to anyone who wants them.

The overview of the program can be found here. The full list of all the usable content can be found here.

The one thing about the GOCP is that searching this database can be hard. Addiionally, you’ll notice that most of the pictures here are pretty old, or are drawings of old things. We’re talking 1800s and older for most of the items in the database, including the photographs! However, if you’re doing something with an old-timey theme, this is a great resource.

Remember to cite the program in accordance with their rules!

Sister Power Activate

Sister Power Activate is a Twine game about sisterhood and superheroes.

My friend Katie Welka and I made it at the iamagamer jam in Mountain View, California, in early July.

You can play it here.

Here are some things you should know about the game;

  • it has two endings. Also, you cannot “fail” out of the game, so don’t worry about that stuff.
  • The game tracks several variables! Your decisions throughout the game will contribute to the final ending!
  • It has sound! Sounds were provided by Philip Foster.
  • THE SOUND WILL BREAK IF YOU NAVIGATE BACKWARDS DURING THE STORY!*
  • We wrote this whole thing in 48 hours! it has 255 passages and 16,189 words! THAT’S INSANE!

No other game jam I’ve been to has required me to type so many words so quickly.

Immediately after finishing the iamagamer jam, I went home and started writing the first parts of my other story Swan Hill, which is why it took me so long to get off my ass and fix the sound cues in this game. I feel very bad about that. The version on the iamagamer website is identical to this one, except for those sound cues, which this new version uses more effectively.

_____

* Do not do this! DEFINITELY do not do this and then tell me the game is “broken”! No, it is YOU who are broken, cheater!

Swan Hill

swanhillSwan Hill is an interactive story about brothers who have grown apart. It has multiple endings.

You can play it here.

Thanks to all my many playtesters, who helped me turn this project around over the last few weeks.

—–

This story took me two months to write. It marks my first time using Leon Arnott’s Replace macro. I am now addicted to the Replace macro.

Swan Hill contains an image from the Getty Open Content Program. I highly recommend this program to people who are looking for images for use in Twine stories and other free interactive fiction projects on the web.

—–

If you are curious, here is the twine .tws file.

Here is a screenshot of the node map.

Some word things I have recently enjoyed

JAWS: The Text Adventure by Matt Round

aWKldUf[1]

Is it a spoiler if I tell you that you PLAY THE SHARK in this game? Most of my friends seem to have not realized that they were the shark until they began eating people.

Anyway. It is the plot of Jaws. As a text adventure. Relive the exciting cinematic experience in grainy cyan and crimson.

Nested by Orteil

3f39c1e4eaa63b4b4496ed42edbd7477[1]

The same masterful mind that brought us Cookie Clicker has created a text “simulation” of the entire known and unknown universe. This is one of the most gorgeous things I have seen in the past several months, period. You simply must see it for yourself.

At the risk of spoiling some content, here are a very very few questions you should solve for yourself before you stop playing with Nested:

  • Who says “ACK ACK ACK”?
  • What can you find inside music?
  • What do bacteria think about?
  • What can you find inside underwear?
  • Can you find a castle?
  • Can you find a cookie? How about A LOT OF COOKIES?

Utopia by Tom Flynn

ALkUeyZ[1]

I am strangely attracted to this weird little picture-sound-poem.

That’s all I have to say on the matter.

Guilded Youth by Jim Munroe and Matt Hammill

gy_poster_600x600[1]

I got this game as part of the LA Game Space gamepack. However, it is also available on the internet at the link above. But if you have $15 to spare I recommend getting the game pack; it has a lot of neat and trippy stuff in it.

Guilded Youth is about kids exploring things they don’t understand. it gets weird and confusing at one point in exactly the way that youth is weird and confusing, and I was super impressed. Very short and easy play with great art.

My Favorite Molyjam 2013 Games

Of course, I haven’t played EVERY Molyjam game this year. But I have played a nonzero quantity, and among those, these were my favorites.

The Rogue Less Travelled

titlescreen[1]

It’s a randomized dungeon-crawler done IN TWINE. Very exciting! Far and away the most interesting-to-me submission in the entire jam. These guys were working directly behind me at the IGN office and I kept getting fascinating glances at their work whenever I got out of my chair. Definitely worth SEVERAL plays.

Haughty or Naughty

haughtyornaughty

Haughty or Naughty captured my imagination in the same way that Drawception once did. It’s a magnetic poetry game/website which provides you with a poetry title, then gives you a series of suggestive words themed to that title, along with a bunch of more-ordinary words common to every poem. You arrange them to make a four-line poem, which other users then rate as “haughty” or “naughty.” I love the way words are themed to the title. There’s some great stuff popping up on this site right now. It’s given me a lot of neat ideas!

Back to the First Date

backtothefirstdate

A comic about two time-travellers trying to fix the date they went on several weeks before. You click on the things they say, change them, and watch the changes propagate down through the panels of the comic. It’s a very cool way of presenting this kind of conversation gameplay! It reminded me a little bit of the memory remixing in Remember Me– but the comic layout makes it way easier to see all the changes and plan your decisions in this game. This is another one that gave me a lot of good ideas.

Molydog: Dogulus Rift

thumb_article_Screen_Shot_2013-07-07_at_17.44.34[1]

I of course have not played this game on its intended platform, as I’m not a swank motherfucker who owns a Rift development kit. However, I watched a video of it, and it was awesome. I love the verbs the player uses and I love the idea of a game about embarrassing the in-game dog owner and the player, simultaneously.

Scarred

staringatme[1]

Scarred is simple but sobering . This game used the same prompt that my Twine story did. The creator of Scarred, Leo Burke, took it way more literally than me, however– and did a great job. The environments seem crudely-constructed at first, but are actually very effective at communicating a specific mood. The mazelike corridors and passageways made me feel trapped and lost. The scripted events at the ending are also pretty good. Make sure you read the quote through before playing. I personally picked this quote because, out of context, it seemed so important and significant. The creator of Scarred managed to tease the significance out of this quote much more effectively than I did.

Hello World!

helloworld

Explore the environment and leave messages. There’s a lot of cool stuff to read here, and the environment is bright and appealing.

Loyal

title_Logo[1]

This game isn’t actually finished yet, but it was demoed at the SF location and I was super impressed by what they had to show so far. Great art, an interesting puzzle mechanic, and effective micro-storytelling. You play a dog growing up alongside a young girl. You must protect her and keep her safe. Every screen depicts a major life event; you get to choose three actions per screen, and watch the results play out. Special action combos result in interesting events.