Undum is a pure client-side game framework for narrative interactive fiction. It is designed for HTML 5 and CSS 3. You can read more and download the source code here.


The Undum Tutorial &
Interactive Example

by I D Millington

click to begin


In Undum, all interaction takes place in a situation. You can think of it either as a 'Room' in traditional interactive fiction (although it is less flexible than that), or as a 'Page' in a Choose Your Own Adventure book (though it is more flexible than that).

At any point, the character is in exactly one situation, and that situation is responsible for everything that happens to them. Situations are chunks of code that generate the output you are reading here. For example, this text was generated by the enter method of the 'situations' situation.

Let's move on again.

Saving and Loading

The only piece of the UI we haven't talked about is the 'Save' and 'Erase' buttons on the left panel. These are only visible if your browser supports client-side data storage. Clicking 'Save' stores your game, so you can pick it up again later. There is currently no 'Load' button, the game loads when the page loads. There is also no way to save multiple games, and select which one you want to play. These are both things I'd like to change in the future.

Potentially your game could generate huge amounts of text. And that would be difficult to store client side (there are unpredictable limits), especially when we move towards having multiple save files. So instead Undum saves your character as the list of links you clicked. Loading a save-file consists of playing through your game again, quickly. This is a beneficial approach for debugging too. It means when you're polishing and correcting typos, you can save and load the game and scroll through the transcript to see your corrections. If we saved the text, your save file would have the error in it and you'd have to manually replay the game to see the correction.

Let's return to the topic list.


Choose a topic to find out about next. If in doubt, go through the topics in order.

When you're writing an Undum game, you often need certain options to be available only when certain conditions hold. You might have an option to remove a secret panel in a haunted house, but that should only be visible if the character knows where it is. If options are available in lots of situations, it can be very difficult to keep track of what options are allowed, and to produce just the right list of choices.

To help with this, Undum can generate a list of situation links for you. It does this in three steps. Firstly, each situation can be given one or more tags, this allows you to easily ask for links to all situations with the 'in-hallway' tag, for example. Secondly, situations can have a canView method, which gets to decide whether that situation should appear. That method can look at the current state of the character to decide whether to appear or not. Thirdly, SimpleSituations have a choices option. If it is set to one or more tags, it handles the building of the choice list.

You've seen this already in the topic list. The topic list is generated automatically. All of the situations in the topic list are always available, however. So here is an example of automatic options that may change:

You can return to the Topic List or choose another option from this example: