diff --git a/CHANGELOG.md b/CHANGELOG.md index 41f72510..e4bc7ba3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ - Use `WA.room.getCurrentUser(): Promise` to get the ID, name and tags of the current player - Use `WA.room.getCurrentRoom(): Promise` 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 diff --git a/docs/maps/api-room.md b/docs/maps/api-room.md index d8381cc6..3bb01cc0 100644 --- a/docs/maps/api-room.md +++ b/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'} + ]); +``` \ No newline at end of file diff --git a/front/src/Phaser/Game/GameMap.ts b/front/src/Phaser/Game/GameMap.ts index fba410d9..ab3e6010 100644 --- a/front/src/Phaser/Game/GameMap.ts +++ b/front/src/Phaser/Game/GameMap.ts @@ -130,6 +130,10 @@ export class GameMap { return this.map; } + public getTilesetProperties(): { [tile_index: number]: Array } { + return this.tileSetPropertyMap; + } + private trigger(propName: string, oldValue: string | number | boolean | undefined, newValue: string | number | boolean | undefined, allProps: Map) { 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; + } + } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 0202773d..8f199c3e 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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,18 +1003,21 @@ ${escapedMessage} this.dirty = true; } - private getIndexForTileType(tileType: string): number | null { - for (const tileset of this.mapFile.tilesets) { - if (tileset.tiles) { - for (const tilesetTile of tileset.tiles) { - if (tilesetTile.type == tileType) { - return tileset.firstgid + tilesetTile.id - } + 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) { + if (tilesetTile.type == tileType) { + return tileset.firstgid + tilesetTile.id } } } - return null } + return null + } private getMapDirUrl(): string { return this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf('/')); @@ -1205,21 +1225,19 @@ ${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) + this.physics.add.collider(this.CurrentPlayer, phaserLayer, (object1: GameObject, object2: GameObject) => { + //this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name) + }); + phaserLayer.setCollisionByProperty({collides: true}); + if (DEBUG_MODE) { + //debug code to see the collision hitbox of the object in the top layer + phaserLayer.renderDebug(this.add.graphics(), { + tileColor: null, //non-colliding tiles + collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles, + faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges }); - phaserLayer.setCollisionByProperty({collides: true}); - if (DEBUG_MODE) { - //debug code to see the collision hitbox of the object in the top layer - phaserLayer.renderDebug(this.add.graphics(), { - tileColor: null, //non-colliding tiles - collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles, - faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges - }); - } - //}); } + //}); } } diff --git a/maps/tests/Metadata/changeTile.html b/maps/tests/Metadata/changeTile.html index 214908a9..2813aa1d 100644 --- a/maps/tests/Metadata/changeTile.html +++ b/maps/tests/Metadata/changeTile.html @@ -5,22 +5,18 @@ diff --git a/maps/tests/Metadata/changeTile.json b/maps/tests/Metadata/changeTile.json index 48f57e0f..834ea9a1 100644 --- a/maps/tests/Metadata/changeTile.json +++ b/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 }],