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.
Rig with projector
Overworld
Cragmaw Cave Overview
Klaarg Closeup
Red Brand Street Encounter
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.
It was everyone’s first time playing DnD, including mine so there will likely be rookie DM and player mistakes. We were all work colleagues from Lyst (@MakingLyst) and spent 3-4 hours in our canteen playing.
The whole night has fantastic fun and we will be continuing the quest to find the Mine of Phandelver in the future.
Characters
@StevieBuckley as ‘Iron’ Mike Baggins – Fighter, Folk Hero @Maciej_Kula as Blane Kinglyquartz – Cleric @ejlbell as Artemis von Spiegelhorn the Chaoshadow – Wizard @trepca as Ljubomir ljivkovic Sljucica – Rogue @wolffan as Kosef Longsummer – Figher, Noble
I used map resources from Mike Schley who has kindly put up the digital assets for a pittance. I made custom fog of war masks for the cragmaw cave map and used javascript to hide/show the different areas. The code and resources (minus Mike Schley’s maps) are up at GitHub.
Rig with projector
Game in action!
Overworld
Encounter 1, Goblin Arrows
In the city of Neverwinter, a dwarf named Gundren Rockseeker has asked the party to escort a wagon of supplies to the rough and tumble settlement of Phandalin, which lies a couple of days travel southeast. Gundren was excited, and claimed he had found “something big”, so promised to pay the party 10gp each to get the supplies to Barthen’s Provisions in Phandalin. He then rode on ahead with a warrior escort named Sildar Hallwinter as he needed to “take care of business”.
The party has spent the last couple of days with the an ox wagon on the road. ‘Iron’ Mike is riding an ox, guiding the cart with his animal handling skills. Arty and Kosef are in the back of the cart with the supplies: Arty trying to forcefully converse about foreign tax law unsuccessfully. Blane walks beside the wagon with Ljubomir bringing up the rear.
As the turn a bend, they notice 2 dead horses peppered with arrows in front of them. ‘Iron’ Mike stops the cart, and an irritated ‘Driver, driver, why are you stopping?!’ floats over from Arty. Annoyed, ‘Iron’ Mike drags Arty along to the horses to investigate. As they draw closer, they recognise the horses as those that their friends rode on ahead.
Before they can investigate further, 2 goblins rush from the under brush and attack ‘Iron’ Mike. The first goblin misses his swing, but the other manages to get in a hit. He attempts to retaliate with his mighty sword, but fumbles the swing. Instead a surprise arrow from Ljubomir takes the goblin through the chest. Arty, suitable annoyed at the goblin in front of it, sends 3 Magic Missiles to ‘explode’ it. Suddenly, a goblin arrow streaks from the southern under brush, flies past Kosef’s head, and lands in the cart with a thunk. Kosef spots the offending goblin shooter, grabs his axe, and charges into the under brush. His battleaxe swings down with such power it splits the goblin (and some small trees) in two. Across the trail, another previously hidden goblin is heard panicking and running away through the undergrowth to the north.
The battle over, and with Blane mostly oblivious to what just happened, the survivors check the goblin bodies for loot. Kosef grabs some arrows for ‘Iron’ Mike and is disappointed at the lack of loot from the malnourished goblins. Arty pokes at the residue of his slain goblin and laments that he could not learn more about it. ‘Iron’ Mike, however, finds that the goblin with the arrow in its chest is still alive and, with the help of Blane, manages to stabilise it.
Arty is brought over to translate, and finds that the goblin is named Stinkblade. Arty attempts to persuade Stinkblade that they will not harm him if he talks, but the goblin does not believe him, even when donning a godlike illusion. ‘Iron’ Mike attempts to intimidate the goblin into submission by sitting on him, but this only aggravates it. Finally, Blane casts Command and forces the goblin to speak.
They learn that their friends were captured by Stinkblade’s goblin troupe and were taken to their hideout in a northward cave. Their troupe leader had received orders to capture the duo via courier from Cragmaw Castle. At the mention of this place, Arty flies in to a rage and stabs the goblin, ending the interrogation.
Worried about Gundren and Sildar, the party decide to investigate this cave to the north. However, first they take a short rest and engage in a heated argument about taking the cart with them. ‘Iron’ Mike ends up winning, taking the cart with them, but at the cost of making the journey time much longer.
With wounds healed and spell slots replenished, the party head out slowly with the cart along a difficult woodland trail. ‘Iron’ Mike is sitting upon the ox, guiding them with twitches of his hands. Arty and Blane are in the cart discussing religions affect on crop yields in winter, Kosef is taking the rear guard and Ljubomir is out in front — on the lookout for traps and things to snag the cart.
After an hour on the trail, Ljubomir fails to notice a snare trap that is draped in front of him but just manages to jump out before he is snapped up. Kosef decides to take the front, and another hour later fails to notice a pit trap in front of him.
He noticed, however, that he was falling 10ft to the bottom of it. Climbing out, with minor injuries to body, major injuries to pride, he helped the cart navigate around the pit. After a further hour travelling, the party sees a large cliff coming into view, so decide to tie up the cart and oxen, then investigate on foot.
The party reach the cliff, trying to stay as quiet as possible. They exit the trail and come upon a clearing, which edges up to a stream. On the other side of the stream lies thick brambles and trees, and the stream is bursting forth from a cave in the cliff. There is room on the other side to walk into the cave.
Ljubomir stealthily creeps up to the stream and spots two goblins in the under brush, not paying attention to him or anything else that isn’t their simple stones game. He slowly creeps back to inform the others of the enemy.
With a surprise attack, Blane channels Sacred Flames to burn the goblins, but miss and burn everything else around them. As the under brush turns to ash, Ljubomir and ‘Iron’ Mike unleash arrows, which both miss. Kosef charges with his great axe brandished and cleaves a goblin in twain. Arty sends a ray of frost at the second goblin, who freezes, shatters, and scatters into the wind.
Blane scouts ahead into the cave, using his Dwarfen sight to see in the dark. He stealthily notices the wolf kennel and assesses than they are very hungry, more so than caring about guard duty. Sneaking back, Blane informs the party and they get to work dragging the 2 pieces of goblin into the cave. ‘Iron’ Mike gains acceptance, but not leadership, of the pack, in order to drag the goblin meals inside. The wolves begin eating, but will not let anyone near them.
Blane scouts further into the cave and notices a wooden bridge, 20ft above the main passage – along with a goblin sentry. The goblin does not notice him. Blane sneaks back, and the party come up with a plan. Creeping forward, Ljubomir and ‘Iron’ Mike ready their bows as Arty creates a ball of light in front of the goblin. Blinded, it did not see the two arrows that sunk into its heart. The goblin toppled forward into the stream and floated out of the cave.
Noticing a small, fragile, trail to the left Blane and Arty scouted ahead. At the top of the trail they successfully find rooms at either end of the passage they find themselves in. At the western end: a barracks of sorts with 6 goblins; to the east: a room with 2 dammed pools of water and 3 goblins. The party decide a sneak attack on the larger group of goblins in the western room. Everyone climbs up the fragile trail in pairs until the party is in the upper corridor.
From the shadows, Arty casts sleep on 4 of the goblins, with ‘Iron’ Mike taking out a fifth with an arrow. Ljubomir creeps in to the room, and attacks a much larger goblin, scoring a critical hit with an arrow that perfectly hits the part of the goblin’s brain that makes it explode. Entering the room the party find Sildar who is badly beaten. They help him up and pass him a goblin short sword for protection. Sildar says he will help where he can and will answer questions once they deal with the goblins.
Seeing the sleeping goblins as a threat, ‘Iron’ Mike brings out his secret weapons. Ham fists, from his encounter with a greedy boat captain in Neverwinter, and punches a sleeping goblin as hard as he can. The goblin takes massive damage, but survives. The ham, now quite old, explodes sending rancid meat into the eyes and mouths of the sleeping dwarfs, instantly waking them.
Ham Fists: When working in the galley of a ship in Neverwinter, ‘Iron’ Mike led a workers revolt against a captain who was unlawfully exploiting his workers. Finding two large hams in the kitchen, he plunged his hands through the flesh to grab the sturdy ham bones within, creating his Ham Fists. Using his weapons, he beat the corrupt captain into submission, before taking him to the guards.
The party, thoroughly annoyed at having to engage the 4 groggy goblins send arrows, Rays of Frosts, and the business end of an axe into the goblins. 3 are killed but 1 managed to escape and run towards the other goblins at the pools in the eastern cave.
Giving chase, ‘Iron’ Mike, Ljubomir, and Kosef all send ranged attacks, but due to the darkness miss. Arty catches the fleeing goblin with a ray of frost, not killing it but slowing it. They could only watch in apprehension as the very cold goblin rounds a corner into the welcoming arms of reinforcements.
Blane chants a prayer to bless the party in preparation of their next fight. ‘Iron’ Mike, Ljubomir, and Kosef ready ranges attacks on the next goblin they see across the bridge. The other goblins across the bridge move to confront the party. Arty casts light onto the ceiling of the pool room, flooding it with light. This fortunately illuminates a goblin on the other side of the bridge. Arrows and javelins pummel the goblin, instantly killing it. The other goblins move up to the bridge, one hiding behind a stalagmite. Meanwhile the ham fist survivor manages to run into a deeper cave on the southern wall, no doubt alerting those inside.
An arrow from Ljubomir takes out the goblin on the bridge, allowing ‘Iron’ Mike to charge at the stalagmite with his great sword drawn. As he stabs the goblin and lifts it above his head on the tip of his sword, Arty finishes him off with a quick Ray of Frost.
Regrouping outside of the next cave, the party try to perceive what is inside. Kosef peers in and sees a near empty room with crates and sacks piled up near the far wall. There is more of the cave to the right, but it hidden from the entrance. Just as Kosef is about to turn to the others, he notices a goblin foot stick out from behind a sack. The ambush is ruined as he notices 2 more limbs behind various items. Telling Arty the goblin positions, 3 Magic Missiles zip into the room to injure the goblins. The most injured goblin flies at Kosef in a rage, to only be split in two by his great axe.
Smelling the rancid ham that is emanating from the original goblin survivor, ‘Iron’ Mike bursts into the room and sets his sites on the poor bloodied beast — but not before being bitten by a wolf which was lying in wait in the shadows. ‘Iron’ Mike shrugs it off to finish the goblin who broke his Ham Fist. Only then does he notice how badly he is bleeding. Ljubomir enters the room and hides behind ‘Iron’ Mike, while trying to send an arrow into one of the remaining goblins — but he misses. Kosef enters the room to levy his axe upon the wolf, heavily wounding it. Arty attempts to freeze a goblin with Ray of Frost, but misses. The two remaining goblins move up to attack the intruders, one focusing on ‘Iron’ Mike, landing a crippling hit, and the other focusing on Kosef, but he misses.
Out from behind one of the stalagmites of the cave, a large bugbear appears, screaming ‘KLAARG WILL KILL THE INTRUDERS‘. Klaarg then throws a javelin at Kosef, heavily wounding him before moving closer. Blane enters the cave and lays his hand on Kosef to cure his wounds. ‘Iron’ Mike, fed up of goblins, brings his great sword down in a tight arc to finish off the goblin attacking him, then uses his Second Wind to make a slight recovery. Ljubomir sends an arrow to finish off the final goblin.
Kosef levels his axe on Klaarg, attempting to cleave him from the crotch up, but the axe bounces off his armour. Arty steps fully into the cave and tries to grab the wolf to use his Shocking Grasp, but the wolf sidesteps away. Retaliating, the wolf tries to get a bite out of Arty, but misses. Klaarg swings his morning star at Kosef, but the brute of a weapon swings above his head.
Blane attempts to finish the wolf off with his hammer, but looses his footing and fumbles the blow. ‘Iron’ Mike sheaths his great sword and brings out his longbow, firing an arrow into Klaarg. The arrow lodges into his shoulder, sending him into a rage. Ljubomir performs a ranged sneak attack and sends an arrow deep into Klaargs gut. Kosef swings with his axe, taking a chunk of Klaarg with it. Arty tries to send a Ray of Frost at Klaarg, but just succeeds in freezing a nearby wall. The wolf tries a second bite, but misses again, and Klaarg swings again at Kosef with his morning star, but his rage has effected his accuracy, and he misses by a clear foot. Finally regaining his composure, Blane smashes his hammer onto the wolfs skull, ending it there. ‘Iron’ Mike and Ljubomir send two arrows into Klaargs face, sending him reeling backwards onto the ground and into the afterlife.
The battle over, the party surveys their surroundings. Gundren is not here, but there are many branded crates in the cavern which look recoverable, and a chest in the corner of the room. Inside the chest they find 1200cp, 110sp, a small statue, and 2 potions. The party splits the cash, ‘Iron’ Mike pockets the statue, and after Arty identifies the potions as healing potions, they are given to the fighters.
Interrogating Sildar does not provide much more information than they got from Stinkblade, other than he will pay the party 50gp to escort him to Phandalin, payable there. The party agree and start hauling out the stolen crates to their parked wagon, intent on returning them to their owners, feeling more experienced from the whole encounter. ‘Iron’ Mike tries one last time to tame one of the tied up wolfs, and manages to gain the trust of the smaller wolf, which the party allow him to keep so long as it is chained up and doesn’t bite anyone.
They decide to camp for the night outside the cave, away from the stench of dead goblins and under the stars.
