Initialise iframeListener in preload

Add documentation and CHANGELOG
This commit is contained in:
GRL 2021-07-29 15:53:27 +02:00
parent 5f7361156b
commit eb8404ac91
4 changed files with 87 additions and 58 deletions

View File

@ -1,4 +1,11 @@
## Version 1.4.x-dev ## Version develop
### Updates
- New scripting API features :
- Use `WA.room.loadTileset(url: string) : Promise<number>` to load a tileset from a JSON file.
## Version 1.4.10
### Updates ### Updates

View File

@ -23,7 +23,7 @@ async function startOneUser(): Promise<void> {
bottom: 200, bottom: 200,
left: 500, left: 500,
right: 800 right: 800
}); }, null);
const connection = onConnect.connection; const connection = onConnect.connection;

View File

@ -163,3 +163,17 @@ WA.room.setTiles([
{x: 9, y: 4, tile: 'blue', layer: 'setTiles'} {x: 9, y: 4, tile: 'blue', layer: 'setTiles'}
]); ]);
``` ```
### Loading a tileset
```
WA.room.loadTileset(url: string): Promise<number>
```
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'}]);
})
```

View File

@ -220,6 +220,9 @@ export class GameScene extends DirtyScene {
//hook preload scene //hook preload scene
preload(): void { preload(): void {
//initialize frame event of scripting API
this.listenToIframeEvents();
const localUser = localUserStore.getLocalUser(); const localUser = localUserStore.getLocalUser();
const textures = localUser?.textures; const textures = localUser?.textures;
if (textures) { if (textures) {
@ -548,7 +551,6 @@ export class GameScene extends DirtyScene {
); );
this.triggerOnMapLayerPropertyChange(); this.triggerOnMapLayerPropertyChange();
this.listenToIframeEvents();
if (!this.room.isDisconnected()) { if (!this.room.isDisconnected()) {
this.connect(); this.connect();
@ -1084,64 +1086,70 @@ ${escapedMessage}
}) })
); );
iframeListener.registerAnswerer("loadTileset", (eventTileset) => { iframeListener.registerAnswerer("loadTileset", (eventTileset) => {
const jsonTilesetDir = eventTileset.url.substr(0, eventTileset.url.lastIndexOf("/")); return this.connectionAnswerPromise.then(() => {
//Initialise the firstgid to 1 because if there is no tileset in the tilemap, the firstgid will be 1 const jsonTilesetDir = eventTileset.url.substr(0, eventTileset.url.lastIndexOf("/"));
let newFirstgid = 1; //Initialise the firstgid to 1 because if there is no tileset in the tilemap, the firstgid will be 1
const lastTileset = this.mapFile.tilesets[this.mapFile.tilesets.length - 1]; let newFirstgid = 1;
if (lastTileset) { const lastTileset = this.mapFile.tilesets[this.mapFile.tilesets.length - 1];
//If there is at least one tileset in the tilemap then calculate the firstgid of the new tileset if (lastTileset) {
newFirstgid = lastTileset.firstgid + lastTileset.tilecount; //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, () => { return new Promise((resolve, reject) => {
let jsonTileset = this.cache.json.get(eventTileset.url); this.load.on("filecomplete-json-" + eventTileset.url, () => {
this.load.on("filecomplete-image-" + jsonTilesetDir + "/" + jsonTileset.image, () => { let jsonTileset = this.cache.json.get(eventTileset.url);
//Add the firstgid of the tileset to the json file this.load.image(
jsonTileset = { ...jsonTileset, firstgid: newFirstgid }; jsonTilesetDir + "/" + jsonTileset.image,
this.mapFile.tilesets.push(jsonTileset); jsonTilesetDir + "/" + jsonTileset.image
this.Map.tilesets.push(
new Tileset(
jsonTileset.name,
jsonTileset.firstgid,
jsonTileset.tileWidth,
jsonTileset.tileHeight,
jsonTileset.margin,
jsonTileset.spacing,
jsonTileset.tiles
)
); );
this.Terrains.push( this.load.on("filecomplete-image-" + jsonTilesetDir + "/" + jsonTileset.image, () => {
this.Map.addTilesetImage( //Add the firstgid of the tileset to the json file
jsonTileset.name, jsonTileset = { ...jsonTileset, firstgid: newFirstgid };
jsonTilesetDir + "/" + jsonTileset.image, this.mapFile.tilesets.push(jsonTileset);
jsonTileset.tilewidth, this.Map.tilesets.push(
jsonTileset.tileheight, new Tileset(
jsonTileset.margin, jsonTileset.name,
jsonTileset.spacing jsonTileset.firstgid,
) jsonTileset.tileWidth,
); jsonTileset.tileHeight,
//destroy the tilemapayer because they are unique and we need to reuse their key and layerdData jsonTileset.margin,
for (const layer of this.Map.layers) { jsonTileset.spacing,
layer.tilemapLayer.destroy(false); jsonTileset.tiles
} )
//Create a new GameMap with the changed file );
this.gameMap = new GameMap(this.mapFile, this.Map, this.Terrains); this.Terrains.push(
//Destroy the colliders of the old tilemapLayer this.Map.addTilesetImage(
this.physics.add.world.colliders.destroy(); jsonTileset.name,
//Create new colliders with the new GameMap jsonTilesetDir + "/" + jsonTileset.image,
this.createCollisionWithPlayer(); jsonTileset.tilewidth,
//Create new trigger with the new GameMap jsonTileset.tileheight,
this.triggerOnMapLayerPropertyChange(); jsonTileset.margin,
resolve(newFirstgid); 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();
}); });
}); });
} }