Loading a tileset create a new GameMap

front/src/Phaser/Game/GameMap.ts

@@ -61,17 +61,6 @@ export class GameMap {
         }
     }
 
-    public addLoadedTileset(
-        newMap: ITiledMap,
-        newPhaserMap: Phaser.Tilemaps.Tilemap,
-        newTerrains: Array<Phaser.Tilemaps.Tileset>
-    ) {
-        this.map = newMap;
-        for (const layer of this.phaserLayers) {
-            layer.tileset = newTerrains;
-        }
-    }
-
     public getPropertiesForIndex(index: number): Array<ITiledMapProperty> {
         if (this.tileSetPropertyMap[index]) {
             return this.tileSetPropertyMap[index];

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(
+                        this.Map.tilesets.push(
-                            jsonTileset.name,
+                            new Tileset(
-                            jsonTileset.firstgid,
+                                jsonTileset.name,
-                            jsonTileset.tileWidth,
+                                jsonTileset.firstgid,
-                            jsonTileset.tileHeight,
+                                jsonTileset.tileWidth,
-                            jsonTileset.margin,
+                                jsonTileset.tileHeight,
-                            jsonTileset.spacing,
+                                jsonTileset.margin,
-                            jsonTileset.tiles
+                                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);

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":[

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":[

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'}
     ]);
 });