Skip to content

Latest commit

 

History

History
160 lines (117 loc) · 3.82 KB

readme.md

File metadata and controls

160 lines (117 loc) · 3.82 KB

| Tiled-Adapter       badge version

NPM module. Export a json map from Tiled and get a map object


| Update Log


  • Add custom terrain (FEAT)
  • Add custom map properties (FEAT)

| Get Started


Export your map in Tiled. In map window => File => Export As and select "JSON map files". Set file name and extension as follows:

create map

Next, do the same with the tile set. First, you can edit your tile set to define custom properties for each tile, which will be catched by the tiled-adapter module:

tile editor

In the tileset window => File => Export As and select "JSON tileset files":

create tileset


Install



npm install tiled-adapter 

| Use


To get a javascript object map from the Tiled files:

import { adapter } from "tiledAdapter";

const map = adapter.createMapFromTiled({
    mapPath: "./map.json",
    tilesetPath: "./tileset.json"
})

The map variable will contain a JavaScript object that represents your Tiled map.

You will obtain an object like this:

{
    width: 10,
    height: 8,
    grid: [
        [{
            typeId: 0,
            type: "grass",
            onlyFeet: false,
            isPassable: true,
            defensiveBonus: 1,
            cost: 1,
            canEmbark: false
        },
        {
            typeId: 2,
            type: "woods",
            onlyFeet: true,
            isPassable: true,
            defensiveBonus: 2,
            cost: 2,
            canEmbark: false
        }]

    ],

    (...)

} 

| Creating custom maps


You can also create a custom map using only some of the functionalities provided by the adapter. For example, you can define a custom grid and a custom tileset and use them to create a new map object. Here's an example:

import { createMap, customTile } from "tiled-adapter";

const customGrid = {
    width: 4,
    height: 2,
    grid:[
        [0, 0],
        [0, 1],
        [2, 1],
        [1, 1]
    ]
};

const customTileSet = [
    new customTile({ id: 0, properties: { type: "grass", canBuild: true, isPassable: true, cost: 1 } }),
    new customTile({ id: 1, properties: { type: "hardGrass", canBuild: true, isPassable: true, cost: 2 } }),
    new customTile({ id: 0, properties: { type: "woods", canBuild: false, isPassable: false } }),
]

const customMap = createMap(customGrid, customTileSet);

In this example, we define a custom grid with a size of 4x2, and a custom tileset with three tiles, each with its own custom properties. We then use the createMap function to create a new map object with these custom settings.

Note that you can define any number of custom properties for each tile, as long as they are valid JavaScript objects.

{
    width: 4,
    height: 2,
        grid: [
            [
                customTile {
                    typeId: 0,
                    type: 'grass',
                    canBuild: true,
                    isPassable: true,
                    cost: 1
                },
                customTile {
                    typeId: 0,
                    type: 'grass',
                    canBuild: true,
                    isPassable: true,
                    cost: 1
                }
            ],
            [...],
            [...],
            [...]
}

| Incoming

  • Test coverage (DEV)
  • Documentation improve (DEV)