first step to change tile

This commit is contained in:
GRL 2021-05-27 17:06:39 +02:00
parent 9cd3ff1d31
commit 6dcb0d3750
5 changed files with 334 additions and 21 deletions

View File

@ -1,12 +1,14 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
export const isChangeTileEvent = export const isChangeTileEvent =
tg.isArray(
new tg.IsInterface().withProperties({ new tg.IsInterface().withProperties({
x: tg.isNumber, x: tg.isNumber,
y: tg.isNumber, y: tg.isNumber,
tile: tg.isUnion(tg.isNumber, tg.isString), tile: tg.isUnion(tg.isNumber, tg.isString),
layer: tg.isUnion(tg.isNumber, tg.isString) layer: tg.isString
}).get(); }).get()
);
/** /**
* A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property. * A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property.
*/ */

View File

@ -890,19 +890,12 @@ ${escapedMessage}
this.userInputManager.restoreControls(); this.userInputManager.restoreControls();
})) }))
/* this.iframeSubscriptionList.push(iframeListener.loadPageStream.subscribe((url: string) => { this.iframeSubscriptionList.push(iframeListener.changeTileStream.subscribe(event => {
this.loadNextGame(url).then(() => {
this.events.once(EVENT_TYPE.POST_UPDATE, () => {
this.onMapExit(url);
})
})
}))*/
this.iframeSubscriptionList.push(iframeListener.updateTileEvent.subscribe(event => {
for (const eventTile of event) { for (const eventTile of event) {
const layer = this.gameMap.findPhaserLayer(eventTile.layer); const layer = this.gameMap.findPhaserLayer(eventTile.layer);
if (layer) { if (layer) {
const tile = layer.getTileAt(eventTile.x, eventTile.y) console.log('layer : ', layer);
const tile = layer.getTileAt(eventTile.x, eventTile.y, true)
if (typeof eventTile.tile == "string") { if (typeof eventTile.tile == "string") {
const tileIndex = this.getIndexForTileType(eventTile.tile); const tileIndex = this.getIndexForTileType(eventTile.tile);
if (tileIndex) { if (tileIndex) {
@ -911,11 +904,11 @@ ${escapedMessage}
return return
} }
} else { } else {
tile.index = eventTile.tile tile.index = eventTile.tile //+ firsrtgid du layer
} }
} }
} }
this.scene.scene.sys.game.events.emit("contextrestored") //this.dirty = true;
})) }))
let scriptedBubbleSprite: Sprite; let scriptedBubbleSprite: Sprite;

View File

@ -44,9 +44,10 @@ interface WorkAdventureApi {
displayBubble(): void; displayBubble(): void;
removeBubble(): void; removeBubble(): void;
loadSound(url : string): Sound; loadSound(url : string): Sound;
registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void): void registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void): void;
getCurrentUser(): Promise<User> getCurrentUser(): Promise<User>;
getCurrentRoom(): Promise<Room> getCurrentRoom(): Promise<Room>;
changeTile(tiles: TileDescriptor[]): void;
//loadTileset(name: string, imgUrl : string, tilewidth : number, tileheight : number, margin : number, spacing : number): void; //loadTileset(name: string, imgUrl : string, tilewidth : number, tileheight : number, margin : number, spacing : number): void;
onPlayerMove(callback: (playerMovedEvent: HasPlayerMovedEvent) => void): void onPlayerMove(callback: (playerMovedEvent: HasPlayerMovedEvent) => void): void
@ -65,6 +66,13 @@ interface Room {
startLayer: string | null startLayer: string | null
} }
interface TileDescriptor {
x: number
y: number
tile: number | string
layer: string
}
declare global { declare global {
// eslint-disable-next-line no-var // eslint-disable-next-line no-var
var WA: WorkAdventureApi var WA: WorkAdventureApi
@ -221,6 +229,13 @@ window.WA = {
}) })
}, },
changeTile(tiles: TileDescriptor[]) {
postToParent({
type: 'changeTile',
data: tiles
})
},
/** /**
* Send a message in the chat. * Send a message in the chat.
* Only the local user will receive this message. * Only the local user will receive this message.

View File

@ -0,0 +1,28 @@
<!doctype html>
<html lang="en">
<head>
<script src="http://play.workadventure.localhost/iframe_api.js"></script>
</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.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: 9, y: 4, tile: 'blue', layer: 'changeTile'}
]);
</script>
</body>
</html>

View File

@ -0,0 +1,275 @@
{ "compressionlevel":-1,
"height":10,
"infinite":false,
"layers":[
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 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":1,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 49, 50, 50, 50, 50, 50, 50, 50, 50, 51],
"height":10,
"id":2,
"name":"bottom",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 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":4,
"name":"metadata",
"opacity":1,
"properties":[
{
"name":"openWebsite",
"type":"string",
"value":"changeTile.html"
},
{
"name":"openWebsiteAllowApi",
"type":"bool",
"value":true
}],
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"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],
"height":10,
"id":8,
"name":"changeTile",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":5,
"name":"floorLayer",
"objects":[
{
"height":159.866671635267,
"id":1,
"name":"",
"rotation":0,
"text":
{
"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",
"wrap":true
},
"type":"",
"visible":true,
"width":287.674838251912,
"x":32.5473600365393,
"y":160.305680721763
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":9,
"nextobjectid":2,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.4.3",
"tileheight":32,
"tilesets":[
{
"columns":8,
"firstgid":1,
"image":"tileset_dungeon.png",
"imageheight":256,
"imagewidth":256,
"margin":0,
"name":"TDungeon",
"spacing":0,
"tilecount":64,
"tileheight":32,
"tiles":[
{
"id":0,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":1,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":2,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":3,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":4,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":8,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":9,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":10,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":11,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":12,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":16,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":17,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":18,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":19,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":20,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
}],
"tilewidth":32
},
{
"columns":8,
"firstgid":65,
"image":"floortileset.png",
"imageheight":288,
"imagewidth":256,
"margin":0,
"name":"Floor",
"spacing":0,
"tilecount":72,
"tileheight":32,
"tiles":[
{
"id":34,
"type":"Red"
},
{
"id":44,
"type":"blue"
}],
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":1.4,
"width":10
}