Create your own world with WorkAdventure – how we got on

Video chat systems such as Microsoft Teams or Big Blue Button have replaced meetings, afterwork drinks and often even how we stay connected with our family and friends. But they just don’t feel the same. People talk with a greater sense of purpose than they would, had they bumped into each other in the corridor or were casually chatting to the person sitting next to them. How do you recreate the familiar feeling of being in an office, meeting someone by chance at a conference or having a spontaneous afterwork get-together online?

In response to this question, the French manufacturer TCM invented an open-source platform called ‘WorkAdventure’, which allows users to recreate any location as a 2D video game. When two avatars cross paths, a video chat appears on the screen so that they can hear and see each other. Entering special meeting areas automatically adds users to an embedded conference call. Stopping in front of a pinboard opens the pinned note as a web page. Certain areas contain sound streams, meaning even the sound of the coffee machine can be recreated. ‘Doors’ into other rooms create multi-storey office buildings or arbitrarily complex labyrinths.

The system is based on the WebRTC standard, meaning there is hardly any load on the server. The avatars in a room share their positions and the video chats stream directly from browser to browser. An external Jitsi server is integrated for larger meeting rooms.

Until a few months ago, WorkAdventure was largely unknown. It gained a boost in development and popularity in December 2020 when the Chaos Computer Club forked the platform, rapidly expanded it and used it to hold its virtual annual congress. This meant attendees were not only able to stroll through colourful halls and meet people almost as usual, but also dock their own rooms onto the exhibition hall. The collision of worlds created a tangled labyrinth in which they could discover new things for days on end and in which, by the time the event came to a close, nobody had seen everything.

New fields of application have emerged since the features and bug fixes from the major winter update were integrated: artistically skilled teachers can draw learning islands for their remote lessons that see the students actively search for tasks and solutions. Clubs are turning their regular get-togethers into virtual ones online. There are already methods to develop an ‘Internet of Gardens’, which see community gardens create digital versions of their beds so they can visit each other or, for example, to discuss assignments ‘on site’, which can only be done individually at the moment. Even a church in Husum has gone digital as a game to hold virtual confirmation classes. The recent Chemnitz Linux Days events saw an entire congress centre complete with exhibition stands and lecture halls given the pixel treatment.

The developing community is also staying tuned. Since TCM does not adopt all the changes from the scene, enthusiasts have splintered off and created the ‘WorkAdventure XCE’ community fork. The project is regularly synchronised with the original code and supplements it with all of its freely developed improvements.

The software, written in TypeScript, comes with a Docker compose that launches four containers. This way, everyone can easily run their own instance without incurring major costs. However, it does not include a Jitsi installation; an existing server must be integrated for this. But since WorkAdventure is very economical with resources, unlike Jitsi, the vastly different hardware requirements mean separate machines are needed anyway.

From idea to on-screen reality: how we recreated an adesso office in WorkAdventure

How do you turn the vision you have in your head into a 2D game? Let’s use the example of adesso’s virtual office in Hanover to show you. A room – called the map – consists of square tiles, each of which is 32 x 32 pixels. Each tile is covered with an image from a selection of small graphics – the tilesheet. Any number of layers can be stacked so that transparent tiles are also visible.

First of all, you should briefly consider what the environment looks like: floors, walls, possibly doors and windows. Plus the fixtures and fittings, objects, plants. There are plenty of suitable tilesheets available as Creative Commons. You’ll have to design anything you can’t already find on the web yourself. Free graphics programs such as GIMP or Krita are a good option for this. It’s best to place a 32-pixel grid over the graphic and colour it so that each cell is occupied by a maximum of one image. The tilesheet is simply saved as a PNG file. The tilesheets in the WorkAdventure starter kit were more than enough for our virtual office to begin with – although that doesn’t rule out us adding some of our own images in the future.

The finished tilesheets are now put together like Lego bricks to create the 2D world. The free editor Tiled is good for this. In Tiled, you first define the size of the new map in number of tiles. You can then create layers, such as a floor layer for the carpet and walls, a fixtures layer for the furniture and so on. Each layer can be coloured using tiles from any number of tilesheets. The map is saved as a JSON file, including all of the tilesheet information. Later, you only need to publish the PNG files and a JSON file, and the map can be played on any WorkAdventure instance.

Special layers control the interaction between users and the map. The empty floor layer, for example, determines where the playing figures are located vertically. Your avatar walks over the layers underneath it, while those above it obscure it. On a start layer, only the tile on which the avatar will spawn at the beginning of the game is filled; the name of the desired start layer is later added to the URL so you can jump into the game at a certain point.

Another important aspect is what are known as collisions. They prevent avatars from running through walls or jumping out of windows. The ‘collides’ property in the tilesheet determines whether a tile collides, or in other words, cannot be entered. However, experience shows that it’s rarely useful to always let fixed tiles collide. The more practical option is to define an invisible tile that is the only one that cannot be entered. This makes it easy to colour the desired collisions on a hidden layer and change them later when you need to.

A layer with the property ‘openWebsite’ can be used to displayed additional information. When a user enters a tile on this level, the URL stored in it opens on the right-hand side of the screen. It might be annoying if the WebRTC video chat opens while several people are reading the website. The layer property ‘silent’ stops this from happening: New video chats can’t start on fields that are filled with a tile in a silent layer.

Kitchenettes and meeting rooms should allow more people to talk at the same time than can fit into the overlay chat. To do this, mark a layer with the property ‘jitsiRoom’ and enter the name of the room. If someone enters a tile on this level, the Jitsi conference of the same name slides across the right half of the screen as a frame.

Does the building have multiple floors or transitions to other buildings? Maybe we’d like to add some hidden rooms? The layer property ‘exitUrl’, which stores a URL of another map, allows us to do that. As soon as you enter a tile filled on this level, WorkAdventure discards the current map, loads the new one and places your avatar on a tile on the start layer included in the URL.

It’s now time to turn our attention to how things sound. You can also set sounds for each location using the layer property ‘playAudio’ or ‘playAudioLoop’, which contains the URL of an MP3 file. Anyone who enters a tile on this layer will hear the appropriate sound.

The finished map can now be published. Upload the JSON and PNG files to any web space to publish the map. The start URL of the map is now ‘https://[WA-Instanz]/_/global/[meinUrl]/meineMap.json’.

Basically, each instance loads each map JSON, but only the users on the same instance see each other. This means you don’t just meet in the same room, but also on the same server. Short URLs and redirects have been established to make sure players don’t miss each other. These are especially popular under the domain .world. For example, the meeting place of the ‘KrautSpace’ association can be found at https://kraut.world/index_en.html.

The possibilities of WorkAdventure are limited, but the simplicity with which worlds can be designed and connected is impressive. The XCE project will speed up the development of new features. The platform is growing in relevance by the day at the moment, so it’s definitely worth keeping an eye on it.

If you would like to learn more about exciting topics from the world of adesso, then check out our latest blog posts.