lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Change Tiles

Browse source
This commit is contained in:
GRL 2021-06-24 11:31:29 +02:00
parent 24cc340cb9
commit a666bf310b
6 changed files with 146 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -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

23
docs/maps/api-room.md
View file

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

13
front/src/Phaser/Game/GameMap.ts
View file

@ -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;
}
}

60
front/src/Phaser/Game/GameScene.ts
View file

@ -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
});
}
//});
}
//});
}
}

24
maps/tests/Metadata/changeTile.html
View file

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

64
maps/tests/Metadata/changeTile.json
View file

@ -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
}],