From eb8404ac918b9229835519c514cc8190618e5955 Mon Sep 17 00:00:00 2001 From: GRL Date: Thu, 29 Jul 2021 15:53:27 +0200 Subject: [PATCH] Initialise iframeListener in preload Add documentation and CHANGELOG --- CHANGELOG.md | 9 ++- benchmark/index.ts | 2 +- docs/maps/api-room.md | 14 ++++ front/src/Phaser/Game/GameScene.ts | 120 +++++++++++++++-------------- 4 files changed, 87 insertions(+), 58 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 11435ad5..3fea20dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,11 @@ -## Version 1.4.x-dev +## Version develop + +### Updates +- New scripting API features : + - Use `WA.room.loadTileset(url: string) : Promise` to load a tileset from a JSON file. + + +## Version 1.4.10 ### Updates diff --git a/benchmark/index.ts b/benchmark/index.ts index 05928dd1..05471a12 100644 --- a/benchmark/index.ts +++ b/benchmark/index.ts @@ -23,7 +23,7 @@ async function startOneUser(): Promise { bottom: 200, left: 500, right: 800 - }); + }, null); const connection = onConnect.connection; diff --git a/docs/maps/api-room.md b/docs/maps/api-room.md index ca708b29..579b3f58 100644 --- a/docs/maps/api-room.md +++ b/docs/maps/api-room.md @@ -163,3 +163,17 @@ WA.room.setTiles([ {x: 9, y: 4, tile: 'blue', layer: 'setTiles'} ]); ``` + +### Loading a tileset +``` +WA.room.loadTileset(url: string): Promise +``` +Load a tileset in JSON format from an url and return the id of the first tile of the loaded tileset. + +You can create a tileset file in Tile Editor. + +```javascript +WA.room.loadTileset("Assets/Tileset.json").then((firstId) => { + WA.room.setTiles([{x: 4, y: 4, tile: firstId, layer: 'bottom'}]); +}) +``` \ No newline at end of file diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 7c3a07f5..11753bf6 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -220,6 +220,9 @@ export class GameScene extends DirtyScene { //hook preload scene preload(): void { + //initialize frame event of scripting API + this.listenToIframeEvents(); + const localUser = localUserStore.getLocalUser(); const textures = localUser?.textures; if (textures) { @@ -548,7 +551,6 @@ export class GameScene extends DirtyScene { ); this.triggerOnMapLayerPropertyChange(); - this.listenToIframeEvents(); if (!this.room.isDisconnected()) { this.connect(); @@ -1084,64 +1086,70 @@ ${escapedMessage} }) ); 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); - this.Map.tilesets.push( - new Tileset( - jsonTileset.name, - jsonTileset.firstgid, - jsonTileset.tileWidth, - jsonTileset.tileHeight, - jsonTileset.margin, - jsonTileset.spacing, - jsonTileset.tiles - ) + return this.connectionAnswerPromise.then(() => { + 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.image( + jsonTilesetDir + "/" + jsonTileset.image, + jsonTilesetDir + "/" + jsonTileset.image ); - this.Terrains.push( - this.Map.addTilesetImage( - jsonTileset.name, - jsonTilesetDir + "/" + jsonTileset.image, - jsonTileset.tilewidth, - jsonTileset.tileheight, - jsonTileset.margin, - jsonTileset.spacing - ) - ); - //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.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); + this.Map.tilesets.push( + new Tileset( + jsonTileset.name, + jsonTileset.firstgid, + jsonTileset.tileWidth, + jsonTileset.tileHeight, + jsonTileset.margin, + jsonTileset.spacing, + jsonTileset.tiles + ) + ); + this.Terrains.push( + this.Map.addTilesetImage( + jsonTileset.name, + jsonTilesetDir + "/" + jsonTileset.image, + jsonTileset.tilewidth, + jsonTileset.tileheight, + jsonTileset.margin, + jsonTileset.spacing + ) + ); + //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); + this.load.on("loaderror", () => { + console.error("Error while loading " + eventTileset.url + "."); + reject(-1); + }); + + this.load.json(eventTileset.url, eventTileset.url); + this.load.start(); }); - this.load.on("loaderror", () => { - console.error("Error while loading " + eventTileset.url + "."); - reject(-1); - }); - this.load.json(eventTileset.url, eventTileset.url); - this.load.start(); }); }); }