An extremely portable
browser-based
tile-map creator
tool built inside one html file. Create tile maps of different sizes and colors and easily export
to SVG format.
Use this tool online here or download creator.html and open it in any browser anywhere! See Documentation
section below for controls.
Click
with the mouse inside the grid to place a tile. To remove a cell, toggle on Erase
and click a cell. If you make a mistake, click the Undo
button to revert a change. Change tile color by using the color picker
(the colored square under the words "current tile") or click the hex
button to enter a hex color. Click a recent tile
to quickly change back to a previous color. Change the size of the grid with the dimension
and size
controls. When your drawing is complete, click Export
to copy your tile map to the clipboard as SVG; SVG is a format that can be rendered clearly at any size. Read this article for more info about SVG: https://www.w3schools.com/graphics/svg_intro.asp
This app is written in Vanilla JavaScript
with a Redux
state model in-mind. A global state object
defines the state of the app at any time. A deep copy
of this state object is created when a change is made. Sometimes the old state object is pushed to an undo array allowing a user to return to a previous state. All UI is re-rendered after each change according to the updated state object.