battle-map-explorer

Example Maps

Halmond's Laboratory: http://www.byronknoll.com/dungeon.html
Navigate using arrow keys, mouse drag, or touch. Zoom in/out using your browser's zoom tool. This map is used with the author's permission.

Salt Hall: http://www.byronknoll.com/dungeon2.html
This map was created by Daniel Somerville and used with his permission. You can find this map and more at his DeviantArt gallery.

Description

This is a library to help you create maps for D&D and other tabletop RPGs. It uses JavaScript and HTML5 canvas. Look at battle-map-explorer-dev.js and example-map.html to get started. The maps should work across all modern web browsers, operating systems, smart phones, and tablets.

Creating a map involves manually tracing the coordinates of walls and obstacles. The coordinates match the pixel positions of the background image (with the origin in the top-left). One way to find the coordinates is to load an image using this library (without any walls), navigate to a place you want to record, and press 'space'. This will log the coordinates at the crosshair into your browser's developer console. You can press '/' to adjust the movement speed to help fine-tune coordinates.

This project uses two external JavaScript libraries: visibility-polygon-js and hammer.js.

Contact me at byron@byronknoll.com if you have any questions or feature requests.