Tutorial: How to make a standalone interactive fiction game
This tutorial describes how to make a simple standalone interactive fiction game. You can use the web-based Wool editor.
NOTE: for more complex applications involving a Java server or a custom dialogue client, the desktop Wool editor is recommended. It has file management and multi-dialogue support.
The editor starts with a single Start node. You can click on the node and start editing it.
First, you have to fill in the Speaker field. This is used when in a dialogue with a character in your story. If you do not want a dialogue, but want to describe a location with associated actions from the player, fill in Narrator.
The Wool language supports multiple choice actions, text input, variables, and conditionals. For a full specification, see the language documentation.
The editor also supports HTML tags in the text, for example you can use <p> for a paragraph break or <b> … </b> for boldface text.
Using File->Open, you can open .wool files from your local drive. Download the file below and open it.
Your editor should look like this:
Note that the nodes all have different colours. Change the colours using the arrows that appear when hovering over a node. Each colour can be mapped to a different background, once we are in the dialogue viewer.
Now, let’s look at some code. Here is the Start node:
You are on a road that leads east to the woods and west to a small town. [[Go East|Woods]] [[Go West|Town]]
Note that the speaker is Narrator, which indicates this is a location and not a dialogue. The lines between double brackets indicate options for the player. The left hand side is the text to show, the right hand side is the name of a node. Other, more complex options are also possible.
Let’s look at the Innkeeper dialogue:
Hello, how may I be of service? [[One coffee, please.|InnkeeperCoffee]] [[A cup of tea, please.|InnkeeperTea]]
The format is exactly the same as for the Start node, but because we filled in a speaker, we now get a dialogue with an avatar. Here’s the InnkeeperCoffee node:
Here you go, one cup of hot coffee! [[Thank you.|Inn|<<set $hasCoffee=true>>]]
Here, we set a variable $hasCoffee as a side effect to an option. Now, we can do something with the variable later on. Note that variables always start with a $. This makes it possible to use them in the text, like in Hello, $playerName.
In our game, we encounter a gnome. Here is part of the dialogue:
All alone in the woods? Do you have something for me? [[I don't know what you are talking about!|Woods]] <<if $hasCoffee>> [[I have a coffee.|GnomeCoffee]] <<endif>> <<if $hasTea>> [[I have tea.|GnomeTea]] <<endif>>
You can surround any part of the code with an if...endif condition. The else and elseif are also supported.
Now, let’s try and run the game. Press "Run".
Within the Wool viewer, you can edit the graphical appearance of your game. The control panel at the bottom left can be used to change the current background, and avatar if there is a speaker defined. Use "+" and "-" to cycle through the options. A number of presets are defined. Use "URL" to enter a new image URL. The trashcan button can be used to delete previously entered image URLs. The viewer will remember you choice of avatar for each speaker, and your choice of background for each node colour.
When you are happy with the looks, you can export your game using the "Get URL" button. You will see a (huge) URL that encodes both your source code and the graphical configuration. Note that some browsers have a 4Kb limit on URL size (Internet Explorer) though bigger URLs will work fine in Chrome or Firefox. There are also buttons for going back to the editor, and editing the current node. Note it’s also possible to edit the dialogue and then continue it from where it left off. Within the editor you can save your Wool file, but saving the graphics is still a bit primitive. You can use the result of "Get URL" to save the graphical configuration. In particular the URL parameter config=..... can be copy/pasted into the viewer URL to copy it into another game.
Another useful Wool viewer URL parameter is resetconfig. If you add &resetconfig=true to the end of the URL, the graphical configuration is reset to its default state.
Finally, here is the URL to the Gnome game with some custom graphics: Click here to Play "The Gnome"