0.0.14 • Public • Published


    This is a map-loader for kaboom to load tiled JSON maps.


    Here is an example of it running. Here is the source. This demo uses the latest ES6 module & JSON-import support in up-to-date browsers, and will not work in old browsers, but you can still use the methods below to support them, too.


    • easy & fun to work with
    • think of it as an "advanced map" if you outgrow the awesome built-in kaboom maps
    • easier to make more complex maps
    • generates regular kaboom text-maps
    • handles layers in csv, base64, and 3 kinds of compression
    • many ways to import the plugin, depending on how your app is setup
    • use tiled map directly, so you don't need to generate a seperate map file for your game


    In your map-files, make sure the encoding is csv/base64/gzip/zlib (not Zstandard or Xml.) Embed your tilemaps.

    The basic usage with Kaboom goes like this:

    const k = kaboom({
      plugins: [ tiledKaboom ]
    // then later
    const { sprites, levels, key } = await k.loadTiledMap(YOUR_MAP_OBJECT, ASSET_LOCATION)
    for (let level of levels) {
      k.addLevel(level, { width: 32, height: 32, ...key })

    ASSET_LOCATION is optional.

    There are a few different ways to get tiledKaboom depending on how you are doing things.

    regular tag

    If you are not using type="module" in your <script> tags, and aren't using a bundler, you can do this:

    <script src="https://unpkg.com/tiled-kaboom"></script>

    For compressed maps, you also need pako:

    <script src="https://unpkg.com/pako@2.0.3/dist/pako.min.js"></script>

    This will add tiledKaboom to your global-scope, so it can be used with kaboom.

    npm-based project

    If you are using an npm-based project (like with a bundler of some kind) you can do this:

    npm i tiled-kaboom

    And then use it:

    import tiledKaboom from 'tiled-kaboom'


    const tiledKaboom = require('tiled-kaboom')

    browser es6 module

    I personally like to use the new ES6 module support in modern browsers. You can do this a couple ways:

    <script type="module">
    import tiledKaboom from 'https://unpkg.com/tiled-kaboom@latest/dist/tiled-kaboom.modern.js'

    You can also use an import-map, if you want it to look neater in your actual code:

    <!-- first tell your browser where to find tiled-kaboom -->
    <script type="importmap">
      "imports": {
        "pako": "https://unpkg.com/pako@2.0.3/dist/pako.esm.mjs",
        "tiled-kaboom": "https://unpkg.com/tiled-kaboom@latest/dist/tiled-kaboom.modern.js"
    <!-- now your imports will look like they do in node -->
    <script type="module">
    import tiledKaboom from 'tiled-kaboom'

    This method is the way to go, if you are using compressed maps and browser ES6 module support.


    • The terrain tiles in demo came from here and uses a terrain-set to make it really fast & easy to make cool maps in tiled.
    • The waterfall in demo came from here
    • Obviously thanks to kaboom and tiled, 2 great tools for making games


    There is still a lot to be done. Check out our planned list of enhancements


    npm i tiled-kaboom

    DownloadsWeekly Downloads






    Unpacked Size

    67.8 kB

    Total Files


    Last publish


    • konsumer