When the exported JSON file includes:
"tilesets":[ { "columns":4, "firstgid":1, "image":"maptiles.png", "imageheight":256, "imagewidth":256, "margin":0, "name":"tiles01", "spacing":0, "tilecount":16, "tileheight":64, "tilewidth":64 }], |
You should be good to go.
The code I used to generate the map ( The original tutorial is better if you are using arcade, however in this case I'm using Matter, which also will combine the code from this tutorial)
this.load.image("maptiles", "assets/map/maptiles.png"); this.load.tilemapTiledJSON("map", "assets/map/mapfiles.json"); |
The reason I used setCollisionBetween is because I didn't add the collision true in the map file (As I have 16 tiles, and 0 means there's no tile, so between 1~16 means everything in this layer will collide)
this.map = this.make.tilemap({key: "map"}); // the key should be the same key // as in "this.load.tilemapTiledJSON" this.tileset = this.map.addTilesetImage("tiles01", "maptiles"); // The "tiles01" (1st parameter) should be the same as the // "Name" field in the "tilesets}" section of the JSON file, // the "maptiles"(2nd parameter) should be the same as // the key in "this.load.image" this.groundLayer = this.map.createStaticLayer("GroundLayer", this.tileset, -64, -64); // Using -64 is for the world wall // The "GroundLayer" (1st parameter) // should be the name of the layer // you want to display in the Editor // ( also can be found with the "Name" field // of each layers in "Layer" array ) this.wallLayer = this.map.createStaticLayer("WallLayer", this.tileset, -64, -64); this.wallLayer.setCollisionBetween(1, 16); this.matter.world.convertTilemapLayer(this.wallLayer); this.matter.world.createDebugGraphic(); |