🎮

How to Make a Multiplayer Game and Sync its State in Scratch

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:

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?
How can we ensure others will receive the notification when one state changes?
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:

Parameters	Options	Description
Connect or create a room	- Join or create - Create	How the room is created. - Join or create, will join a room if the server with the specified server ID has a room available. If the server doesn’t have a room, it will create one. - Create, will create a new room. A server might contain many rooms, and you can name your server with an ID. We will talk about this in another topic.
Type of room	- Lobby - Match Room - Broadcast	The type of room you want to create or connect to. - Lobby, a special room where all Match Rooms with the same server ID will be listed. - Match Room, a game room that players can connect to. A Match Room can be created a with particular number of slots (room size). All match rooms will be listed in the lobby if they have the same server ID. (Don’t worry: servers in projects are isolated. You cannot access the rooms created by other projects even if the server IDs are the same.) - Broadcast, a simple room like a public forum. It’s similar to the match room, but cannot be listed in the lobby. In this case, choose Broadcast.
serverId	a string	If your game contains multiple rooms, you can isolate them with different server IDs. And of course, you can spread players among rooms by using Match Room as you want. Normally, one project only uses one server ID.
extra data	a string	Extra Data is a preset property for each client. If your game players need to sync settings to others in the room when they are connected to the room, be sure to set extra data while connecting.

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.

Variable Name	Description	Example Value
sessionId	To indicate the state of whom in the room has been changed.	cqwEfASi6
name	Who changed the state.	my name
data	The data, a JSON object, contains all states of the player with that sessionId.	Example as shown below

{ 
  "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:

Use a clone to represent each player connected to a room
Create a null sprite to handle all network communication
Use the “Dolly” extension to clone a sprite and store the session ID to the clone
[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 ]