Gridmapper

A little Javascript/SVG application to create dungeon maps for role-playing games.

If you’re having trouble, consider the following:

The hash tag I’m using is #Gridmapper, obviously. 🙂

2019-10-21 Metainformation for an image

Recently, asked me whether it was possible to get from a dungeon map in Hex Describe to an editable map in Gridmapper. There wasn’t, but I liked the idea and so I started thinking about it. It should be doable in theory even though I am generating the dungeon maps using Text Mapper and all they have in common with Gridmapper maps is that they look similar.

So yesterday I started writing the code that transforms the Text Mapper data into a Gridmapper link. Once I could see it in the log output, I was happy. But what next?

I decided to add a HTTP header with that link, hoping that Hex Describe would be able to extract it, and I told J. Alan Henning that I had these instructions for him:

  1. generate map using Hex Describe
  2. use View Image to look at a dungeon map
  3. use Inspect Element to get to the development tools
  4. switch to the Network tab
  5. click the Reload button
  6. click on the new request line to see details
  7. in the Headers tab, there’s a section called Response headers
  8. in that list there’s a header called X-Link
  9. the value of that header is the Gridmapper link

It was late, I was tired, and I needed to sleep, obviously. 🙂

As the rendered image uses the SVG format, I alread had the input used in a comment at the end. Therefore, the link I just mentioned can be found right there. The X-Link code I had written was unnecessary and I removed it.

The instructions were in fact much simpler!

  1. generate map using Hex Describe
  2. use View Image to look at a dungeon map
  3. use View Page Source to look at the SVG code
  4. scroll to the end until you see the Gridmapper link

But then I realized that I could simply add the information the SVG output as a link! Within Hex Describe it’s hard to spot the link. It’s tiny:

Hex Describe output with link

If you use View Image, however, it gets bigger:

View Image

(If you click the image above, you might get taken to a different image because the seed I used is only guaranteed to work for as long as the code doesn’t change. My guess is that this won’t be stable for long!)

If you click the link in the top left corner, you’re taken to Gridmapper:

Image 3

I also need a way to add nice arrows to images using Gimp. Surely there is a better way!

Tags:

Add Comment

2019-10-02 Gallax Hall

I’ve found some very nice dungeon maps drawn with Gridmapper on Goodberry Monthly. It starts with the announcement Making a Kilodungeon.

It’s a megadungeon, but about a thousandth of the size!

Haha, makes sense to me! 😀

I think they’ve got a nice rythm going, there!

Tags:

Add Comment

2019-08-23 Gridmapper inside Text Mapper

Gridmapper is an interactive web application. You can use it to draw multi-level dungeon maps. The drawback is that you cannot use it to generate images in order to use them elsewhere.

A while ago I wrote a Megadungeon Generator which generates a random dungeon and allows you to open it in Gridmapper. That’s pretty cool, but I was still unhappy. The preview images I generated as part of it seemed to be on the right track: these were images, but much to small, and they didn’t use the Gridmapper tiles.

Recently, I added the ability to generate square maps within Text Mapper. Now all I was missing was the Gridmapper tiles and some encouragement.

The last few days, as I was talking with Brian Green, J. Alan Henning, and ktrey parker on Diaspora the topic turned to mapping again. ktrey parker suggested using the Face Generator or something similar for dungeon maps. Something smaller, combining geomorphs, something like the five room dungeon, not something big like Dave’s Mapper. Robin Green linked to The Nine Forms of the Five Room Dungeon | Gnome Stew, and started drawing sketches of the kinds of geomorphs we could use, how they’d fit together, and so on.

And suddenly... that was the kind of social enthusiasm I needed and I started writing code...

This is a new mapping algorithm for Text Mapper based on all of the above. It doesn’t do the special rooms Brian had sketched, yet; and it doesn’t always place the initial stairs correctly; and there are no “extras” such as pillars, chests, pits, and so on. But all of this can still be added.

As always with these algorithms, you can use them to generate a new text description for you to edit, or you can just keep reloading this link.

Tags:

Add Comment

2019-05-08 Tileset

Kenney 1-Bit Pack “includes over 1,000 different tiles, characters, objects and items. It’s perfect for roguelike and RPG in any setting (fantasy, feudal Japan, modern, sci-fi etc.) and even comes with tiles for UI, platformers and puzzle games. Perfect for prototyping! Also includes a monochrome (black and white) version, plus versions with a transparent background.”

I wonder whether it would be easy to write a Gridmapper like editor that would quickly allow us to create maps using the keyboard. And town and dungeon and all sorts of map generators using that.

I guess what I’m trying to say is that I really love how the Face Generator, Text Mapper and Hex Describe are building something that is better than the sum of its parts.

I kept hoping that the Megadungeon Generator (needs more work) and Gridmapper (I feel like it needs a redesign but I’m not sure?) could play well together in a similar vein.

And Text Mapper itself is an example of an application that has been made a gazillion times more joyful to use once I got the Gnomeyland icons by Gregory MacKenzie added.

Tags:

Add Comment

2019-04-01 Gridmapper Updates

I haven’t used Gridmapper in a long time. But other people keep using it! And more: recently a user started sending patches so now Gridmapper has new features, too. This is great. 😀

  • more colours
  • arcs with walls
  • a simple diagonal wall

Try it!

Tags:

Comments on 2019-04-01 Gridmapper Updates

Very neat!

Goblin's henchman 2019-04-02 22:31 UTC


Alex...thanks for all you do for the RPG community. I gave you a shout out on the blog/podcast this week. Thanks again for everything.

froth 2019-04-03 14:32 UTC


You guys are warming my heart! Thanks. 🙂

– Alex Schroeder 2019-04-03 14:57 UTC


Also, thanks for that encouragement to leave non-spam comments. Made me laugh! 😀

– Alex Schroeder 2019-04-04 07:32 UTC

Add Comment

2019-01-05 Gridmapper for SF

Image 1

I love it when people manage to use Gridmapper for something it wasn’t intended to do, like ship plans for Science Fiction games.

I kept asking myself: how can I make it better? But last year I discovered the Starship Geomorph Book and decided that I needed to stop pursuing this goal. It has been done, and better than I ever would.

And yet, some anonymous user managed to create the cool looking starship seen above. Whoever you are: very cool!

Tags:

Add Comment

2017-06-26 Megadungeon Generator

A while ago I started working on a megadungeon map generator which documents every step of its growth using a little picture, and every one of these pictures links to a rendering of said map using Gridmapper for debugging purposes. The actual “result” is simply the link from the last image.

Give it a whirl!

One example of a generated map

I’m interested in ideas for improving the generated maps. I already have some vague ideas:

  • Having the algorithm prefer growing new corridors into sections that are “less dense.” But how does one define that?
  • If that doesn’t eliminate dead ends, have some sort of estimate of whether the corridor will end up in a dead end and abort these outgrows. Or eliminate dead ends after the fact.
  • Placement of statues, altars, treasure chests, tables, beds, open pits and traps.
  • Agressively trying to add more “starting” rooms for levels that are “done” but aren’t “dense enough”. All of these terms need decisions to be made.

When I started the project, the first thing I did was draw the kind of dungeon elements I expected to find in a simple generated megadungeon map.

Megadungeon Elements

Next, I drew a map using the elements I had identified. I also started looking at corridor lengths and the like. That’s what the numbers are for.

Megadungeon example map

And finally, I tried to identify some simple statistics to build a simple table of probabilities, a bit like a Markhov chain.

Megadungeon statistics

Tags:

Comments on 2017-06-26 Megadungeon Generator

Some thoughts: What about using a census of the region the proposed feature is going to go into, maybe up to 3 or 5 squares away, and the census values fall off by distance (1 square = 2, 2 squares = 1, 3 squares = 0.5, etc), and then if the value is above a figure you set the generator instead chooses a new location? Maybe you could use a random feature generator, something that works like the AD&D DMG dungeon generator, for traps/statues/chests/etc? It looks like you’re using something already, as I see that the generator will throw in the occasional portcullis or statue.

Frotz 2017-06-27 13:46 UTC


The way the generator works is that it places elements and based on the element it just placed, it randomly chooses appropriate next steps. The way to describe it right now would thus be something like this:

  1. start with a big room
  2. a big room has an exit
  3. a big room has a 70% chance for another exit
  4. a big room has a 20% chance for another exit
  5. a big room has a 20% chance for a spiral stair case
  6. a room exit goes in a random direction and looks for a wall to place a door
  7. a door out of a room will connect to a corridor that is about 60ft long
  8. at the end of a corridor, there is a 20% for a big room (back to #2)
  9. or a 30% chance for a settlement
  10. or a 50% chance for small room
  11. and so on...

To add a feature, I’d need to hook into this process and say, for example, that a big room without a stair case has a 30% chance of having an altar, and a 30% chance for a statue, and thus an about 10% chance for both.

Or, in a settlement, the last small room has a 50% chance of containing a chest.

– Alex Schroeder 2017-06-28 06:50 UTC

Add Comment

2017-04-23 Cut, Copy and Paste

I wanted to add copy & paste to Gridmapper. But how? With access to the clipboard? And what kind of data would I use? I decided to leverage the existing text export and import functionality.

I wanted to use something like the selection on typical graphical user interfaces. Shift and the arrows keys extends the selection. But I have used Shift for other things:

  • Shift and the mouse doesn’t drag the pointer along, which is nice when trying to use the application with just the mouse; I switched that to Alt
  • Shift and the arrow keys draws the floor, which is nice when you’re using just the keyboard; I switched that to Alt as well
  • I allow Escape to get rid of the active selection
  • Do you think Delete and Backspace should delete the selection if it is currently active?
  • Mouse users: hold Shift while moving the mouse.
  • Also, no documentation. How to mention this on the help pane? How to integrate this into the demo?

Tags:

Comments on 2017-04-23 Cut, Copy and Paste

I’m on a macbook pro and I can no longer change floors. alt+arrows just draws the floor. Tried every button on the keyboard. Please help.

– xyz 2017-05-24 20:21 UTC


Sadly, I’m away from my Laptop for the next four days. I hope you can figure something out!

If all else fails, you can use an older version, e.g. 1.0,1.1,1.2, or 1.3.

– Alex Schroeder 2017-05-25 09:07 UTC


I just tried it on a MacBook Pro using Chrome, Firefox and Safari – and it worked as intended. Can you describe the exact problem you’re having, the software you’re using, the key’s you’re pressing, what you’re seeing, what you expected to see instead, all the stuff that might help me figure out what the problem is?

– Alex Schroeder 2017-05-30 17:43 UTC


For some reason I get the same problems with the older version, even though it’s shift+arrow key that switches floors...how odd.

So I’m on Safari 10.1.1 on a Macbook pro. I used to be able to go up or down floors by holding down left/right shift key and pressing the up and down arrows. Now when I do shift+arrow on versions 1.1-3 (alt+arrow on most recent build), it starts to draw floor tiles instead of switching floors, which effectively limits me to building one-floor dungeons.

xyz 2017-06-09 15:18 UTC


I think you must be confusing Gridmapper with some other application. Shift arrows never changed levels (”floor”). To change levels, use the z key to go down and the y key to go up.

– Alex 2017-06-10 06:51 UTC


Oh god, I’m an idiot. Thank you.

xyz 2017-06-10 16:01 UTC

Add Comment

2017-02-12 Grottos

Gridmapper now does caves (”grottos”). Click the image to get transported into dungeon mapping heavy.

Grotto!

Tags:

Comments on 2017-02-12 Grottos

And I’ve prepared the ground for end-to-end tests using Nightwatch.js.

– Alex Schroeder 2017-02-12 12:45 UTC

Add Comment

2017-02-03 Map Collaboration

I don’t think anybody ever used the ability to host a Gridmapper map, live. Well, the least used feature just got better! I know, I know. But hey, it’s free, and I liked working on it, so there’s that. The new feature: collaborate on a map. That is, where as before would one of you would be the mapper and the others could get a read-only view of what the mapper was doing, now you can all draw at the same time. That’s what I hope, anyway.

A word of caution: In the spirit of all things Internet, there is currently no protection at all. Anybody can join a map. I’ll probably add optional passwords, soon. Please leave a comment if you were collaborating with friends and vandals joined your map!

Please note that Gridmapper has no chat functionality. You must meet people online, elsewhere. One way to do this is to join the DIY DND chatroom on Discord. It’s like G+, but one ongoing conversation.

And when you do collaborate on a map, please let me know. My current estimate of Gridmapper users is one or two active users.

Tags:

Add Comment

More...

Comments


Please make sure you contribute only your own work, or work licensed under the GNU Free Documentation License. Note: in order to facilitate peer review and fight vandalism, we will store your IP number for a number of days. See Privacy Policy for more information. See Info for text formatting rules. You can edit the comment page if you need to fix typos. You can subscribe to new comments by email without leaving a comment.

To save this page you must answer this question:

Please say HELLO.