diff --git a/docs/maps/api-room.md b/docs/maps/api-room.md index 7d438a1f..fa315abf 100644 --- a/docs/maps/api-room.md +++ b/docs/maps/api-room.md @@ -8,6 +8,7 @@ If you use group layers in your map, to reference a layer in a group you will ne together. Example : +
@@ -16,10 +17,10 @@ Example : The name of the layers of this map are : -* `entries/start` -* `bottom/ground/under` -* `bottom/build/carpet` -* `wall` +- `entries/start` +- `bottom/ground/under` +- `bottom/build/carpet` +- `wall` ### Detecting when the user enters/leaves a layer @@ -30,17 +31,18 @@ WA.room.onLeaveLayer(name: string): Subscription Listens to the position of the current user. The event is triggered when the user enters or leaves a given layer. -* **name**: the name of the layer who as defined in Tiled. +- **name**: the name of the layer who as defined in Tiled. Example: -```javascript -WA.room.onEnterLayer('myLayer').subscribe(() => { - WA.chat.sendChatMessage("Hello!", 'Mr Robot'); +```ts +const myLayerSubscriber = WA.room.onEnterLayer("myLayer").subscribe(() => { + WA.chat.sendChatMessage("Hello!", "Mr Robot"); }); -WA.room.onLeaveLayer('myLayer').subscribe(() => { - WA.chat.sendChatMessage("Goodbye!", 'Mr Robot'); +WA.room.onLeaveLayer("myLayer").subscribe(() => { + WA.chat.sendChatMessage("Goodbye!", "Mr Robot"); + myLayerSubscriber.unsubscribe(); }); ``` @@ -56,10 +58,10 @@ layer in that group layer. Example : -```javascript -WA.room.showLayer('bottom'); +```ts +WA.room.showLayer("bottom"); //... -WA.room.hideLayer('bottom'); +WA.room.hideLayer("bottom"); ``` ### Set/Create properties in a layer @@ -76,8 +78,8 @@ To unset a property from a layer, use `setProperty` with `propertyValue` set to Example : -```javascript -WA.room.setProperty('wikiLayer', 'openWebsite', 'https://www.wikipedia.org/'); +```ts +WA.room.setProperty("wikiLayer", "openWebsite", "https://www.wikipedia.org/"); ``` ### Get the room id @@ -92,9 +94,9 @@ The ID of the current room is available from the `WA.room.id` property. ```typescript WA.onInit().then(() => { - console.log('Room id: ', WA.room.id); + console.log("Room id: ", WA.room.id); // Will output something like: 'https://play.workadventu.re/@/myorg/myworld/myroom', or 'https://play.workadventu.re/_/global/mymap.org/map.json" -}) +}); ``` ### Get the map URL @@ -109,9 +111,9 @@ The URL of the map is available from the `WA.room.mapURL` property. ```typescript WA.onInit().then(() => { - console.log('Map URL: ', WA.room.mapURL); + console.log("Map URL: ", WA.room.mapURL); // Will output something like: 'https://mymap.org/map.json" -}) +}); ``` ### Getting map data @@ -122,7 +124,7 @@ WA.room.getTiledMap(): Promise Returns a promise that resolves to the JSON map file. -```javascript +```ts const map = await WA.room.getTiledMap(); console.log("Map generated with Tiled version ", map.tiledversion); ``` @@ -140,6 +142,7 @@ WA.room.setTiles(tiles: TileDescriptor[]): void Replace the tile at the `x` and `y` coordinates in the layer named `layer` by the tile with the id `tile`. If `tile` is a string, it's not the id of the tile but the value of the property `name`. +
@@ -148,10 +151,10 @@ If `tile` is a string, it's not the id of the tile but the value of the property `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. +- **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. @@ -160,12 +163,12 @@ Note: If you want to unset a tile, use `setTiles` with `tile` set to `null`. Example : -```javascript +```ts WA.room.setTiles([ - { x: 6, y: 4, tile: 'blue', layer: 'setTiles' }, - { x: 7, y: 4, tile: 109, layer: 'setTiles' }, - { x: 8, y: 4, tile: 109, layer: 'setTiles' }, - { x: 9, y: 4, tile: 'blue', layer: 'setTiles' } + { x: 6, y: 4, tile: "blue", layer: "setTiles" }, + { x: 7, y: 4, tile: 109, layer: "setTiles" }, + { x: 8, y: 4, tile: 109, layer: "setTiles" }, + { x: 9, y: 4, tile: "blue", layer: "setTiles" }, ]); ``` @@ -179,10 +182,10 @@ Load a tileset in JSON format from an url and return the id of the first tile of You can create a tileset file in Tile Editor. -```javascript +```ts WA.room.loadTileset("Assets/Tileset.json").then((firstId) => { - WA.room.setTiles([{ x: 4, y: 4, tile: firstId, layer: 'bottom' }]); -}) + WA.room.setTiles([{ x: 4, y: 4, tile: firstId, layer: "bottom" }]); +}); ``` ## Embedding websites in a map @@ -199,10 +202,10 @@ WA.room.website.get(objectName: string): Promise You can get an instance of an embedded website by using the `WA.room.website.get()` method. It returns a promise of an `EmbeddedWebsite` instance. -```javascript +```ts // Get an existing website object where 'my_website' is the name of the object (on any layer object of the map) -const website = await WA.room.website.get('my_website'); -website.url = 'https://example.com'; +const website = await WA.room.website.get("my_website"); +website.url = "https://example.com"; website.visible = true; ``` @@ -231,7 +234,7 @@ interface CreateEmbeddedWebsiteEvent { You can create an instance of an embedded website by using the `WA.room.website.create()` method. It returns an `EmbeddedWebsite` instance. -```javascript +```ts // Create a new website object const website = WA.room.website.create({ name: "my_website", @@ -269,10 +272,10 @@ class EmbeddedWebsite { visible: boolean; allow: string; allowApi: boolean; - x: number; // In "game" pixels, relative to the map or player coordinates, depending on origin - y: number; // In "game" pixels, relative to the map or player coordinates, depending on origin - width: number; // In "game" pixels - height: number; // In "game" pixels + x: number; // In "game" pixels, relative to the map or player coordinates, depending on origin + y: number; // In "game" pixels, relative to the map or player coordinates, depending on origin + width: number; // In "game" pixels + height: number; // In "game" pixels origin: "player" | "map"; scale: number; } @@ -282,4 +285,3 @@ When you modify a property of an `EmbeddedWebsite` instance, the iframe is autom {.alert.alert-warning} The websites you add/edit/delete via the scripting API are only shown locally. If you want them to be displayed for every player, you can use [variables](api-start.md) to share a common state between all users. -