Let’s say, you want to design a game with a room where everyone can join and sync their positions with each other. This is the most common scenario for an MMO game.

The problem with multiplayer games

There are several problems commonly faced by developers of multiplayer games:

1. A player has many states, such as x/y position, scale, costume, etc. If only one property of a player has been changed, do we need to transfer all of their data? Can we only transfer the patches?
2. How can we ensure others will receive the notification when one state changes?
3. How to define the properties of each state, and keep them synced?

Getting Started

Create a project and use the Simple MMO extension

To start a project, simply go to https://cocrea.world/gandi .

On the left side of your screen, you will find the extension button. Click it.

Find the extension called Gandi Simple MMO, as shown below, and install it.

Blocks you need to use

In this case, we need to use the following blocks:

For connecting to the server:

For changing my states:

And a shortcut for setting x and y positions in one block:

Getting the state from others:

For monitoring state changes:

Create a room and get connected

To do that, you can simply use this snippet:

Now, click the checkbox on “my session ID”.

Once you connect to the room by clicking the green flag, your session ID will be displayed on the screen.

Once you are connected to a room, you can now change your state.

Change state

To change state, for instance, your x and y position, simply use code like this:

If you want to change other preset properties, for example, you want to use extra data to store the current costume number, the code will be like this:

That’s it! Now, the x and y position and costume number will be synced to others in the room.

In the next step, we want to monitor another player's property when it changes.

Monitoring state changes

The server will assign a unique session ID for players each time connect to the server. Session ID is a key to identify a particular player in the room.

If someone in the room changes their state, everyone in the room will receive a notification:

In this event, you can use three private variables: sessionId, name, and data.

{ 
  "name":"my name",
  "scale":0,
  "direction":0,
  "sessionId":"cqwEfASi6",
  "uuid":"1531818082145767425",
  "extra":"1",
  "connected":true 
}

You can decode the data to find the changes. Or you can get a property of the player with the session Id, by using the code snippet shown below:

Usage example

When you are familiar with the code above, we can now combine these.

Key points:

1. Use a clone to represent each player connected to a room
2. Create a null sprite to handle all network communication
3. Use the “Dolly” extension to clone a sprite and store the session ID to the clone
4. [Optional] Use the “Terminal” extension for quick debugging

Install extensions

In this usage example, we will use these three extensions.

Create a sprite with costumes for representing players in a room

In Gandi IDE, you can use the assets store to find the assets you like:

In this case, we create a sprite with 3 costumes.

After that, create an empty sprite named Cloud for dealing with network connections.

Deal with the cloud connections

Each time a player connected to the room, we will create a clone of the sprite named Players. So we need to hide Players when the green flag is clicked.

In the Cloud sprite, choose a random costume for me as a player, and use extra data to exchange my costume with others.

When I connect to a room, create a clone of Players and set the session ID to this clone.

Back to the Players Sprite, you can access the key-value set above when Players start as a clone.

Each time when Players starts as a clone, the event hat will be triggered. When my session ID is equal to the value of the event, which represents me in the room, we should change the costume to myCostumeNumber, go to a random position and report my new x and y position to the server. Otherwise, it will represent others in the room, so that they can switch costumes and go to the position synced from the server.

Now, we need to monitor keyboard events to change my state, and sync to the server.

If the clone is not me in the room, go to the position synced from the server. So we need to modify the code above to this:

Finally, we should remove the clone representing them when someone left the room.

Now you can publish the project and open two windows to test your simple state sync game.

However, you might find the first opened window will have two sprites on the screen, but the second opened window only contains one sprite. This is a bug because when the second player connected to the room, the room already had one player.

Next, we are going to fix this bug.

Clone all players in the room

To fix this bug, we should check for each player in the room, and create a clone if the clone does not exist in the stage.

We can define a block like this:

The program will loop up a clone with the session ID in this function. If the ID is empty, clone one.

Now we can change the code below the previous “When new player connected” event to call this function:

And when I connect to the room, run a for loop to create clones if they do not exist yet.

Templates and Documents

[ The open-sourced template will be attached before Aug ]

You might be interested in …

Simple MMO

Dolly