Kaplay Plugin Tiled

• Home • Edit

Kaplay Plugin Tiled allows you to load Tiled maps in Kaplay.js. See demo:

Motivation

I wanted a way to loading finite orthogonal Tiled JSON maps in my KAPLAY game so I created a plugin.

The current implementation is intentionally small:

  • Finite orthogonal Tiled JSON only.
  • One tileset per map.
  • Visible tile layers plus optional tiles and objects matchers for extra spawned components.

Prerequisites

Install kaplay-plugin-tiled:

npm install kaplay kaplay-plugin-tiled

Install Tiled:

brew install --cask tiled

Open Tiled with your tileset and export the map level as JSON. See example.

Usage

Import the plugin:

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

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

Load your tileset image and map level JSON:

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

loadSprite('tileset', tilesetUrl);

Draw the tilemap:

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

Or render the tilemap and add game objects:

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