kaplay-plugin-tiled

KAPLAY plugin for loading finite orthogonal Tiled JSON maps.

Prerequisites

Install kaplay:

npm install kaplay

Install

NPM:

npm install kaplay-plugin-tiled

CDN:

<script src="https://unpkg.com/kaplay-plugin-tiled@latest/dist/plugin.umd.js"></script>

Usage

Import the plugin:

import kaplay from 'kaplay';
import { tiledPlugin } from 'kaplay-plugin-tiled';

const k = kaplay({
  plugins: [tiledPlugin],
});

Use the plugin:

import level from './level.json';
import tilesetUrl from './tileset.png';

k.loadSprite('tileset', tilesetUrl);

k.onLoad(() => {
  k.addTiledMap(level, {
    sprite: 'tileset',
    objects: [
      {
        match: { properties: { collides: true } },
        comps: ({ width, height }) => [
          k.area({
            shape: new k.Rect(k.vec2(), width, height),
          }),
          k.body({ isStatic: true }),
        ],
      },
    ],
  });
});

If you use KAPLAY globals, load the ambient types explicitly:

import 'kaplay/global';
import 'kaplay-plugin-tiled/global';

This adds the ambient type for addTiledMap(...). The runtime global still depends on KAPLAY's global setup.

The current implementation is intentionally small:

• finite orthogonal Tiled JSON only
• 1 tileset per map
• visible tile layers plus optional tiles and objects matchers for extra spawned components

To load the plugin using a script:

<script src="https://unpkg.com/kaplay@latest/dist/kaplay.js"></script>
<script src="https://unpkg.com/kaplay-plugin-tiled@latest/dist/plugin.umd.js"></script>

<script>
  const k = kaplay({
    plugins: [KaplayPluginTiled.tiledPlugin],
  });
</script>

Release

Release is automated with Release Please.

License

MIT