0.2.0 • Published 2 years ago

tiled-adapter v0.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

| 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)
0.2.0

2 years ago

0.1.0

2 years ago