Melonjs Tilemaps
Use this skill for Tiled maps in melonJS, loading TMX/TSX levels, spawning entities...
Install
npx skills add melonjs/melonJS --skill melonjs-tilemaps -g -a claude-code -y- Repository
- melonjs/melonJS6.4k
- Category
- Media
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Use this skill for Tiled maps in melonJS, loading TMX/TSX levels, spawning entities from Tiled objects, collision shapes authored in Tiled, isometric and hexagonal maps, and image layers. Covers registerTiledObjectClass and the pool.register name contract, camera bounds, compressed maps needing the inflate plugin, and the level director API. Triggers on: Tiled, TMX, TSX, tilemap, level.load, level.load async, await level.load, tileset, ImageLayer, isometric, hexagonal, staggered, pool.register, Collectable, Trigger, object layer, collision layer, parallax, registerTiledObjectClass, registerTiledObjectFactory, TMXObject, resolvedProperty, resolvedProperties, tile class, tile properties.
Tiled maps
melonJS's flagship content pipeline. Maps are authored in Tiled and loaded through the
leveldirector, > you rarely touch theTMX*classes directly.
Loading a level
Preload the map and everything it references, the .tmx, any external
.tsx tilesets, and the tileset images:
await loader.preload([
{ name: "map1", type: "tmx", src: "data/map/map1.tmx" },
{ name: "tileset", type: "tsx", src: "data/map/tileset.tsx" },
{ name: "tiles", type: "image", src: "data/img/tiles.png" },
]);
level.load("map1"); // inside Stage.onResetEvent
Asset type is "tmx" for maps and "tsx" for external tilesets, those are
the only two type strings the loader knows. The file can be .tmx / .tsx
(XML), or .json / .tmj / .tsj; the parser branches on the extension, not
on the type. type: "tmj" throws unknown or invalid resource type. You can
also skip src and pass the map inline via data (with format: "json" or
"xml").
level.load(levelId, options) accepts container (default game.world),
onLoaded (default game.onLevelLoaded), flatten (default game.mergeGroup),
setViewportBounds (default true) and async (default false). It throws
level <id> not found for an unknown id, synchronously, in both forms, because
that is a typo rather than a load failure.
Those game. defaults are the engine's own, and game is whichever
Application finished init() last. Pass container explicitly from a
Stage, which has the right one: level.load("map", { container: this.app.world }).
level.load is deferred while the game loop is running. It calls
state.stop() and finishes the load on a timer, after the current frame, so by
default it returns true before anything is in the world. Two ways to sequence
work after it:
// await it
await level.load("map1", { async: true });
// the world is populated here
