Projected DnD

So I wanted to build some interactive play maps for when running DnD games, so that I could hide rooms automatically and create a more involved experience. I already had the hardware to build this system, and combined with some JavaScript it was not long until the players were running the DnD starter set adventure on it.

Hardware

As part of my fledgling company, I have a lot of projectors and associated rigging equipment lying about.

So for when I’ve been DM’ing, I’ve used a Dell M110 projector mounted onto monitor desk mount that has been extended with a custom lathed plastic tube. With the extension, the projector ends up being about 1.5m above the table.

The projector isn’t the brightest in the world, especially against wood coloured tables, but sticking some white paper on the table surface and dimming the room lights worked great.

Software

I wrote a very simple html template to display the interactive maps. The interaction, in this case, was the DM being able to control which areas of the map (e.g. rooms) are currently visible.

This was done by making a number of “layers” which only covered the areas they were responsible for, and then toggling their visibility with JavaScript. The layers were made using Inkscape.

The layers which could be toggled had an img#id the same as the key that would toggle them (e.g. img#1, img#2, etc) and the following snippet was used to actually change the visibility.

function toggle_visibility(e) {
    // Toggle an elements visiblity
    if(e.style.display == 'block' || e.style.display == '')
        e.style.display = 'none';
    else
        e.style.display = 'block';
}

function khandle(e) {
    // Find the key that was pressed, and then toggle 
    // KEY.png's visibility
    e = e || event;
    var evt = e.type;
    var c = String.fromCharCode(e.keyCode || e.charCode);
    var handle = document.getElementById(c);
    toggle_visibility(handle);
}

function init() {
    // Make sure the first room is visible
    toggle_visibility(document.getElementById("1"));
}

document.body.onkeydown = khandle;
document.body.onload = init;

Future

So far, this system has worked quite well for me. It does require some preparation work (creating the area masks) and forgetting which area of the map is bound to which key can be a bit of a pain.

However, I think without too much effort I could create a “DM screen” that would be shown on my laptop where I could more easily control which areas are visible, play sound effects, or show more visual effects (e.g. lightning strikes, fire).

The code and non copyrighted resources for the first chapter of the starter set is up on my Github if anyone wants to try this themselves. It would work just as well for those builds which are using an LCD screen for a table too.