diff --git a/front/src/Phaser/Game/GameMap.ts b/front/src/Phaser/Game/GameMap.ts index 0a027ccd..98583cba 100644 --- a/front/src/Phaser/Game/GameMap.ts +++ b/front/src/Phaser/Game/GameMap.ts @@ -61,17 +61,6 @@ export class GameMap { } } - public addLoadedTileset( - newMap: ITiledMap, - newPhaserMap: Phaser.Tilemaps.Tilemap, - newTerrains: Array - ) { - this.map = newMap; - for (const layer of this.phaserLayers) { - layer.tileset = newTerrains; - } - } - public getPropertiesForIndex(index: number): Array { if (this.tileSetPropertyMap[index]) { return this.tileSetPropertyMap[index]; diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 3b102ce1..5d14ae5e 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1080,31 +1080,36 @@ ${escapedMessage} for (const eventTile of eventTiles) { this.gameMap.putTile(eventTile.tile, eventTile.x, eventTile.y, eventTile.layer); } + this.markDirty(); }) ); iframeListener.registerAnswerer("loadTileset", (eventTileset) => { const jsonTilesetDir = eventTileset.url.substr(0, eventTileset.url.lastIndexOf("/")); + //Initialise the firstgid to 1 because if there is no tileset in the tilemap, the firstgid will be 1 let newFirstgid = 1; const lastTileset = this.mapFile.tilesets[this.mapFile.tilesets.length - 1]; if (lastTileset) { + //If there is at least one tileset in the tilemap then calculate the firstgid of the new tileset newFirstgid = lastTileset.firstgid + lastTileset.tilecount; } return new Promise((resolve, reject) => { this.load.on("filecomplete-json-" + eventTileset.url, () => { let jsonTileset = this.cache.json.get(eventTileset.url); this.load.on("filecomplete-image-" + jsonTilesetDir + "/" + jsonTileset.image, () => { + //Add the firstgid of the tileset to the json file jsonTileset = { ...jsonTileset, firstgid: newFirstgid }; this.mapFile.tilesets.push(jsonTileset); - const newTileset = new Tileset( - jsonTileset.name, - jsonTileset.firstgid, - jsonTileset.tileWidth, - jsonTileset.tileHeight, - jsonTileset.margin, - jsonTileset.spacing, - jsonTileset.tiles + this.Map.tilesets.push( + new Tileset( + jsonTileset.name, + jsonTileset.firstgid, + jsonTileset.tileWidth, + jsonTileset.tileHeight, + jsonTileset.margin, + jsonTileset.spacing, + jsonTileset.tiles + ) ); - this.Map.tilesets.push(newTileset); this.Terrains.push( this.Map.addTilesetImage( jsonTileset.name, @@ -1115,7 +1120,18 @@ ${escapedMessage} jsonTileset.spacing ) ); - this.gameMap.addLoadedTileset(this.mapFile, this.Map, this.Terrains); + //destroy the tilemapayer because they are unique and we need to reuse their key and layerdData + for (const layer of this.Map.layers) { + layer.tilemapLayer.destroy(false); + } + //Create a new GameMap with the changed file + this.gameMap = new GameMap(this.mapFile, this.Map, this.Terrains); + //Destroy the colliders of the old tilemapLayer + this.physics.add.world.colliders.destroy(); + //Create new colliders with the new GameMap + this.createCollisionWithPlayer(); + //Create new trigger with the new GameMap + this.triggerOnMapLayerPropertyChange(); resolve(newFirstgid); }); this.load.image(jsonTilesetDir + "/" + jsonTileset.image, jsonTilesetDir + "/" + jsonTileset.image); diff --git a/maps/tests/LoadTileset/LoadTileset.json b/maps/tests/LoadTileset/LoadTileset.json index 927fa333..7358a7b9 100644 --- a/maps/tests/LoadTileset/LoadTileset.json +++ b/maps/tests/LoadTileset/LoadTileset.json @@ -15,7 +15,7 @@ "y":0 }, { - "data":[33, 34, 34, 34, 34, 34, 35, 37, 38, 39, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 49, 50, 50, 50, 50, 50, 51, 53, 54, 55], + "data":[33, 34, 33, 34, 34, 34, 35, 37, 38, 39, 41, 42, 41, 42, 42, 42, 43, 45, 46, 47, 33, 34, 60, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 49, 50, 50, 50, 50, 50, 51, 53, 54, 55], "height":10, "id":2, "name":"bottom", @@ -25,8 +25,26 @@ "width":10, "x":0, "y":0 + }, + { + "data":[57, 58, 0, 0, 0, 0, 0, 0, 0, 0, 59, 60, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "height":10, + "id":3, + "name":"openwebsite", + "opacity":1, + "properties":[ + { + "name":"openWebsite", + "type":"string", + "value":"https:\/\/fr.wikipedia.org\/wiki\/Wikip%C3%A9dia:Accueil_principal" + }], + "type":"tilelayer", + "visible":true, + "width":10, + "x":0, + "y":0 }], - "nextlayerid":3, + "nextlayerid":4, "nextobjectid":1, "orientation":"orthogonal", "properties":[ diff --git a/maps/tests/LoadTileset/Yellow.json b/maps/tests/LoadTileset/Yellow.json index ebe8ab03..50cda1fd 100644 --- a/maps/tests/LoadTileset/Yellow.json +++ b/maps/tests/LoadTileset/Yellow.json @@ -25,6 +25,11 @@ "name":"collides", "type":"bool", "value":true + }, + { + "name":"name", + "type":"string", + "value":"Mur" }] }, { @@ -45,6 +50,20 @@ "value":true }] }, + { + "id":12, + "properties":[ + { + "name":"name", + "type":"string", + "value":"sol" + }, + { + "name":"openWebsite", + "type":"string", + "value":"https:\/\/fr.wikipedia.org\/wiki\/Wikip%C3%A9dia:Accueil_principal" + }] + }, { "id":13, "properties":[ diff --git a/maps/tests/LoadTileset/scriptTileset.js b/maps/tests/LoadTileset/scriptTileset.js index 79430cb4..b7950ed9 100644 --- a/maps/tests/LoadTileset/scriptTileset.js +++ b/maps/tests/LoadTileset/scriptTileset.js @@ -1,5 +1,6 @@ WA.room.loadTileset("http://maps.workadventure.localhost/tests/LoadTileset/Yellow.json").then((firstgid) => { WA.room.setTiles([ {x: 5, y: 5, tile: firstgid + 1, layer: 'bottom'}, + {x: 5, y: 3, tile: 'sol', layer: 'bottom'} ]); });