Polygonal Mind
  • Home
  • Metaverse Builder
  • CryptoAvatars
  • MegaCube
  • Blog
  • Decentraland
  • Projects
  • Assets

Blog

P2P messaging to sync scene components

6/23/2021

0 Comments

 
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
P2P messaging to sync scene components
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
Alex Picazo
PROGRAMMER
Videogame programmer, love developing cool stuff. Always searching for new interesting stories
LINKEDIN
0 Comments



Leave a Reply.

    Categories

    All
    Blender
    CryptoAvatars
    Decentraland
    Decentraland En Español
    Maya
    Metaverse
    Mixamo
    Morphite
    Substance Painter
    The Sandbox
    Totally Reliable Delivery Service
    Unity 3D
    Updates
    Vrchat

    Archives

    March 2022
    July 2021
    June 2021
    May 2021
    April 2021
    March 2021
    February 2021
    January 2021
    December 2020
    October 2020
    August 2020
    July 2020
    June 2020
    May 2020
    April 2020
    March 2020
    February 2020
    December 2019
    October 2019
    September 2019
    August 2019
    June 2019
    May 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2016

    Picture
Home
Projects
Assets

Picture
Crypto
Friendly
Picture

Subscribe to get some 💚 in your inbox once in a while.

Follow us and your visit will never be forgotten!
Picture
Picture
Picture

 © 2015-2022 POLYGONAL MIND LTD. ALL RIGHTS RESERVED.
  • Home
  • Metaverse Builder
  • CryptoAvatars
  • MegaCube
  • Blog
  • Decentraland
  • Projects
  • Assets