What is the battlemapper?

The battlemapper is a web tool to handle combat maps when playing Pen-and-Paper roleplaying games on online sites (Play-by-Post) or via E-Mail (Play-by-Mail) or instant messaging. It allows you to load your own map images, place characters on them, move them around, visualize area effects and then save them to get an URL link refering to the saved state, to pass it on the other players. It is especially suited for, but not limited to Dungeons and Dragons (D&D) and Pathfinder games, as it has the correct templates for the area effects already built in.

How to use the battlemapper?

Step 1. Get a map image.

First you need an image file in a place where it can be downloaded by anyone who want to use your map. There are several image hosting sites out there you can choose from.

When you have done that, copy the URL of the image file into the 'Image URL' field and click set. Now your image should appear in the main area of the web page. Alternatively, on many image sites you can drag 'n drop the image from another browser tab to the main image area of the battlemapper tab.

Step 2. Align the Grid.

Now you have to tell the battlemapper how large your grid cells are and how they are aligned. To do this you need to pick two grid intersections that are both in different rows and columns of your grid. The farther apart the grid intersections are the more accurate your alignment will become, but it means you have to count more squares.

Step 2a. Choose first grid corner.

Click on the 'pick' button near the 'Corner 1' edit fields. Then click in the image on the grid intersection. Now the relative coordinates (relative to the total image width or height) should appear in the edit fields. Some people prefer to fine tune them later, but this is up to you.

Step 2b. Choose second grid corner.

Then do the same for the second grid corner.

Step 2c. Specify number of grid squares in your selected rectangle.

The two grid corners you selected in steps 2b and 2c form a rectangle. To create the correct grid, write the number of grid squares in horizontal and vertical direction in the edit fields labeled 'Grid', then click set.

Check the 'show' box near Grid to see the grid you created. If something is off, you can pick grid corners again as often as needed, or as already mentioned, you can edit the coordinate values directly.

Step 3. Add characters/creatures.

Click on the button 'add creature/character'. Then you get one more edit mask, where you can set the properties of the character. The most important thing is, each character needs an image. To add this, you have to again copy an image URL into the designated edit field and click set, similar to step 1. Now the character image should appear on the map at grid corner 1 from step 2. Character names are optional, but if you set them, you will get tooltips on the characters on the map which help other players to distinguish them.

Step 4. Play.

Now you have your characters on the map and can move them around with drag 'n drop. How does PbP work. steps 1-3 are only necessary for the DM. Step 4 is something every player needs to do. Everyone should do, one after the other the following:

Step 4a. Move your character.

Move your character where he you want him to go.

Step 4b. Save the map.

Click 'save map' in the top bar of the battlemapper. Now your map is saved permanently on the server and can be loaded by everyone.

Step 4c. Pass the image URL to the next player.

The next player should start his turn from the state the map you left it in. To do this you need to pass it along. Each saved map state has a unique URL you can add to your forum post. To see this URL click on 'copy URL' in the top bar after you saved the map. With Ctrl+C you can copy it to your clipboard and paste it into your forum post.


My image is not displayed after step 1.

Make sure you actually have copied an Image URL, not a link to a web page that embeds an image. Usually it goes about like this:

Wrong: http://myimagehoster.com/myimage/

Right: http://myimagehoster.com/myimage.jpg