P2P messaging to sync scene components

The Mission

Resources

We'll explain how to sync a few key components of your scene using P2P between players.
​
This guide is intended to make a simple scene without much gameplay, if you want to make a more complex multiplayer scene, take it as a base.

• Decentraland SDK
• Decentraland components docs
• Decentraland P2P guide

Before start

---

If you already have an advanced knowledge of decentraland maybe you want to skip this guide and go straight to the finished tutorial project on github.

ai47patos/dcl-p2p-example (github.com)

We'll asume that you have some basic knowledge of making a basic game in typescript using decentraland components, if you need to know more about Decentraland components check the following docs:

Entities and components | Decentraland

It would be nice to if you check before starting the Decentraland docs about using P2P messaging, but won't be necesary as we'll cover this in the guide:

About multiplayer scenes | Decentraland

Prepare your component

---

If you already know everything about DCL components and input on entities you can skip this part.

​Download the code here if you want to follow the example used in this guide

game.ts
File Size:	1 kb
File Type:	ts

Download File

---

For the sake of this guide we'll use a very simple component to change the color of a BoxShape entity, and the spawn cube function provided by the init example DCL project. Of course you can adapt this guide to use it with your own project and components.

Code

To our new ColorComponent we'll add some functions that will be usefull to manage the component via player input or P2P message

Code

To get everything ready for start coding our P2P messages, we'll finish first the update from our local player input, if you don't know how to do that I recomend to check the Decentraland docs for input in entities

Code

One last thing, lest make an array of 3 cubes to manage instead of only one.

Code

Now we have 3 cubes that chage color, ready in a local only scene

P2P messages

---

To simulate multiple players in your local scene, open the decentraland preview in two different browser windows

First we need to define the structure of our messages with the data we want to transmite, in this tutorial this structure is simple, but in your game be careful with this part, the more information you need to transmit the slower will be te updates. Always try design your game to reduce the amount of data transmited.

Code

Make a function to update the entities with a recived CubeState

Code

Before making any messages we need to have an unique player ID, you can make your own system, but since the decentraland player names are unique we'll use them in this tutorial

Messages that are sent by a player are also picked up by that same player. The .on method can’t distinguish between a message that was emitted by that same player from a message emitted from other players.

​For this reason its a good idea to have unique player IDs, to prevent state updates with your own emmited message.

Code

Code

Now we can start with the P2P code, make a function to capture emmited messages

Code

And in the ColorComponent, when the local player change the color, send a message with the new color index.

Code

The game is ready now, open the preview in two browser and check the cubes change colors in both windows.

Alex Picazo

PROGRAMMER

Videogame programmer, love developing cool stuff. Always searching for new interesting stories

LINKEDIN