Build your Map with Tiled#

This document will guide you through the process of creating your own map for WorkAdventure using the Tiled editor.

Tools you will need#

In order to build your own map for WorkAdventure, you need:

• the WorkAdventure Map Starter Kit
• the Tiled editor software
• "tiles" (i.e. images) to create your map
• NodeJS to test your map locally and to upload it to the WorkAdventure server

About the Map Starter Kit#

WorkAdventure comes with a "map starter kit" that we highly recommend using to start designing your map quickly.
It contains a good default tileset for building an office and it contains tools to upload your map on WorkAdventure
or on GitHub Pages. It also comes with a local web server for testing purpose and with
TypeScript support (if you are looking to use the Map Scripting API).

When designing your map with Tiled, there are a number of settings that must absolutely be respected in order to be
compatible with WorkAdventure. The "map starter kit" is already configured with these settings.

Do not try to start a map from scratch. It is much easier to start from the "map starter kit" and customize it.
If you need to create additional maps, copy the "map starter kit" default map and customize it.

Downloading the Map Starter Kit#

Go to the GitHub map starter kit repository page and click the "Code" button.

Then click on the Download ZIP button

Customizing your map#

Loading the map in Tiled#

The sample map is in the file office.tmj. You can load this file in Tiled.

Now, it's up to you to edit the map and write your own map.

Some resources regarding Tiled:

• Tiled documentation
• Tiled video tutorials

Testing your map locally#

In order to test your map, you need a web server to host your map. The "map starter kit" comes with a local web server that you can use to test your map.

To start this web server, you will need Node.JS.

Download and install NodeJS.

Then, open your command line and from the directory of the map, run this command:

$ npm install

This will install the local web server.

$ npm run start

This command will start the web server and open the welcome page. You should see a page looking like this:

From here, you simply need to click the "Test this map" button to test your map in WorkAdventure.

Adding more map files#

If you want to add more maps to your project, no need to duplicate the whole starter kit.
Instead, simply copy and paste the office.tmj file. You can give any name to this file, but it must have the .tmj extension.

From here, you can access your map by modifying the URL in the browser and replacing office.tmj by your new map name.
For example, if you have a map named map2.tmj, you can access it by visiting http://play.workadventure.localhost/_/some_random_chars/localhost:5137/map2.tmj.

Need some help?#

WorkAdventure is a constantly evolving project and there is plenty of room for improvement regarding map editing.
If you are facing any troubles, do not hesitate to seek help in our Discord server or open an "issue" in the GitHub WorkAdventure account.