A fat-free tilemap editor with zero dependencies and a scalable, mobile-friendly interface!
npm install tilemap-editortry it online at https://blurymind.github.io/tilemap-editor/
---
---
TileMap Editor is a fat-free tile map editor with zero dependencies and a scalable, mobile-friendly interface.
- 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

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
``bash`
$ git clone https://github.com/blurymind/tilemap-editor.git
$ yarn
$ yarn start
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
`
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_