Map Building Admin User Developer Tutorials Login Get Started Search ctrl K

Personal area
Build your Map with Tiled Extra Features
Importing the "extended features"
Restricted area
Importing the script in the map
Silent property
Scripting Api Extra Importing the script dynamically from your
Javascript script
Play sound property
Bundling the "Scripting API Extra" library in
Focusable property WorkAdventure features can be extended through the use of the scripting API.
your script

Matrix Chat Room Property This means anyone can write "scripts" that can be imported in any map and that add new properties to WorkAdventure. If you are a
Megaphone developer, do not hesitate to have a look at the scripting API and to create your own custom properties / features.

Entity collections file format The WorkAdventure team also provides its own scripts that add various features. We put those features in a common package we call
Build your Map with Tiled Scripting API Extra.

Publishing your map

In this section, you will find a list of these extended features.
Upload your Map to
WorkAdventure

Host your Map with GitHub Importing the "extended features"

Pages
Because a script is hosting the extended features, you need to import that script explicitly into your map.
Self-Hosting your Map

About WorkAdventure maps There are 3 ways to import those extended features:

Entries and exits importing the "Scripting API Extra" library directly in your map
Opening a website when walking or importing the "Scripting API Extra" library dynamically from your Javascript script
on the map
or bundling the "Scripting API Extra" library in your own script using NPM and a bundler like Webpack or Vite
Meeting rooms

Special zones TIP

Animations If you are using the Map Starter Kit (as recommended in the WorkAdventure documentation) the "extended features" are already
imported in your map for the src/main.ts file of the starter kit. You can skip the following chapters.
Integrated websites

Camera

Writing text on a map Importing the script in the map

Chat zones
DANGER
Extra Features
We do not recommend this method because you will not be able to import other scripts in your map.
Adding doors

Bells / Knocking on a door You can do so by adding a script property at the top level of your map, pointing to the URL:
https://cdn.jsdelivr.net/npm/@workadventure/scripting-api-extra@^1/dist/bundle.js

Importing the "Scripting API Extra" library

using the "script" property.

REMINDER

To access the map properties in Tiled, you can click on the Map > Map Properties menu.

Importing the script dynamically from your Javascript script

If you already have a Javascript script in your map, you can import the scripting API as a module.

CAUTION

This method is only recommended for simple scripts. If you are using a Javascript bundler (like Webpack) to build your Javascript
script, have a look at the next section.

To import the "Scripting API Extra" library dynamically from your script, at the top of your JS script, add this line:

import { } from "https://cdn.jsdelivr.net/npm/@workadventure/scripting-api-extra@^1";

Bundling the "Scripting API Extra" library in your script

If you already have a script in your map and if this script is built using a bundler like Webpack or Rollup (this is the case if you are using
the WorkAdventure Map Starter Kit), you can import the "Scripting API Extra" library as a "dependency" of your script.

NOTE

The WorkAdventure Map Starter Kit is already importing the Scripting API Extra library as a dependency, so you have nothing to do
if you use it for your map.

npm install --save @workadventure/scripting-api-extra

CAUTION

Here, we assume that the script you wrote is using a bundler (like Webpack) and that you already have dependencies in your
project using a package.json file. If you are not familiar with NPM, or bundlers, we highly recommend using the WorkAdventure
Map Starter Kit that comes with sane defaults.

Once the "Scripting API Extra" library is imported, you still need to initialize it. This can be done by calling a single bootstrapExtra()
method:

import { bootstrapExtra } from "@workadventure/scripting-api-extra";

// Calling bootstrapExtra will initiliaze all the "custom properties"

bootstrapExtra();

Edit this page

Previous Next
« Chat zones Adding doors »

Docs Need help ? Follow us

Map Building Book a demo Linkedin

Admin Discord Twitter

Developer GitHub Facebook

Copyright © 2024 workadventu.re - All Rights Reserved