https://github.com/praghus/tmx-map-parser
Tiled Map Editor *.tmx files parser
https://github.com/praghus/tmx-map-parser
parser tiled-map-editor tiled-parser tmx tmx-tiledmap
Last synced: 5 days ago
JSON representation
Tiled Map Editor *.tmx files parser
- Host: GitHub
- URL: https://github.com/praghus/tmx-map-parser
- Owner: praghus
- License: mit
- Created: 2019-06-16T08:04:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-06-24T18:50:57.000Z (7 months ago)
- Last Synced: 2025-10-08T15:49:02.598Z (4 months ago)
- Topics: parser, tiled-map-editor, tiled-parser, tmx, tmx-tiledmap
- Language: TypeScript
- Homepage:
- Size: 799 KB
- Stars: 12
- Watchers: 0
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tmx-map-parser [](https://www.npmjs.org/package/tmx-map-parser)
Parser for [Tiled Map Editor](http://www.mapeditor.org/) \*.tmx files.
## Installation
```sh
npm install tmx-map-parser
```
or using yarn
```sh
yarn add tmx-map-parser
```
## Usage
The basic implementation:
```js
import { tmx } from 'tmx-map-parser'
import tmxFile from 'map.tmx'
// The *.tmx file can be loaded as a string or URL encoded data.
// for Webpack use 'url-loader' plugin, for Rollup it can be '@rollup/plugin-url'
const translateFlips = true // Translates the tile flips in the layer data (default false)
tmx(tmxFile, translateFlips).then(data => {
console.log(data)
})
// or using async/await
async function loadMap() {
const data = await tmx(tmxFile, translateFlips)
console.log(data)
}
```
### Important
Parser only supports embedded tilesets. At the moment, external tilesets are not supported!
## Example data
[TMX Map Format documentation](https://doc.mapeditor.org/en/stable/reference/tmx-map-format/)
```js
{
tiledversion: "1.8.0",
tilewidth: 16,
tileheight: 16,
version: 1.8,
width: 512,
height: 128,
infinite: 0,
nextlayerid: 5,
nextobjectid: 165,
orientation: "orthogonal",
renderorder: "right-down",
properties: {
property1: 'value',
property2: 0.5
},
layers: [{
id: 1,
name: "layer name",
type: "layer",
visible: 1,
data: [0, 1, 1, 10, 10, 10, 1, 1, 0, 0, 0, 0, …],
// When the translateFlips parameter is enabled
flips: [
{H: false, V: false, D: false},
{H: true, V: false, D: true},
{H: false, V: false, D: false},
{…}
],
width: 512,
height: 128,
opacity: 0.77,
properties: {
property1: 'value',
property2: false
}
}, {
id: 2,
name: "objects",
type: "objectgroup",
visible: 1,
objects: [{…}, {…}, {…}],
properties: {
property1: 'value',
property2: false
}
}, {
…
}],
tilesets: [{
columns: 32,
firstgid: 1,
image: {source: "tiles.png", width: 512, height: 512},
name: "tiles",
tilecount: 1024,
tilewidth: 16,
tileheight: 16,
tiles: [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
}, {
…
}]
}
```
## License
[MIT licensed](./LICENSE).