Fiction is a Three-Edged Sword

Fiction, interactive fiction and narrative

Another click-to-play IF prototype


I enjoyed Erik Temple’s latest demo so much that I had to jump on the band-wagon: so here is a take on the click-to-focus, click-to-do model he’s come up with, built into the online version of Make It Good.

Currently, the intelligent commands peter out after the first few turns, because I’ve not gone through the Inform 6 code adding in links to every object reference (sigh)… and it’s horrifically slow… but it’s still interesting, I think.

My previous cut of this prototype had a side-window, containing various panels – a notebook of clues, an inventory, a map (though I never got as far as building that). This version strips all of that away for a pure one-screen experience. I think, having tried both, I prefer this.

It keeps the player focussed on the one place they should go for interactions. I wouldn’t mind a pop-up hint window or something for when they get stuck – but in my more cluttered prototype, I didn’t like the way you had to actively play in several different windows to progress.

(I still want to add a graphical map. But Quixe can’t do images, yet, and I can’t draw at all well…)

Note, this is the demo with Interactive Parsing, so that’s there too, if you do decide to type. Playing the game you can flip between the two modes using that little (X) symbol that appears when you’re focussed on an object. (Erik’s had a graphic; how he did that, I have no idea.)

Lots to be fixed: I want to remove the hints in the subject line, make the suggested actions contextual, and have a think about how to do conversation. But still… but still

(Oh, and on a Mac, the font is considerably nicer than on a Windows machine. If anyone can explain why, I’d be grateful.)


Author: joningold

Jon Ingold is a writer and games designer from Cambridge, UK. He is co-founder of inkle, a company specialising in interactive narrative for mobile devices. He has written prose, plays, short films as well as interactive fiction, both in hypertext and parser-based systems. His short stories have appeared in Interzone magazine and his IF works have won competitions and awards.

6 thoughts on “Another click-to-play IF prototype

  1. I’m really looking forward to more like this!

  2. Hey, you’ve saved me a little work! I’d been working on a fourth (and final) version of my demo with the same basic setup as you’re using here–but now I don’t have to finish the tedious final touches, because you’ve beat me to the punch.

    A quick question before I comment: How are you handling the links in I6? Are you hard-coding the values for each one individually, or do you have a fancy system to automate most tasks? My example uses I7 indexed text for all links, via the Inline Hyperlinks extension, which makes things extremely easy for the author (example: say “[link]examine [if O is the player]myself[else][the O][end if][end link]”). I’m wondering if there’s a good way to do this as simply w/o indexed text.

    I like the way this solution works to emphasize the input line and make it the center of interaction; it’s nicely compact. I don’t much care for the placement of the travel links, though; having them between the input line and the transcript seems to minimize the connection of the input line to the ongoing textual output. I do like the text you’ve given to the navigation links, though (“walk up the street”, “walk down the street”, etc.). This is far easier to think with than compass directions, especially for newcomers.

    In working on this myself, I found that the horizontal orientation of the verbs makes them harder to process mentally than the vertical list, at least when there are more than a scant handful of options. (Vertical lists have a predictable rhythm–one per line–that horizontal ones lack.) I tried to tackle this in two ways. First, by trying to make each button as small as possible: the first link gives the full name of the focused noun, but subsequent buttons refer to the item via the appropriate pronoun. Second, by coloring second-order links differently. For example, when you focus on a container, each of the contents gets an examine button; however, these options are secondary to manipulating the focused container itself, and so are colored differently. Here’s a sample that illustrates both:

    I’m not sure whether these refinements materially help the problem, but there they are.

    You wondered how I was able to incorporate a graphic into the input line for the X button. In I7, the button is just a space character wrapped in both a hyperlink and a special text style, e.g.: “[custom style][link] [end link][roman type]”. On the Quixe side, a CSS rule gives the custom-styled A element a background image, and voilá. (All of the custom CSS is in the glkote.css file should you want to see what I did.)

    I agree that a graphical map would be the cat’s meow. I see a simple swipe allowing the user to page between the text interface, the map, and a page for notes.

    Re conversation, I probably should have noted that with any of the versions of my demo, you can type TEST CONVERSATION as your first command to go straight to the first conversation in the game. Aaron used conversation suggestions in Sand-Dancer, and I was able to simply use those suggestions as the buttons for conversation options. (Warning: Quixe doesn’t update the screen when playing through the test script, so there will be a long delay in which the game is apparently frozen–this is why I didn’t mention this option in introducing the demo!)

    Anyway, looks good! Given the speed issues, I suppose that the best way forward for this kind of thing is maybe a FyreVM solution or something like that; a native app, anyway…

    • Urk, I thought wordpress allowed images in comments, but maybe only the blog owner is allowed to post them. Anyway, here’s a link to the image I tried to inline above:

      • I thought a lot of the colourisation you did, and the vertical/horizontal sorting, was really good. With this I hadn’t even got as far as thinking about containers, except maybe that I wouldn’t list options on subcomponents automatically, but instead let people search to bring up the noun name, and take it from there.
        The image thing is clever. I may try to repeat that trick, although I’m running low on custom styles! (I know you can make it specific via window rocks, so I’ll copy how you did that.) But thanks for the tip.
        Overall though… this feels very good to me. Though it’d be great to get more feedback from people outside of the main community. I still wonder if they’d simply be overwhelmed!

  3. Yeah, less may be more where containers are concerned. I’ve been trying to minimize the number of taps (clicks) required, but there is also a design/interface concern–exacerbated when options are presented horizontally–with too great a profusion of options on screen. I agree that it would be nice to see how non-IFperts respond to this!

    Regarding custom styles: it actually isn’t necessary to expend custom styles on this. You could use pretty much any style. All of the styling is controlled by CSS, so a hyperlink that is wrapped in a given style (heading, emphasized, whatever) can be treated completely differently from non-linked text in the same style. (Hope I expressed that clearly enough.)

  4. Pingback: Glimmr

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s