index.html

<title>kaboom game</title>
<link rel="icon" href="https://kaboomjs.com/pub/img/kaboom.png" />
<style>
body, * {
  margin: 0;
} 
body {
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
canvas {
  width: 90vw;
  margin: 0;
  background: black;
  border: 4px solid yellow;
}
</style>

<!-- telling browser how to find pako allows compressed maps -->
<script type="importmap">
{
  "imports": {
    "tiled-kaboom": "./tiled-kaboom.js",
    "pako": "https://unpkg.com/pako@2.0.3/dist/pako.esm.mjs",
    "kaboom": "https://unpkg.com/kaboom@2000.0.0-beta.24/dist/kaboom.mjs"
  }
}
</script>
<script type="module">
import kaboom from 'kaboom'
import tiledKaboom from 'tiled-kaboom'
import map from './map.json' assert { type: "json" }

const k = kaboom({
    plugins: [ tiledKaboom ]
})

// parse my map object
const { sprites, levels, key, mapObj } = await k.loadTiledMap(map)

// this is the parsed map-object, with everything decompressed, parsed, and inline as an object (good for external tilemaps or looking up tile info on a compresswed map)
console.log({ sprites, levels, key, mapObj })

// here you can do whatever you like to key, for example adding solid()
// eventually, I will auto-load tags when I load the map.

for (let level of levels) {
  k.addLevel(level, { width: 32, height: 32, ...key })
}

// currently, there is no built-in support for object-properties, but it's very simple to use them anyway:

// example: all my meta-objects with properties are on a layer named "Objects"
const { objects } = map.layers.find(l => l.name === 'Objects')

// I have an object named "player" I want info about
const player = objects.find(o => o.name === 'player')

console.log(player)

// I want the properties in a nicer format
const props = player.properties.reduce((a, v) => ({ ...a, [v.name]: v.value }), {})

console.log('PLAYER', props)


</script>