Change Tiles

CHANGELOG.md

@@ -15,6 +15,7 @@
   - Use `WA.room.getCurrentUser(): Promise<User>` to get the ID, name and tags of the current player
   - Use `WA.room.getCurrentRoom(): Promise<Room>` to get the ID, JSON map file, url of the map of the current room and the layer where the current player started
   - Use `WA.ui.registerMenuCommand(): void` to add a custom menu
+  - Use `WA.room.changeTile(): void` to change an array of tiles
 
 ## Version 1.4.1
 

docs/maps/api-room.md

@@ -112,3 +112,26 @@ WA.room.getCurrentUser().then((user) => {
     }
 })
 ```
+
+### Changing tiles 
+```
+WA.room.changeTile(tiles: TileDescriptor[]): void
+```
+Replace the tile at the `x` and `y` coordinates in the layer named `layer` by the tile with the id `tile`.
+`TileDescriptor` has the following attributes : 
+* **x (number) :** The coordinate x of the tile that you want to replace.
+* **y (number) :** The coordinate y of the tile that you want to replace.
+* **tile (number | string) :** The id of the tile that will be placed in the map.
+* **layer (string) :** The name of the layer where the tile will be placed.
+
+**Important !** : If you use `tile` as a number, be sure to add the `firstgid` of the tileset of the tile that you want to the id of the tile in Tiled Editor.
+
+Example : 
+```javascript
+WA.room.changeTile([
+                {x: 6, y: 4, tile: 'blue', layer: 'changeTile'},
+                {x: 7, y: 4, tile: 109, layer: 'changeTile'},
+                {x: 8, y: 4, tile: 109, layer: 'changeTile'},
+                {x: 9, y: 4, tile: 'blue', layer: 'changeTile'}
+                ]);
+```

front/src/Phaser/Game/GameMap.ts

@@ -130,6 +130,10 @@ export class GameMap {
         return this.map;
     }
 
+    public getTilesetProperties(): { [tile_index: number]: Array<ITiledMapLayerProperty> } {
+        return this.tileSetPropertyMap;
+    }
+
     private trigger(propName: string, oldValue: string | number | boolean | undefined, newValue: string | number | boolean | undefined, allProps: Map<string, string | boolean | number>) {
         const callbacksArray = this.callbacks.get(propName);
         if (callbacksArray !== undefined) {
@@ -165,4 +169,13 @@ export class GameMap {
         }
     }
 
+    public putTileInFlatLayer(index: number, x: number, y: number, layer: string): void {
+        const fLayer = this.findLayer(layer);
+        if (fLayer?.type !== 'tilelayer') {
+            return;
+        }
+        // @ts-ignore
+        fLayer.data[x+y*fLayer.height] = index;
+    }
+
 }

front/src/Phaser/Game/GameScene.ts

@@ -958,6 +958,23 @@ ${escapedMessage}
                 tags: this.connection ? this.connection.getAllTags() : []
             })
         }));
+        this.iframeSubscriptionList.push(iframeListener.changeTileStream.subscribe((eventTiles) => {
+            for (const eventTile of eventTiles) {
+                const layer = this.gameMap.findPhaserLayer(eventTile.layer);
+                if ( layer ) {
+                    const tileIndex = this.getIndexForTileType(eventTile.tile);
+                    if ( tileIndex ) {
+                        this.gameMap.putTileInFlatLayer(tileIndex, eventTile.x, eventTile.y, eventTile.layer);
+                        const tile = layer.putTileAt(tileIndex, eventTile.x, eventTile.y);
+                        for (const property of this.gameMap.getTilesetProperties()[tileIndex]) {
+                            if ( property.name === "collides" ) {
+                                tile.setCollision(true);
+                            }
+                        }
+                    }
+                }
+            }
+        }))
 
     }
 
@@ -986,7 +1003,10 @@ ${escapedMessage}
         this.dirty = true;
     }
 
-    private getIndexForTileType(tileType: string): number | null {
+    private getIndexForTileType(tileType: string | number): number | null {
+        if (typeof tileType == "number") {
+            return tileType;
+        }
         for (const tileset of this.mapFile.tilesets) {
             if (tileset.tiles) {
                 for (const tilesetTile of tileset.tiles) {
@@ -1205,7 +1225,6 @@ ${escapedMessage}
     createCollisionWithPlayer() {
         //add collision layer
         for (const phaserLayer of this.gameMap.phaserLayers) {
-            if (phaserLayer.type == "tilelayer") {
             this.physics.add.collider(this.CurrentPlayer, phaserLayer, (object1: GameObject, object2: GameObject) => {
                 //this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name)
             });
@@ -1221,7 +1240,6 @@ ${escapedMessage}
             //});
         }
     }
-    }
 
     createCurrentPlayer() {
         //TODO create animation moving between exit and start

maps/tests/Metadata/changeTile.html

@@ -5,22 +5,18 @@
     </head>
     <body>
     	<script>
-            WA.changeTile([
+            WA.room.changeTile([
-                {x: 0, y: 0, tile: 'Red', layer: 'changeTile'},
+                {x: 0, y: 0, tile: 92, layer: 'changeTile'},
-                {x: 0, y: 1, tile: 'Red', layer: 'changeTile'},
+                {x: 0, y: 2, tile: 'Red', layer: 'changeTile'},
-                {x: 0, y: 2, tile: 34, layer: 'changeTile'},
+                {x: 0, y: 3, tile: 99, layer: 'changeTile'},
-                {x: 0, y: 3, tile: 34, layer: 'changeTile'},
+                {x: 0, y: 5, tile: 117, layer: 'changeTile'},
-                {x: 0, y: 4, tile: 34, layer: 'changeTile'},
+                {x: 0, y: 6, tile: 117, layer: 'changeTile'},
-                {x: 0, y: 5, tile: 34, layer: 'changeTile'},
+                {x: 0, y: 9, tile: 74, layer: 'changeTile'}
-                {x: 0, y: 6, tile: 34, layer: 'changeTile'},
-                {x: 0, y: 7, tile: 34, layer: 'changeTile'},
-                {x: 0, y: 8, tile: 34, layer: 'changeTile'},
-                {x: 0, y: 9, tile: 34, layer: 'changeTile'}
                 ]);
-            WA.changeTile([
+            WA.room.changeTile([
                 {x: 6, y: 4, tile: 'blue', layer: 'changeTile'},
-                {x: 7, y: 4, tile: 'blue', layer: 'changeTile'},
+                {x: 7, y: 4, tile: 109, layer: 'changeTile'},
-                {x: 8, y: 4, tile: 'blue', layer: 'changeTile'},
+                {x: 8, y: 4, tile: 109, layer: 'changeTile'},
                 {x: 9, y: 4, tile: 'blue', layer: 'changeTile'}
                 ]);
         </script>

maps/tests/Metadata/changeTile.json

@@ -1,4 +1,11 @@
 { "compressionlevel":-1,
+ "editorsettings":
+    {
+     "export":
+        {
+         "target":"."
+        }
+    },
  "height":10,
  "infinite":false,
  "layers":[
@@ -50,7 +57,7 @@
          "y":0
         }, 
         {
-         "data":[65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 65, 65, 65, 65, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "data":[65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 65, 65, 65, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 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, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":10,
          "id":8,
          "name":"changeTile",
@@ -67,7 +74,7 @@
          "name":"floorLayer",
          "objects":[
                 {
-                 "height":159.866671635267,
+                 "height":191.866671635267,
                  "id":1,
                  "name":"",
                  "rotation":0,
@@ -75,14 +82,14 @@
                     {
                      "fontfamily":"Sans Serif",
                      "pixelsize":9,
-                     "text":"Test : \nWalk on the grass\n\nResult : \nTiles of the first left colum become red tile (tile find by Number)\nTiles of the below the grass become blue (tile find by String)\n",
+                     "text":"Test : \nWalk on the grass\n\nResult : \nThe Yellow Tile open a jitsi with Trigger.\n\nThe Red Tile open cowebsite Wikip\u00e9dia. The highest Red Tile is find by 'string' index, the lowest by 'number' index.\n\nThe White Tile are silent tile. You can not open a bubble in it. (Even if the other player didn't activate the script.)\n\nThe Pale Tile (Lowest) is an exitUrl tile to customMenu.json.\n\nThe Blue Tile are 'collides' tile. The two tile in the center are 'number' index. The others are 'string' index.\n",
                      "wrap":true
                     },
                  "type":"",
                  "visible":true,
                  "width":287.674838251912,
                  "x":32.5473600365393,
-                 "y":160.305680721763
+                 "y":128.305680721763
                 }],
          "opacity":1,
          "type":"objectgroup",
@@ -258,13 +265,62 @@
          "tilecount":72,
          "tileheight":32,
          "tiles":[
+                {
+                 "id":9,
+                 "properties":[
+                        {
+                         "name":"exitUrl",
+                         "type":"string",
+                         "value":"customMenu.json"
+                        }]
+                }, 
+                {
+                 "id":27,
+                 "properties":[
+                        {
+                         "name":"jitsiRoom",
+                         "type":"string",
+                         "value":"TEST"
+                        }, 
+                        {
+                         "name":"jitsiTrigger",
+                         "type":"string",
+                         "value":"onaction"
+                        }, 
+                        {
+                         "name":"jitsiUrl",
+                         "type":"string",
+                         "value":"meet.jit.si"
+                        }]
+                }, 
                 {
                  "id":34,
+                 "properties":[
+                        {
+                         "name":"openWebsite",
+                         "type":"string",
+                         "value":"https:\/\/fr.wikipedia.org\/wiki\/Wikip%C3%A9dia:Accueil_principal"
+                        }],
                  "type":"Red"
                 }, 
                 {
                  "id":44,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }],
                  "type":"blue"
+                }, 
+                {
+                 "id":52,
+                 "properties":[
+                        {
+                         "name":"silent",
+                         "type":"bool",
+                         "value":true
+                        }]
                 }],
          "tilewidth":32
         }],