
Show HN: Dungeon Map Doodler – Free online map drawing tool - toddr123
https://dungeonmapdoodler.com/
======
toddr123
Hey everyone, this is a project I've been working on for a little while now,
it's a map drawing tool for tabletop role playing games like D&D, ShadowRun,
etc. It's still in development, but has quite a few features already, most
recently adding support for importing randomly generated maps from
[https://donjon.bin.sh/d20/dungeon/](https://donjon.bin.sh/d20/dungeon/) and
supporting publishing your completed maps to
[https://fictionalmaps.com](https://fictionalmaps.com).

It's made entirely in html and pure javascript, running completely client
side. It also has support as a progressive web app with offline support if you
want to use it on the go. I'd love to hear what you all think about it! New
bug fixes and features are frequently being added

~~~
kewpiedoll99
i just played with it a bit and it's kind of awesome! It takes like 5 min to
get the hang of it. I didn't notice until I came back here about publishing
completed maps, that's great too. Passed along to my (many) game playing
friends. If you decided to open source it I would join on for sure.

Why is the hallway tool called "snap to grid"? That was the one I couldn't
figure out how to get back to because it's a non-intuitive name imo. When I
went back in just now and restarted doodling, I saw that was the tool
highlighted.

Also, the way the wall tool works is harder to use than the way the "hallway"
aka "snap to grid" tool works, imo the latter is more intuitive.

Just some thoughts! Awesome work!

~~~
toddr123
Thanks for the feedback! I find it interesting you call it a hallway tool,
I've never heard anybody refer to it that way before. When I first started, I
had the free form drawing, and loads of people were requesting snap to grid
options, so I added that as its own tool cause it had a few options specific
to it. I personally use it to draw entire maps, as I often find it quicker to
fill in a room than switching to the room tool and back. That's how I ended up
with that name, and why I feel something like hallway is a little bit too
specific for what it does.

I based the wall tool off of the line tool, since I assumed straight walls are
the most desirable for people. How would you suggest making it work more
similar to the snap to grid tool?

Thanks again!

------
Pfhreak
Reminds me of Dungeon Scrawl:
[https://dungeonscrawl.com/](https://dungeonscrawl.com/)

As a DM, thanks for all these tools! Glad to have a variety of tools to use.

~~~
toddr123
Funny enough, I think the two of us started our projects on the exact same
day, or at least first posted on Twitter, haha. He's doing some really cool
stuff too!

~~~
georgefrick
I like both, but I'll probably 'move forward' with whichever one has masking
working in a non-obtuse way first. With dungeon scrawler there is a pre-set
that uses masks, but I've completely failed to figure out how to set it up on
my own. I'd be willing to pay one-time fees to unlock art packs or other
content to support the creators. But the dungeon fog style of wanting me to
pay monthly... just... no.

~~~
toddr123
In this context, you mean masking to hide parts of the map from player? The
crosshatching effect on my maps (which can be changed to all sorts of
different styles) is created using a mask, so I just wanted to clarify.

If that's what you're going for, there isn't a super obvious way to do it in
my software yet, but after making your map, you could add a new layer, switch
to the Hatching Tool, choose solid black hatching, or any other solid image
and draw over any parts you want to hide. Then to uncover it, just use the
erase tool with all but the hatching checkbox selected, and it'll unveil the
parts of your map underneath.

If you were thinking of something else, let me know and I'll answer as best I
can!

------
selrond
Adding to my collection of D&D tools:

• [Dice For the Dice Gods: A D&D 5e Resource
Compendium]([https://www.otherworldlyincantations.com/mastery/#1543209246...](https://www.otherworldlyincantations.com/mastery/#1543209246837-e72acb6f-9895))

• [Adventurekeep - A toolkit for dungeon
masters]([https://adventurekeep.com/](https://adventurekeep.com/))

• [5etools]([https://5e.tools/](https://5e.tools/))

• [donjon; RPG Tools]([https://donjon.bin.sh/](https://donjon.bin.sh/))

• [One Page Dungeon by watabou]([https://watabou.itch.io/one-page-
dungeon](https://watabou.itch.io/one-page-dungeon))

• [Medieval Fantasy City Generator by
watabou]([https://watabou.itch.io/medieval-fantasy-city-
generator](https://watabou.itch.io/medieval-fantasy-city-generator))

• [Azgaar’s Fantasy Map Generator]([https://azgaar.github.io/Fantasy-Map-
Generator/](https://azgaar.github.io/Fantasy-Map-Generator/))

• [Inkarnate - Create Fantasy Maps
Online]([https://inkarnate.com/](https://inkarnate.com/))

• [Dungeon
Scrawl]([https://dungeonscrawl.com/scrawl/](https://dungeonscrawl.com/scrawl/))

• [Dungeon Map
Doodler]([https://dungeonmapdoodler.com/draw/#](https://dungeonmapdoodler.com/draw/#))

• [Dungeondraft]([https://dungeondraft.net/](https://dungeondraft.net/))

------
sjbrown
Very cool! Any chance of Save-As-SVG?

Even if not, there could be some cool potential for integration with my
project, Togetherness Table:
[https://www.1kfa.com/table](https://www.1kfa.com/table)
[https://github.com/sjbrown/togetherness](https://github.com/sjbrown/togetherness)

~~~
toddr123
Unfortunately no, it's all raster based in the backend, I haven't yet figured
out a way that I could convert it into a legitimate vector file. That's a
pretty cool looking project! I'll have to check it out more later

~~~
tessierashpool
imagetracerjs might work:

[https://github.com/jankovicsandras/imagetracerjs](https://github.com/jankovicsandras/imagetracerjs)

------
swimfar
I like how clear, and easy it is to try it out. Big "DOODLE NOW" button right
in the middle of the landing page. In two clicks I've already created a (tiny)
dungeon.

------
jhedwards
First of all, great project! I love this kind of tool and I bookmarked it
because I could definitely see myself using this.

Some feedback: you need undo capability. It's quite common to make a mistake
or change your mind about something and reflexively hit cmd-z to undo it.
Along those lines, you need a "select" tool to click on things so that you can
move or delete them after they are added to the map. Other than that it looks
promising and I hope you continue development!

~~~
toddr123
Thanks, glad you liked it! Undo/redo is definitely there already. The arrow
buttons in the top left near the zoom buttons will do that, as well as Ctrl Z
for undo and Ctrl Shift Z/Ctrl Y for redo. I totally forgot that Macs use Cmd
for most shortcuts, I should be able to add that in as well, thanks for
letting me know!

That being said, the undo and redo currently only handles the drawing tools,
text and stamps can be deleted their own ways, but that's definitely on the
todo list.

------
aphextron
Just wanted to say I got a real good laugh out of `draw/dmd.js:9`. It's the
same verbatim array swap algorithm from Stack Overflow [0] I used at work
today.

[0] [https://stackoverflow.com/questions/872310/javascript-
swap-a...](https://stackoverflow.com/questions/872310/javascript-swap-array-
elements)

------
jswrenn
Minor site design feedback: I initially missed that I needed to scroll down,
since the splash is sized exactly to viewport height. I even clicked "DUNGEON
MAP DOODLER" text reflexively because I thought it might be a hyperlink.

Perhaps move the "DOODLE NOW!" button into the center of the splash.

~~~
toddr123
That's a good idea, I whipped up the website pretty quickly and haven't spent
too much time reviewing it since, that's definitely something worth doing
though!

------
pwinnski
This is really well-done. Very polished, and all of the drawing tools work as
my mental model thought they might.

Kudos!

------
jbob2000
This is very cool! Do you think you could add a feature to move around
npc/character pieces? Even if they were just coloured blocks, that's all I
need now to run a basic DnD session. Add some dice too and I can easily run a
Zoom DnD session.

~~~
toddr123
Thanks! The original goal of this was to make printable maps really easily, so
I haven't focused too much on interactive stuff like character tokens or fog
of war. However, you can easily add your own stamps (there's a button at the
end of the list, or if you click the current stamp, there's a big button on
the popup), and stamps are easy to drag around, so that could be a solution
for you there.

In regards to the dice, do you mean an actual dice roller, or just stamps of
different dice?

~~~
jbob2000
I meant a dice roller, but I understand your intention now. Thanks for the tip
about the stamps, I'll give it a shot!

~~~
toddr123
Well, as with all projects, the scope has creeped a little bit already, so I
won't say never to that! It's definitely something I could be open to adding
in the future, if I can think of a good way to fit it in with this tool.

------
xingped
Ah, this is exactly how I feel like this tool should be! I found the UX on
other similar apps to be confusing or lacking what I felt were fairly
necessary rudimentary features.

Thanks for building this tool!

~~~
toddr123
Thanks for the feedback! I've been trying really hard to keep the interface as
simple and intuitive as possible, so it means a lot to hear that!

~~~
xingped
Ah, I found one thing that's kind of bugging me - the text tool.

It seems the text is not layer-specific. It would be nice if it was so I could
have a "notes" layer that I can turn on and off for exporting two different
images - one for players and one for the DM.

The text tool also seems to create text well above where I actually clicked.
Ideally I would imagine the point that I click to be the top-left-most corner
of the text box.

~~~
toddr123
Yeah, the text tool is a bit lacking at the moment, and I think the public
release still has a small bug with where the text gets placed down when
clicking.

That's a really good use case for the layer specific text which I hadn't
considered, thanks for bringing that up! I think the text tool is the next
thing I'm going to be giving a bit of love to, it's definitely a bit quirky in
how it works right now

------
leavenotracks
This is so cool - congrats! Spent an inordinate amount of time playing with
this given that I’ve never actually played table-top games...

------
renewiltord
Awesome! Thank you for sharing! Making quick maps on the fly is a bit of a
weakness of mine as a DM so I always pre-prep.

------
TuringNYC
Loved it! Brings back fond memories of playing Zelda as a child.

------
triplechill
Wow this is awesome! Keep up the good work!

------
TomasEkeli
Extremely cool! Well done!

