Show HN: Dungeon Map Doodler – Free online map drawing tool | Hacker News Reader

Show HN: Dungeon Map Doodler – Free online map drawing tool

dungeonmapdoodler.com

155 pointstoddr12343 comments

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/ and supporting publishing your completed maps to 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

Amazing project! Really enjoyed playing around with it just now - so easy to create a functional and great looking map. When you say pure javascript, did you use any frameworks or supporting libraries? If not then how did you organize the code (and do you do have any type of automated testing?)

Thanks! And nope, there's no frameworks or libraries in use, other than some helper modules I wrote for past projects and used in this. The code is mostly just organized as each tool being its own class, having a few common methods such as mouseDown, mouseMove, drawCursor and so on, with the main class passing off events from the user to whichever tool is selected. I forked this code off of a previous project, so parts of it are still a little messy due to me enjoying adding new features more than I enjoy refactoring code, but I tried to make it pretty modular from the beginning so it's easy to build on.

At the moment, there's no automated testing, I have a Patreon set up where a decent number of people are helping me beta test new features, but for the time being, I just do my best to avoid adding any regressions, and try to fix them quickly if they do show up.

This is really cool, thanks for sharing! It would be great if the hover text for the tools also displayed the keyboard shortcuts that I found in the nice and easy-to-read JavaScript :)

Much closer to what I need than previous contenders! Now, if only it were open source (compile on your own) and was embeddable (as a web component?) for easy integration into other platforms...

Does the author plan to open source it? I would love to.

At the moment, I'm not planning to, just cause right now it's my own mess of code, and I feel like bringing on extra people would give me a bit more managerial work than I'd like.

That being said, it's all plain javascript, there's no backend, nothing is really stopping people from looking at all the source code

nice work. you want to validate your inputfields tho: number of sides -> 9999999999 -> use and browser tab crashes. :)

I like to let people set their own limits wherever possible, it's not really my business if someone wants to make an incredibly round circle and crash their web browser :P You raise a good point though, some of those could have a more sensible restriction on them just to avoid really unnecessary cases, thanks!

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!

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!

Reminds me of Dungeon Scrawl: https://dungeonscrawl.com/

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

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!

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.

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!

This one though seems to work well on mobile, dungeon scrawl I could not get to work properly, at least when it was posted on hn not too long ago.

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...)

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

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

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

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

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

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

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

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

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

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

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://github.com/sjbrown/togetherness

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

imagetracerjs might work:

https://github.com/jankovicsandras/imagetracerjs

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.

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!

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.

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...

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.

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!

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

Kudos!

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.

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?

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

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.

This looks to be a mapping tool rather than a full virtual tabletop. You could use this to export a map and use it with roll20 or foundry or a big printout or whatever you like.

Hey jbob2000, I invite you to give https://www.1kfa.com/table a try!

Nice, looks like I can upload the PNGs from doodler! Thanks!

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!

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!

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.

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

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

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.

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

Wow this is awesome! Keep up the good work!

Extremely cool! Well done!

Reply on news.ycombinator.com