https://github.com/remarkablegames/kaplay-plugin-tiled
🦖 KAPLAY plugin for Tiled maps
https://github.com/remarkablegames/kaplay-plugin-tiled
javascript json kaplay kaplayjs library map npm package plugin tiled tiledmap typescript
Last synced: 2 months ago
JSON representation
🦖 KAPLAY plugin for Tiled maps
- Host: GitHub
- URL: https://github.com/remarkablegames/kaplay-plugin-tiled
- Owner: remarkablegames
- License: mit
- Created: 2026-03-21T04:36:15.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2026-03-31T05:22:42.000Z (2 months ago)
- Last Synced: 2026-03-31T07:44:33.153Z (2 months ago)
- Topics: javascript, json, kaplay, kaplayjs, library, map, npm, package, plugin, tiled, tiledmap, typescript
- Language: TypeScript
- Homepage: http://remarkablegames.org/kaplay-plugin-tiled/
- Size: 585 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Agents: AGENTS.md
Awesome Lists containing this project
README
# kaplay-plugin-tiled
[](https://www.npmjs.com/package/kaplay-plugin-tiled)
[](https://www.npmjs.com/package/kaplay-plugin-tiled)
[](https://github.com/remarkablegames/kaplay-plugin-tiled/actions/workflows/build.yml)
[](https://codecov.io/gh/remarkablegames/kaplay-plugin-tiled)
[KAPLAY](https://kaplayjs.com/) plugin for loading finite orthogonal [Tiled](https://www.mapeditor.org/) JSON maps.
Read the [blog post](https://remarkablegames.org/posts/kaplay-plugin-tiled/) or see the [demo](https://github.com/remarkablegames/kaplay-tiled-demo).
## Prerequisites
Install [kaplay](https://www.npmjs.com/package/kaplay):
```sh
npm install kaplay
```
## Install
[NPM](https://www.npmjs.com/package/kaplay-plugin-tiled):
```sh
npm install kaplay-plugin-tiled
```
[CDN](https://unpkg.com/browse/kaplay-plugin-tiled/):
```html
```
## Usage
Import the plugin:
```ts
import kaplay from 'kaplay';
import { tiledPlugin } from 'kaplay-plugin-tiled';
kaplay({
plugins: [tiledPlugin],
});
```
Load the assets:
```ts
import level from './level.json';
import tilesetUrl from './tileset.png';
loadSprite('tileset', tilesetUrl);
```
Render the tilemap:
```ts
addTiledMap(level, {
sprite: 'tileset',
});
```
Or render the tilemap with objects:
```ts
addTiledMap(level, {
sprite: 'tileset',
objects: [
{
match: { properties: { collides: true } },
comps: ({ width, height }) => [
area({
shape: new Rect(vec2(), width, height),
}),
body({ isStatic: true }),
],
},
],
});
```
If you use TypeScript, load the ambient types explicitly:
```ts
import 'kaplay/global';
import 'kaplay-plugin-tiled/global';
```
To load the plugin using a script:
```html
kaplay({
plugins: [KaplayPluginTiled.tiledPlugin],
});
```
## Release
Release is automated with [Release Please](https://github.com/googleapis/release-please).
## License
[MIT](https://github.com/remarkablegames/kaplay-plugin-tiled/blob/master/LICENSE)