
Fighting Fantasy Warlock of Firetop Mountain Full Link Map (svg)
Fighting Fantasy Deathtrap Dungeon Full Link Map – Ian Livingstone #6 (svg)
How to create svg maps for fighting fantasy books.
THis is a quick tutorial on how to use svg graphs to create linked directed graphs.
Fighting fantasy books have a interactive storyline inside numbered pages in which the user decides the next number page to go based on the current page.
IN the first ever fighting fantasy book, there are 400 pages, and a very complex labyrinth to navigate near the end. IN the past one has to resort to using pen and paper to draw maps to navigate the links. Today, I used a combination of Excel, Matlab and svg programs to draw the full map. (python can be used instead of matlab). As you can see this map is visually very complex to draw, but simple to understand, it can be used as an walkthrough for diehard fans to play every route or for casual players as a navigation aid, the latter is the reason why I made this graph in the first place.
Making a digraph.
digraph name{
a -> b;
}
The simplest digraph code is shown above. It points an arrow from a to b. Note name can be changed to any name.
To create a svg (vector based graphic file) in windows using graphviz (open source graph visualization), I use GVedit, open a new file and copy and paste the above, and click run, then choose svg output, then click on ok.
To create the map for a book, start by opening excel. For each row (which corresponds to a page number) type in the links that it refers to. For example in FF1, the first page links to 71 and 278. Type in 71 in cell A1 and 278 in B1. Do the same for all of the pages, moving down the rows and adding the links. This shouldn’t take too long, the numbers are usually in bold.
sample xls file:
A B
1| 71 278
2| 16 269
After saving the file, open and run a matlab script to convert it into something that GVedit can read, the code for matlab here (pseudocode for any language):
pa = xlsread(‘filename.xls’);
[m,n]=size(pa);
for i=1:m
for j=1:n
if isnan(pa(i,j))==0
fprintf(1,’%i -> %i;\n’,i,pa(i,j));
end
end
end
This will produce the following sample code (this is from ff6)
1 -> 270;
1 -> 66;
5 -> 185;
5 -> 395;
6 -> 364;
9 -> 158;
9 -> 375;
… some omitted
397 -> 369;
398 -> 230;
399 -> 192;
This above is a form readable by graphviz. This shows why the excel step is used, as it is an efficient way of entering the numbers. Add the following code and compile to get the resulting graph.
digraph name{
}
(After typing in hundreds of numbers there might be errors that occurred, to check, look at the resulting graph and see if the graph is fairly linear, for example there shouldn’t be many links that retrace back to the beginning. If so, re-check, edit and recompile.)
Once done, upload to wikimedia commons, it is one of the only picture/file upload host that support direct svg upload.
You now know how to use graphviz to create svg link maps for fighting fantasy books! :)








