TileMap Editor

The editor gives you the ability to import json files that were saved in Tiled.

Keep in mind that this editor is still in a very early stage and not working yet.

How to use

Example File

{
  "height": 10,
  "layers": [
    {
      "data": [
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1
      ],
      "height": 10,
      "name": "Background",
      "opacity": 1,
      "type": "tilelayer",
      "visible": true,
      "width": 10,
      "x": 0,
      "y": 0
    },
    {
      "data": [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        41,
        42,
        43,
        44,
        0,
        0,
        0,
        0,
        0,
        0,
        49,
        50,
        51,
        52,
        0,
        0,
        0,
        0,
        0,
        0,
        57,
        58,
        59,
        60,
        0,
        0,
        0,
        0,
        0,
        0,
        65,
        66,
        67,
        68,
        0,
        0,
        0,
        0,
        0,
        0,
        73,
        74,
        75,
        76,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "height": 10,
      "name": "Floor 1",
      "opacity": 1,
      "type": "tilelayer",
      "visible": true,
      "width": 10,
      "x": 0,
      "y": 0
    }
  ],
  "nextobjectid": 1,
  "orientation": "orthogonal",
  "properties": {
  },
  "renderorder": "right-down",
  "tileheight": 32,
  "tilesets": [
    {
      "firstgid": 1,
      "image": "..\/mapeditor_php\/export\/static\/images\/tilesets\/001-Grassland01.png",
      "imageheight": 576,
      "imagewidth": 256,
      "margin": 0,
      "name": "001-Grassland01",
      "properties": {
      },
      "spacing": 0,
      "tilecount": 144,
      "tileheight": 32,
      "tilewidth": 32
    }
  ],
  "tilewidth": 32,
  "version": 1,
  "width": 10
}

Installation

$ npm install

Running the app

# development
$ npm run start

# watch mode
$ npm run start:dev

# production mode
$ npm run start:prod

Features

• Placing single tiles with the "Draw Tool"
• Erase tiles with the "Erase Tool"
• Open files from Tiled in json format

To Do

Open to suggestions :)

• Actually save the Map (..yes yes, i know..)
• Import JSON Files
• Import TMX Files
• Minimap for larger maps
• Bucket Tool to fill larger areas
• Keyboard shortcuts for the tools
• Testdrive a map - walk around with a character, test collisions
• Support TMX format as well

Credits

Based on an old tile based browsergame for Last Anixile The working original was written in PHP and rests in the legacy branch. Bear in mind that the code was created in 2005 ;-) - 'twas a different time then.. I made just rough corrections so it works outside it's previous frame.

• Tileset magecity was made by Hyptosis on opengameart