kaplay-plugin-tiled

KAPLAY plugin for loading finite orthogonal Tiled JSON maps.

Read the blog post or see the demo.

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';

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

Load the assets:

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

loadSprite('tileset', tilesetUrl);

Render the tilemap:

addTiledMap(level, {
  sprite: 'tileset',
});

Or render the tilemap with objects:

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:

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

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>
  kaplay({
    plugins: [KaplayPluginTiled.tiledPlugin],
  });
</script>

Release

Release is automated with Release Please.

License

MIT