HN Explorer

Show HN: Dungeon Map Doodler Beta - Free online map drawing tool (dungeonmapdoodler.com)

157 points by toddrossdiy ↗ HN
This is a D&D map making tool I've been working on for a while now, but I just added some new features to the beta that I think HN users might find neat. When building a world map, you can use "Dynamic Brushes" to draw organic looking terrain. This is achieved entirely with svg filters and javascript canvas, no fancy libraries or anything. This came with a pretty large rewrite of some of the underlying code, so I'm sure there's a number of bugs I haven't come across, but I'd love to hear your opinions on it!

25 comments

[ 3.9 ms ] story [ 63.1 ms ] thread
ldd
I have never played D&D (despite wanting to) but I really liked what you did.

It seems very well-made, though I bet people would appreciate one or two youtube tutorials (it seems very feature rich btw).You should try posting it on reddit and other sites to get more feedback.

Congrats!

SubiculumCode
Always love new TTRPG tools!! I would love a paragraph about what differentiates this tool from the well known online alternatives. For example: https://app.dungeonscrawl.com/
toddrossdiy
So funny thing actually, me and him started working on our sites on almost the exact same day! We both saw some things on Twitter near the start of the pandemic that prompted us to begin these. I know he’s been working hard on a v2 of his site lately, but I took a long break from working on mine and haven’t really been following what others have been up to. Since I’ve been compared to Dungeon Scrawl quite a bit over time, I always said that his felt like it was trying to be a professional tool like Photoshop, with a really complex and powerful interface. I was trying to be more like Paint, a program that anybody can open up and figure out 90% of it just by poking around for a couple minutes.

Between the different drawing tools, the dynamic brushes, the style presets and texture options, you can create a pretty wide variety of maps with it. I know a lot of map making tools create maps with a very obvious style to them, but mine gives you a lot of flexibility while still taking just a few clicks to make it happen.

Hope you have fun playing around with it!

JenrHywy
I have several children who will love this. Thanks!
drusepth
I love this tool (and recommend it to some of my DM users quite often, and also added it to Fiction.Tools recently for writers to stumble upon). I've never used it for a D&D game, but I have used it from time to time to build out scaled maps for writing in. Very cool to see it getting constant updates; can't wait to check them out!
Narishma
It shouldn't be using CPU resources when nothing is happening.
toddrossdiy
Define nothing happening. I’ve made a lot of performance improvements to avoid redrawing anything that isn’t necessary, but it’s still drawing your mouse cursor constantly among other things, you wouldn’t expect any other drawing tool to drop to 0% cpu while open, would you? I absolutely agree it’s got some issues still, but I can’t just fully remove the draw loop cause then it’s not software any more, just a picture
Narishma
I would absolutely expect any drawing application to drop to 0% when I'm not interacting with it. That's the norm with native applications, it shouldn't be any different for a web app.
toddrossdiy
While I don't fully disagree with that, I just opened up Gimp and moving my mouse around made the cpu spike. That's with no brush selected or anything, just the default select tool and a completely blank screen. And yes, you can absolutely get more performance out of a native app than a web app, an editor built in javascript will always be less performant than one built in C++ or whatever something like Photoshop or Gimp is made in. That was a tradeoff I made to make something that was available to a wider audience instead of being locked down to a particular operating system.

I'm sure there's more improvements I could make on performance, maybe I could switch to only drawing the mouse cursor on the mousemove event rather than using the animation loop, but then when you're tweaking values in the menus, you won't see your changes in real time any more. It's all a balance, and this is just something I do in my spare time, I'd rather have fun building some new features than seeing my cpu usage drop by a percentage point.

remram
I am not "moving my mouse around", in fact it is not even on top of that window. As am I currently in this HN window typing this comment, the app is still using 100% of a CPU core.
toddrossdiy
Like I said, I'm using an animation loop, so of course it's going to keep doing things while the user isn't actively interacting. I fully agree there's ways to still improve it, and I might look into switching to entirely event based refreshing, but the 100% cpu core is due to your web browser being unable to offload the svg filters to your gpu. Maybe that's due to your gpu, maybe it's your operating system or web browser that's the problem, I don't know, but that's why people release things as a beta before fully releasing something. Hopefully I can work out most of those kinks, and people giving helpful feedback during beta makes that a lot easier!

For another data point, on my half decent desktop, it uses about 10% cpu and 20% gpu

kerv
It's cool, but I lost my whole map I drew when I accidentally double clicked and the site crashed.
toddrossdiy
Sorry to hear that! How big was the map you made? Images can get pretty large which used up a fair bit of ram, and I’ve found that if you overwhelm a computer, it tends to just make the screen go white and lock up, but I haven’t found a good solution to that other than warning the user on creation of larger sized maps
podiki
Nice work, thanks for sharing!
cbdumas
Very cool, thanks for sharing!
Aeolun
What does this do? The moment I open it my fans launch into airplane mode, and the website runs at 5fps... (Firefox on Pop OS)
toddrossdiy
Sorry to hear that! Unfortunately the new svg filter stuff requires hardware acceleration to work at any decent speed on a computer. I haven’t nailed down the exact reasons that make it available or not, but in general, integrated graphics don’t seem to handle it too well. The current public release should still work well for you if you check out dungeonmapdoodler.com/draw, and once I release these new changes, I plan to keep that older version available to use for people who can’t run this one on their computer
Aeolun
I mean, I can run modern games at 60hz 4k resolution, so I’m inclined to believe my PC should be able to deal with the website ;)

Don’t go out of your way for me though, I doubt I’d ever actually use it.

toddrossdiy
Ah that's interesting then, I wonder if it's a linux specific issue with hardware acceleration? I know anything that's unable to offload the svg filters to the gpu runs terribly, and it makes the cpu spike to 100%. I'm hoping that browsers improve in the long run, but I'm also hoping I can figure out some ways to make it run better than it currently does.
Aeolun
Huh, yeah, that’s curious. It only has the one graphics card, so it would have to fall back to software rendering entirely. Which certainly explains the framerate I guess.
kimixa
FYI on a slightly older (but likely "still fast") laptop using a 6700hq on chrome & windows 10 (latest updates, latest drivers) I scribbled for a second on an otherwise blank "medium" map with the free draw tool, and the entire viewport went blank and fans ramped up to 100%.

A cool idea, but I'm still not really sold on apparently heavyweight apps in-browser as they seem to end up with a lot of similar issues.

toddrossdiy
Thanks for the feedback! I absolutely agree, the performance hit that these new svg filters created is a bit more than I'd prefer, I'm hoping to find ways to optimize it further. If you feel like it, would you mind testing in Firefox as well? Also, does the current version at dungeonmapdoodler.com/draw work smoothly for you? I'm still trying to nail down exactly why it still runs like crap on some fairly powerful hardware, but then runs great on other slower machines. My own desktop had a 10 year old graphics card up until a month or two ago, and this ran smoothly on it, but a comparably powerful desktop with modern, but integrated graphics runs it at like 3 fps.
Aperocky
I love the dungeon mode and its custom generation, but it seems missing for world map, have you thought about using `simplex-noise` to generate a completely random world? for example https://aperocky.com/hydrosim

And performance does seem to suffer quite a lot on my M1 air.

toddrossdiy
Yeah, I haven't built a world generation tool yet, but that link you made seems really cool! I've played around with perlin noise in the past, but never simplex. I'll have to check it out, thanks for the suggestion!

I actually haven't tested it on a mac before, so thanks for letting me know. I just looked at it in Safari and apparently they still don't support svg filters even on desktop, so the app is unfortunately broken there