Basic Tilemap Editor

---

Tutorial  About  Technologies  Issues  Contribute 

---

📙 Tutorial

Demo

I made a Basic Tilemap Editor using Vanilla Javascript which allows you to draw tilemaps using several tools, like for example: the Brush Tool | B, Eraser Tool | E, Bucket Fill Tool | G, Eye Dropper Tool | I, etc.

Hit (I) to switch into Eye Dropper mode to pick tile from the Editor Canvas

You can remove tiles using the Eraser (E)

Change the layer:

Prevent mistakes by blocking the layer:

Hold (CTRL+Z) to Undo actions:

Export the image and clear the entire drawing:

ℹ️ About

I made this because I needed a basic tool to edit tilemaps for my basic JavaScript based games.

🚀 Technologies Used

This project was created with minimal tech like HTML Canvas and TailwindCSS with some plugins for the visuals.

⚠️ Issues

• Bug: Currently the Bucket Fill Tool only works in there's aready painted areas.

• Feature: I'm going to add a feature that'll let the user paint with randomly generated tiles from the selection.

🛠️ How to Contribute

You are welcome to add new features or work on existing issues:

1. Fork this repostory

2. Clone your forked repo

   # Clone this repo and open on your local device
   git clone https://github.com/your-username/tilemap-editor && cd tilemap-editor

• Create a branch with your changes

  # Create and switch to a new branch
  git checkout -b branch-name

• Make the commit with your changes

  # Add commit message
  git commit -m 'feat: added shortcuts for the tools'

• Push your branch

  # Send the code to your remote branch
  git push origin my-changes

• Create a Pull Request & I'll review them as soon as possible.

Thanks.