TilemapEditor

try it online at https://blurymind.github.io/tilemap-editor/

---

About |
Features |
Reason |
Getting started |
Api use |
How to Contribute |

---

:space_invader: About

TileMap Editor is a fat-free tile map editor with zero dependencies and a scalable, mobile-friendly interface.

:gift: features

- Multiple tileset support
- Multiple tilemap support
- Multi-tile selection and painting (drag select multiple tiles from the tileset)
- Tileset meta-data editing (Assign tags to tiles, automatic assignment of symbols to tiles)
- Animated tiles support
- Flipped tiles support
- Tilemap layers (as many as you like) with opacity and visibility
- Export boilerplate code for kaboomjs https://kaboomjs.com/ (wip)
- Customizable export data
- Resizable tilemap - non destructive too
- Paint tool, Pan tool, eraser tool, Bucket fill tool, Random tile tool, Pick tile tool
- Undo/redo system
- Responsive interface (scales down to portrait mode on mobile)
- Tiny footprint
- Easy I/O api that lets you transform and save data with ease

Planned:
- Paint tool modes (line, square, circle,etc)
- tiled i/o

Multiple tilemaps and tilesets are supported in one file/session

It also scales all the way down to a smartphone screen in portrait mode

You can flip tiles

It can even do animated tiles

The random tile brush can also use animation frames to place a random frame

:cyclone: Reason

But Todor, why are you making another tilemap editor with all these other ones out there?

While I am a big fan of Tiled and LdTk, for my case I was looking for something that neither had:
- Tiny footprint. Other tilemap editors are 60-100+ mb and require installation. Tilemap-editor is 30kb as of the time of writing this.
- Can be used by other js projects/web apps/websites. It has been designed to be a module, which you can plug in your project easily.
- No build process required, no webpack, no transpiling. Thats true, it's a single js+css file with no external dependencies!
- Runs everywhere - mobile too. The other available options can not run on android or ios.
- Responsive interface that scales all the way down to a portrait mode smartphone. Thats right, one of the goals is to let you make maps on your phone.
- Again it just uses vanilla javascript, no react, no webpack, no 1gb+ eaten by the node modules folder. Inspect its code in the browser and it all there clear as a day.
- No complicated build processes. Since it's just a js file, you don't need to wait for it to rebuild every time you change it

:eyeglasses: Getting started

``bash
$ git clone https://github.com/blurymind/tilemap-editor.git
$ yarn
$ yarn start
`

:book: Api

To get it from npm, you can run

`bash
$ npm i tilemap-editor
or
$ yarn add tilemap-editor
`

To use it, you can import it via require or in the index file like so

`js
// include the js and css files




`


:wrench: How to Contribute

You are welcome to add new features or fix some bugs:

1. Fork this repository

2. Clone your fork
`bash
$ git clone https://github.com/blurymind/tilemap-editor.git
`

- Create a branch with your changes

`bash
$ git checkout -b my-awesome-changes
`

- Make the commit with your changes

`bash
$ git commit -m 'feat: add a shortcut to copy a tile of the canvas'
`

- Push your branch

`bash
# Send the code to your remote branch
$ git push origin my-awesome-changes
``

- Create a _Pull Request_