Video Game Design Paper Map

Feel free to share

Using this site means trees will be planted. ^.^
(Find out more)

Map creator

This map creator tool will allow you to the create a whole world of your own design using well over 1400 different images. I included natural parts for the inner landscape, like forests, mountains and hills. All of these elements can be dragged around if you enable this feature.

To create the maps I used a grid system, I further divided the maps into sections with 3 connection points. For the top and bottom it will be left, right and the middle, for the sides it will be top, bottom and the middle. It might sound a little confusing, but the following images should help explain it.

Instructions

If you thought 1180 different images was all you were getting you thought wrong. You can also rotate all pieces, mirror them, you can change the map size and you can drag around and resize the draggable pieces.

To do all this the instructions are as follows:
- Adding a piece to the map: Click on whichever map piece you wish to change (you can select multiple), it will have a blue highlight if it's selected. Now click on any of the pieces from the selection menu (outward corners, inward corners, etc.), the highlighted square is now turned into whichever piece you selected. Note that the draggable and the label layers have to be toggled off to access the bottom pieces.
- Rotating a piece: Click on whichever piece(s) on the map you wish to rotate (including draggable pieces) so it has the blue highlight again. Now click on one of the rotate buttons ("rotate 90", "rotate 180", "rotate 270", "reset") to rotate it.
- Mirror: You can mirror an image by selecting it and clicking the mirror button.
- Toggle grid: You can enable and disable the grid to get a better view of the map by hitting the "toggle grid" button.
- Resetting: To reset the whole map, simply click on the "reset map" button. This doesn't reset the draggable piece, click "reset drags" for that. To reset an individual square back to a sea piece, click on it so it has the blue highlight and click the "reset piece" button.
- Dragging pieces: Tick the "Enable draggable pieces" checkbox. Now click on one of the "Land and Sea" pieces in the selection menu to add a piece to the map. This piece can be dragged around with your mouse.
- Toggle drags/labels: Toggle the visibility of the draggable pieces or labels on and off using the "toggle drags" button. You have to turn of these layers to access the bottom layer, which is the regular map.
- Layer 1 & 2: There are two layers for the draggable pieces, this way you can stack parts more easily, organize elements by type, and so on. Layer 2 will be hidden when 1 is active to make sure you can access it.
- Toggle resize: Toggles the ability to resize draggable pieces or labels, this allows for further customization and for customization with more precision.
- Toggle Grid Snap: You can toggle grid snap on and off by clicking the corresponding button. When grid snap is on, all draggable pieces will snap to an invisible grid. This makes lining them all up much easier.
- Delete draggable/label: To delete a draggable piece or a label, click it to select it, its border will turn blue. Then click the 'delete draggable' or 'delete label' button respectively to remove it.
- Add label:Simply click this to add a label to the map. You can drag it around, resize it and type anything you want in it.
- Toggle label borders: The borders make it easy to see the boundaries of the labels and to move them around, but once you're done you can toggle them off by clicking this button.
- Random map: Click the 'Random' button below the map to have a random map generated in an instant.
- Change map size: Scroll down to below the map, simply insert the values you wish to change the map size and hit apply.
- Custom images: You can add custom images to the map by selecting a regular piece or a draggable piece, and then clicking "Set background" to set the selected piece to whichever image link you entered in the input field.
- Hex grid: You can toggle a hex-grid overlay using the "Toggle hex overlay on" button. You can resize it using the number values, it'll change automatically as you change the numbers. This way you can adapt the map to tabletop RPGs.

Map Instructions Image

Saving and loading your map

It's possible to save your map and get back to it later, you can do so by simply clicking the 'save map' button. This will save the map with all the pieces, including draggable pieces, locally in your browser. This only works if you don't use incognito mode and only if you use a modern browser (so no IE7 for example). You can close your browser after you've clicked save, it'll still be there when you open it again.
toggle When you want to load your map you simply click 'load map' and it'll input all the map pieces back into their original positions. Do note that if you changed the map size you will have to change it again before loading the map.

Saving locally

It's also possible to save the map data locally. Simply click the "Save local" button to have the code create a text file with all the map code in it, then click on the download link to download it directly to your computer. Now you can use the "Choose file" field to upload your map data and use it in the future. This method makes sure there's no risk of losing all your data in case your browser data is wiped, for example, but it does mean keeping track of your downloaded file.

Important: Draggable pieces and labels

Note that when the draggable pieces and/or labels are toggled on (and thus visible on the map) you won't be able to select the squared pieces below, the draggable pieces and the labels are placed using an overlay which blocks you from accessing what's below.

Planning tool

This tool is mostly meant for planning purposes, at least if you want a detailed map. Natural elements are extremely varied, not just in size and shape, but also in positioning, their effect on other natural elements and much more.
A tool like this won't be able to replicate nature well, a square grid system with predefined images would require far more images to do so. But it still works great as a tool to help you plan the ideal version of your map. You can still place elements where you roughly want them to be.
To illustrate this, I made a map using this generator as a planning ground and I then fine tuned that map in an editing program to get a more natural looking map.

Map Instructions Image

Click the image for a larger version.

You can obviously go way beyond this, like DeviantArt user TheFrenchedCanadian who made the piece below. With a little time and skill you can turn the rough, planning version into a fully fledged map.

Map Instructions Image

Click the image for a larger version.

Saving the image

If you wish to save the map you've created all you have to do is click the 'Turn into image' button and an image will appear below it that looks exactly like what you've created. The only difference being that this is a single image, rather than a whole lot of separate images. Simply right click it, select 'save as' and name it what you wish. That's all there is to it.

Copyright

Many of you have asked how they can use the maps created with this map creator. You're free to use maps you've created in books, games, and similar projects as long as my site's credited. Everything else (the tool, the assets, etc.) are off limits. If you have a question, feel free to send me a message with the contact form.

Tip: You can drag and resize the menus below.

Outward Corners

Inward Corners

Sides

Icons

Top-Left

Top-Right

Bottom-Left

Bottom-Right

Top-Left

Top-Right

Bottom-Left

Bottom-Right

Geography

Structures & Trees

Water

Regular Controls
Read the instructions above for more info on the controls.

Custom image:

Draggable-only Controls
Enable draggable pieces

Other Controls

Hex grid size:

Random map
Infinite worlds! Well, not actually infinite, but still, billions upon billions of worlds!
Simply click the button below and a random world created randomly from a database of over 1200 (I didn't include the land and sea icons) bits and pieces will be generated within seconds.

Change map size
If you need a bigger map you can change the size by entering the width and height you wish below, the values are in units of squares, like the ones you see when the grid is enabled.
I've capped the maximum size at 35 x 35, which is too big for many screens anyway. The minimum width is 6, the minimum height is 2.

Note: Using a large value for width on a small screen will likely make the page mess up a little. Zooming out will fix that, but it'll make creating a map more difficult, so try to stick to what fits on your screen.

Width: Length:
Changing the map size will reset everything.

Note: Sometimes pieces may show up as water in the finished image. If this happens change that image in the map to a different one, then change it back and turn to image again. This usually fixes it.
Also, labels aren't saved. If you need those a screenshot is still the easiest way of getting them, or just add them afterward using fancy fonts. :)