Advanced graphics for Inform 7

Posts tagged ‘interactive fiction’


A new entry for Kerkerkruip‘s Rogues Gallery: the Minotaur.

Minotaur: Fruit of the mad monk Mendele's vile experiments, he wields an axe rumored to possess mystical powers.

The Kerkerkruip Rogues Gallery entry for the minotaur (Cochin). Background texture courtesy (Click for full size.)

The minotaur marks a shift in the framing of subjects that I will likely follow for many of the remaining entries in the series. While all of the previous rogues gallery cards show full portraits of their subjects, for the minotaur I decided that I wanted to be able to show more detail, particularly in the treatment of the fur and small details like the reflections on the earrings or the knot in the wood of the axe handle. It was a bit difficult to fit the elements I wanted to show–head, fur, muscles, axe–into the frame, and I toyed with a number of different compositions before I found one that worked. I’m happy with the way that the figure pushes at the edges of the composition.

Kerkerkruip‘s minotaur isn’t trapped in its labyrinth, like the Knossos creature was; instead, his labyrinth exists in some alternate dimension, and he brings his enemies there to disorient and terrify them. It is thus worth noting that, unlike many images of minotaurs you will find on the web, this one does not wear a ring in its nostrils like a common bovine. Instead, he wears the rings in its ears, as you might expect a free creature with its own labyrinth to do.

The font used is Cochin, a typeface created in the 1910s that I’ve always found interesting for its curious combination of sharp angles, solidity, and graceful curves. The fur in the illustration is drawn mostly from the italic, while the body is mostly from the roman. For fun, I’ve included below another typographic illustration that uses Cochin.

Cochin Typeface Poster, by Alicia Gibson.

Cochin Typeface Poster, by Alicia Gibson.

Kerkerkruip is roguelike interactive fiction, written by Victor Gijsbers. You can download the game here, or participate in its ongoing development here.

Kerkerkruip version 8 released!

Kerkerkruip 8 has been released. If you don’t know Kerkerkruip, it was recently cited as one of the most important representatives of the roguelike genre of video games 🙂 This latest release brings new content, including five new rooms, new items, a new monster, new combat actions, and the addition of “blood magic” to Kerkerkruip’s dungeon.

Kerkerkruip 8 also marks the release of the new graphic/animation content that I’ve been working to bring to the game using Glimmr. Here’s a quick summary of the Glimmr stuff that’s now in Kerkerkruip!

 1. Minimovies

Before the animated titles appear, a silent animated narrative plays out. There are currently three of these, each 4 to 5 seconds long, and more will likely be added over time. Composed of typographic symbols, they depict–with a touch of humor–situations that can occur in Kerkerkruip, each one prefaced by the typed command that brings it about. Here is a less than successful > ATTACK against the swarm of daggers.



 2. Main title

Following the mini-movie, the game’s main title screen appears, highlighting a typographically constructed dagger (see other examples of such daggers here). The main menu options appear as well, and for players who have not yet defeated any of Kerkerkruip’s monsters, the title is followed by a blinking instruction explaining how to begin a game.

Kerkerkruip's title screen, with main menu fading in behind it.

Kerkerkruip’s title screen, with main menu fading in around it.

3. Rogues Gallery

A player who has defeated some of the denizens of Kerkerkruip, on the other hand, can wait at the main menu for the Rogues Gallery to appear. This is a succession of trading-card like depictions of each monster defeated, along with stats that summarize the player’s history with that enemy (for more on the cards, see my previous posts).

The Rogues Gallery title

The Rogues Gallery title

Unfortunately, not all of the planned monster cards are completed. Placeholder cards mark the missing spots for now:

The Chain Golem

The Chain Golem

The placeholder card for the Jumping Bomb

The placeholder card for the Jumping Bomb

4. Map

Kerkerkruip is a game in which your strategy depends on navigating the spatial arrangement of your enemies. Who to attack when–and in what order–to be best prepared to take on the evil wizard Malygris? Kerkerkruip 8 adds an isometric map that I find very helpful in planning my path to victory.

Kerkerkruip's new isometric map

Kerkerkruip’s new isometric map

5. Information panels

The final feature I want to highlight doesn’t involve Glimmr or graphics per se. However, it does provide a visual organization of Kerkerkruip’s copious amounts of information. From your inventory of weapons and items to your character’s vital statistics, attributes & situational combat bonuses, to the powers you have absorbed from your enemies, the new information panels put it all at your fingertips. I’ve found that having combat information at the ready, in particular, has really changed the way I play the game.

Game screen with information panels

Game screen with information panels


I hope that you’ll try the new Kerkerkruip. You can download it here.


I was able to steal a few hours here and there this week to work on another illustration for Kerkerkruip, the mindslug. This giant slug wins not only for its bulk, but also for its psychic/psionic/telepathic abilities. Most notably, it can exert its titanic will over other sentient creatures, turning them into pliant mind-slaves. When we meet it in the game, the mindslug is defended by two such zombis, in the persons of a pair of famous heroes of the sword & sorcery genre.

That’s fun, but I did struggle for a while to figure out how best to portray a psychedelic slug. My initial idea was to borrow the iconic trait of the mind flayer and show the slug rearing up to reveal a ring of squid-like tentacles around its mouth. Cute, I guess, but physiologically nonsensical–the connection between the tentacles and psychic powers is nil, and anyway a slug’s mouth is on the underside of its head where the tentacles would be utterly superfluous.

Later, I thought of the baroque defensive plumes and wild color found on many of the nudibranches (often referred to as sea-slugs). I was especially drawn to the flaming neons of this specimen:


Daggers and an Armadillo

Just a quick progress update, in the form of a couple more “monster” cards for Kerkerkruip.

The swarm of daggers is on a background of textured, cream-colored paper. The daggers are collaged using Galliard, a typeface that was quite popular as a text face in the 1980s and 1990s, but harkens back to Dutch designs of the 1500s. (The name refers to a vigorous, leaping dance of the 16th century.) Galliard has lots of daggery-looking glyphs, with sharp angles and calligraphic strokes, so it seemed appropriate.

Card depicting a swarm of daggers

The Swarm of Daggers (click for full size)

The Ravenous Armadillo, which happens to also have the clubbed tail of an ankylosaurus, is pictured on greenish canvas. (A giant armadillo with a clubbed tail is certainly more frightening than the standard hillbilly speedbump we’re used to here in the US.) The armadillo is rendered in another font with Dutch origins, Proforma. The markings on an armadillo’s armor are interesting and I didn’t want to lose them in collaging the beast into type, so I’ve experimented with color-gradated textural glyphs in addition to the main outlines.

Ravenous Armadillo, on a card for Kerkerkruip

The Ravenous Armadillo (click for full size)

One of Kerkerkruip’s saddest missed opportunities is not allowing for the Ravenous to roll up into a ball as the three-banded armadillo can do:

Armadillo rolling up

Armadillo in an armor ball

On the other hand, we’d get the same effect from a Giant Pillbug; wouldn’t that be a great addition to the game? 😉 If you’re not sure what a pillbug is, you may call this real-life arthropod a roly-poly, a potato-bug, or a pill woodlouse–but it’s known to entomologists as Armadillidium vulgare. (Click through for pictures.)

OK, swerving to a new topic: I am considering setting one of the characters from Kerkerkruip in a non-Western face. Perhaps Malygris in Arabic? Suggestions of typefaces and characters to match them with are welcome!

Contribute a dagger!

I have been working a bit on the illustration for Kerkerkruip’s swarm of daggers, a collection of airborne daggers animated by some vile intelligence and able to act in concert to shred wayward adventurers.

Animated by some dark magic, a swarm of small daggers is flying through the air like a flock of birds, their sharp points eagerly seeking your flesh.

The game’s description of the daggers mentions only an implied uniformity–they are all “small”–but I have decided to depict them as a widely varied collection, perhaps found in some hoard and only then ensorceled. This makes them far more interesting to draw! Here are some of the daggers I’ve done so far (I’ve also put up a few photos for inspiration at Pinterest):

Some of the daggers I've done for Kerkerkruip

Since every dagger can be different, it also gives me an opportunity to invite your participation: Please contribute a dagger for me to include in the swarm! This would be a quick, low-commitment way to try your hand at type collage. If you like the technique, maybe you’ll go on to provide some larger illustrations for Kerkerkruip!

How to go about creating your dagger(s)? Well, the font to use is ITC Galliard. I’m using the roman, bolditalic, and bold italic weights. Having the bold weight available makes it possible to balance “color” even when you have to scale some elements down much smaller than others. If you make the smaller elements bold, the apparent weight will match the larger but not-bold elements.

I use Adobe Illustrator to compose these, and it probably is the easiest program for this kind of thing. There is a 30-day free trial available, or you could use comparable alternatives such as the open-source Inkscape or Xara Xtreme (Corel Draw might also work if you happen to have access to that). You could use Photoshop or Gimp, but the vector editors I’ve mentioned are likely to be a lot more convenient! If you’re new to the software you choose, try googling “introduction to adobe illustrator” (or whatever) to find a selection of getting-started tutorials.

I like to start by creating a palette to refer to. I type out all of the most important characters in the roman and italic weights, also included useful symbols such as the integral sign (used quite a few times in the examples above), the pound currency sign, ampersands, non-English letters such as the cedilla or the thorn, and so on.

I look over these palettes to decide what to place next. Maybe I see a letter that will help limn a real-life object, or maybe I get an idea for a neat pattern for something more fanciful–or maybe I’m just experimenting. Then I just build things up, letter by letter, using the tools provided by Illustrator to scale and rotate the individual elements. Another useful tool, particularly for these daggers, is the “reflect” tool, which mirrors a symbol across a given axis. This allows for the kinds of symmetrical oppositions that you see in the handguards of the bottom five daggers on the left from the image above.

If you like, you can place a photo or other image in your working document (locking it on its own layer is a good idea, so that it doesn’t get in your way) and use it as a guide for placing your type elements.

You may notice that some of the daggers in my selection above are pretty complex, while others are more simple (one of them is just three characters). This is because I plan to have three levels of depth in the illustration, with more detailed daggers in front and less detailed ones in the back. Feel free to submit whatever level of detail you like!

I’ll set the window for contributions for about two weeks, trying to wrap things up by November 4. This is an informal thing, though, so there’s nothing ironclad about that date. To submit your dagger(s), send me your Illustrator (.ai), PDF, or SVG file via email, ek dot temple (funny at sign) gmail dot com. Contributions will be credited, of course!

Looking forward to seeing some daggers!

More mockup art for Kerkerkruip

Here are mockups of two other Kerkerkruip characters. The overall arrangement is a minor variation on the mockups in the previous post. I have moved the character name–which is always set in the same font used to render the character itself–to the right column; this provides more space for the illustration. These mockups also incorporate the character’s written description, which I’ve just pulled straight from the game.

First up, the chain golem. I’m not completely happy with how the illustration itself turned out–I need to figure something else out for the hair especially–but I do like the many different ways that chains and their entanglements are portrayed, from straightforward to pretty abstract.

Mockup of Chain Golem

And second, Miranda with her (Shaolin) monk’s robe and nunchucks. I picture her as kind of a girlish Grace Jones, which I think comes through fairly well in the illustration. (The pose, of course, is classic Bruce Lee.) I decided not to try to make her look like a typical cartoon woman–think exaggerated secondary sexual characteristics–which may actually not have been the wisest choice. Finally, I’m not sure that the topknot adds anything, but I’ve had some feedback that it does, so there it is.

Mockup for Miranda

Update: Here’s a second version of Miranda, with some tweaks to make her a bit slighter. She does look more “feminine” now, but I hope still a bit androgynous.

Project: Kerkerkruip Title Sequence

I have begun my first Glimmr project (aside from the extensions themselves, of course): I am working on an animated title sequence for Kerkerkruip, Victor Gijsbers’s excellent interactive fiction roguelike. Kerkerkruip has recently moved into a new, open phase of development, with the source code on github and design input being actively solicited, so this is a good time for other folks to get involved as well!

Since this blog has been silent for a time’s-stitch of months, it is probably worth contextualizing a bit. Kerkerkruip is written in Inform 7, a system for writing text adventures. I have written a suite of extensions for the system that allows users to realize something close to the full potential of Inform 7’s otherwise barely-there support for graphics. Those extensions are collectively known as Glimmr. You can explore Glimmr in more detail through other posts on this blog; in particular, there are a number of posts on its animation capabilities.

So, the plan for the title sequence is pretty simple: First, we show the Kerkerkruip cover art. Then, because Kerkerkruip is primarily a game of tactical combat vs. interesting enemies–including a golem made of chains, a bouncing exploding ball of flesh, and a telepathic slug–we present a rogue’s gallery of the characters that the player has engaged with.

I have chosen to “draw” these character portraits using a kind of typographic collage, using only letterforms to render lines, volumes, patterns, etc. I’m posting drafts of them to Pinterest as they’re completed. There are a couple of more finished examples later in the post; I am also linking to a few of my touchstones for the style used. (You might think of the form as a lower-resolution version of the examples of “typewriter art” that have hit the web lately.) This approach seems an appropriate nod to both interactive fiction and to roguelikes, the former because of its emphasis on text–of course–and the latter for their association with individual ASCII symbols to represent game entities. At the same time, this sort of typographic collage doesn’t fall afoul of the “retro” sandtrap (as straight-up ASCII art likely would). Finally–and critically!–the technique shifts the execution from a problem of draftsmanship to one of design. That’s a place I feel a lot more comfortable.

The sequence is still in the planning stage. Here is the current breakdown:

  1. Fade in on the Kerkerkruip cover art and let it hover a moment.
  2. Cross-fade to a typographically collaged version of the cover art’s cell bars, then zoom forward, through the bars, to show the game’s main menu options.
  3. At any time after we arrive at the main menu, the player may make a selection from the menu to continue. The main menu itself may have some very minor (read: eye candy) movement.
  4. Once the main menu is in view, the rogue’s gallery will begin animating alongside, flipping at a leisurely pace through the enemies that the player has faced one by one. A few statistics summarizing the player’s encounters with each enemy will be displayed next to it.
  5. The gallery loops until the player makes a menu selection, at which point the menu fades out and the screen selected appears.

Here are a couple of mockups of entries from the rogue’s gallery, featuring the giant tentacle and the reaper, a serial killer who dresses up like Death:




The visual metaphor is of a stack of placards, which we’re shown one at a time; they are intended to vaguely resemble character cards in a game like Yomi or Magic: The Gathering. The statistics to be shown are not final; we’ll need to see what’s feasible/desirable to keep track of. If there aren’t enough different statistics, information about the character itself could be used.

Thoughts/comments on the plan or the mockups are welcome!

Sand-Dancer Sans Keyboard: Take Two

I have put up a second version of the hyperlink-based demo, responding to Jon Ingold’s suggestion (here). This version streamlines the input model so that only clicking on a button will issue a command. Clicking on a link no longer automatically issues the examine command; instead, it merely brings focus to the object clicked. There is now an button for examining in the object-focus window, which is how we issue the examine command.

Try the second version.

Update: A third version, implementing Jon Ingold’s suggestion that links not show until hovered over, as well as putting the description for objects in the focus window. The latter is actually my original implementation (rejected pre-release); it both presents the object description w/o the need for an additional mouse-click, and avoids the visual confusion of updating two windows at once.

I don’t feel that showing links only on hover works very well, at least when they “light up” individually: it’s pretty annoying to hunt and peck links in this way. It might work better if hovering anywhere on a paragraph showed all of the links in that paragraph. Unfortunately, the latter can’t be done with CSS, so I won’t be mocking it up here. (Hovering doesn’t work in a touch interface, so it doesn’t really fit the goals of this experiment as I originally defined them in any case.)

Try version 3.

Sand-Dancer Sans Keyboard: An Experiment with Hyperlink Input in IF

I have recently been very interested in what parser IF (that’s text-based “interactive fiction”) might look like in the “post-PC” world brought of mobile computing. What do we do with a game whose core interface is typing, when we’re operating on devices where keyboards, while available, are less convenient and much less central to interaction than on desktop machines? Given the fact that the form factors of smartphones and tablets are encouraging users to explore new forms of interacting with text–as well as to rediscover pretty much unreconstructed older ones–now is an ideal time to consider how we might refashion the interface for parser IF.

[Updating the IF interface more generally has in fact been a topic of interest in recent years, even without any particular reference to mobile computing: The experience of most users has drifted very far from the command-line interface where most IF remains mired, and there has been a recognition that expanding interest in the form will very likely require changes to the interface. For some of the most salient work, see here, here, and here.]

The present experiment is a simple conversion of Sand-Dancer, Aaron Reed and Alexei Othenin-Girard’s example game from Reed’s excellent book Creating Interactive Fiction with Inform 7–thanks to Aaron for his generous permission to use it here! As such, it is a full work of parser IF. However, the player can use links and buttons to play the game through without typing anything at all. (Actually, I haven’t played the experiment all the way through to see whether I’ve accounted for every section of the game. It’s quite possible that I haven’t–but in principle the interface would allow most standard games to be played all the way through without resorting to the keyboard.) You can play the experimental demo here, using the Quixe interpreter. It will look best on a WebKit browser (e.g., Chrome or Safari) and god knows what it will look like on Explorer. Unfortunately, the browser interpreter is a bit slow; perhaps ironically, it’s too slow to play on a mobile device!

Screenshot of an early moment in the experimental demo.

The window is divided into multiple panes, each presenting a different type of information. In the main window, where the story’s text unfolds, the only interactive elements are hyperlinked objects. Similarly, the player’s inventory is shown off to the lower right, where the linked objects are always available. Click on any link in either of these windows, and the selected object will be highlighted in the upper right window, where its description will be followed by a series of buttons that describe actions that can be done with, or are related to, the object. At the bottom of the screen is another set of buttons representing the player’s navigation options, and above these is a narrow area where commands can be typed if the player wants or needs to enter free-form text. Buttons and links alike are implemented as Glulx hyperlinks–they are merely styled differently using CSS with the web interpreter.

For the most part, the entire overlay is procedurally generated. Aaron used the “Get BENT” system that he discusses in Creating Interactive Fiction with Inform 7 throughout Sand-Dancer, and that means that it is easy to use Inform’s “rule for printing the name of” activity to wrap the names of all important objects in links. After a link is clicked, we use object properties (along with a few special-case items) to generate the buttons in the object window (e.g., if the object is a closed container, provide the choice to open it). We also use the built-in conversation suggestions to generate the options for conversation with NPCs and to display them in the same window. This is relatively straightforward, and I had to make only a few minor changes to Sand-Dancer itself to get the thing working.

Interfaces like this one have a clear benefit where players new to IF are concerned. Possibly they will be easier to navigate than the standard interface, but whether or not that is true, the presentation of full commands in buttons provides a mechanism for teaching the basic command grammar. Over time, clicking on buttons like “examine the letter”, “press the red button”, “ask the lawyer about copyright law” and so on will teach not only those individual commands, but the overall gestalt of the parser interface. Presumably this would lower the bar to playing unadorned parser IF.

As to the more focused question of whether the interface demo’ed here is a productive direction, I leave that to you. (I’m still too close to the micro-choices I’ve been making to evaluate the experience as a whole.) Please give it a shot and let me know in the comments how you found the experience. Even better, if you hold sway over someone with little IF experience, see what they think. (My wife says it solves most of the problems she has with IF–barring the map–but that’s just one data point!)

Final note: There are plenty of technical weaknesses in the implementation of the overlay interface, including both missing features and some bugs as well. For this reason, I am not releasing the source code as I normally would–I don’t want anyone to use this particular code as the basis for their own project.

Try the demo.

Demo: Animated Title Page

Download the demo game here. To play the demo, you will need the latest version of your favorite Glulx interpreter, such as Gargoyle, Windows Git, or Zoom (see links at right). Users of the Spatterlight interpreter are advised to upgrade to Gargoyle.

To date, the demos that I’ve released for Glimmr Canvas Animation have been either simple visualizations, or have gestured at nonstandard interfaces that have not really been seen in parser IF before. Which naturally raises the question: what can animation do for the vast majority of text games–the ones that are just text? This new demo, Animated Title Page, is one answer to that question.

In recent years, there have been some developments in the way that IF games present themselves at start-up (and before), including the increased use of cover art, largely thanks to Emily Short’s cover art drive from a couple of years back, and the growing popularity of “title pages” (see, e.g. Make It Good, or Jon Ingold’s plug-and-play I7 extension). This Animated Title Page demo continues this trend. In contrast to most IF, which opens with nothing more than a couple of paragraphs of text and the famous blinking cursor, Animated Title Page suppresses the main text window in favor of a graphical presentation, showcasing the cover art along with a list of basic options, such as starting a new game or continuing a saved one.

Title page for the demo

The demo reimagines the art for Deadline, using a noir-flavored photo by Flickr user emdot

The demo, which pretends to be the classic Infocom game Deadline, also prefaces the title page with a fun and overly dramatic animated rendering of the original game’s marketing tagline: “A locked room. A dead man. And twelve hours to solve the murder.” This text rushes out at the player, making a whooshing soundas it rockets by. There are also fade-ins and fade-outs, animated button depresses, and other effects.

The original box art for Infocom's Deadline

The original box art for Infocom's Deadline (1982)

It is worth noting that, despite the dynamic animations, the demo is actually quite simple from the standpoint of art creation. The art consists entirely of rasterized slugs of type (made using the font Dirty Headline by S. John Ross of Cumberland Games), and of a single photo (sitting by emdot). These elements are animated together using commands provided by the Glimmr Canvas Animation extension. Similar designs  should be well within the capabilities of most authors. The source code for the demo is available at the link below, should you want to try to modify it for your own purposes.

The demo is substantially complete, but there are a few more refinements that could be implemented. It would be nice, for example, to be able to skip the animations entirely to fade in directly on the title screen; it’s probably a bit much to have to watch even 20 seconds or so of introductory animation every time that you open the game. More radically:  Nearly all other modern games, from casual to triple-A, employ an automated system of save slots so that the player never has to interact directly with the filesystem to manage her saved games. Such a feature would be easy enough to build into a Glulx project, and of course save slots would be a natural fit for a graphic interface like the one presented here.

Download Animated Title Page, or the source code and assets. Comments welcome.