On Scratch 3.0, you might notice there is one type of variable: cloud variable. This option is available in Create Variable dialog. However, if you are a “New Scratcher”, you will not see this option. So what is the purpose of using cloud variables? Usually we could store highest game score, the user name who gets the highest score to cloud variable. More than that, we could create multi-player cloud game. On YouTube, some YouTubers have uploaded excellent tutorials to demonstrate the steps. If you would like to try creating multiplayer cloud game, I strongly recommend you to watch the following video series. They are pretty helpful for me to get familiar with the design concept.

However, watching video is not enough for us to learn things. When I follow the above videos to design my first game, I am still confused by some codes. Griffpatch is a great tutor, but the video is running pretty fast. This explains why I write this post. You could find some supplementary information to help you better understand the key issues of multiplayer cloud game.

I will share the project link here in case you would like to read the code. The game demo is shown below. https://scratch.mit.edu/projects/477832015

Designing a scrolling platformer game is a bit complicated, but what about designing a multiplayer scrolling platformer game? Actually, all the multiplayer cloud game needs to solve the four issues:

Four Key Issues for Multiplayer Game

# 1. Encode and Decode Cloud Variables

Per requirement from Scratch 3.0 platform, only numbers are allowed to assign to cloud variable. If the local values contain letters or other chars, we need to convert them to numbers, which is called “encode”. After we get the value of cloud variable, we need to “decode” the value back to get its real meaning. Here, Griffpatch introduced a very convenient method: use “CODE” list as a reference to implement encode and decode. You could find the detailed steps in Part 1 and Part 2 of the videos, and I will not introduce them here.

#2. Assign a Player ID to New User

When a user clicks Green Flag button, the program needs to enroll the user into the cloud game. So how to assign a Player ID to him/her? According to Griffpatch, the Player sprite’s ID is marked by variable “My Player #” and its initial value is 0. The program uses a method, which I will mention at #4, to allocate a value to “My Player #”. If “My Player #” is bigger than 0 after the allocation procedure, it means the user has joined the cloud game. If “My Player #” is still equal to 0, it means the network game is fully packed. The user could still play the game in a single-player mode.

#3. How to Show Other Users Playing the game at the Same Time?

How to display other players on the stage in a multiplayer game? According to Griffpatch, the program creates another sprite, which could be called “opponent players” or similar names. This sprite will get the same costume set as the Player sprite and create several clones. Those clones represent the users playing the game at the same time. What the program needs to do is to continuously decode cloud variables and assign x and y position, costume, username etc. to those opponent player clones.

#4 How to Identify Those Players Leaving the Game?

This is the most tricky part of the cloud game. What if some players leave the game? How to identify who leaves the game? The key is to understand the responsibility of each sprite. For Player sprite, it is responsible for updating its values to a specific cloud variable. For Opponent Player sprite, it is responsible for three things. One is to assign a Player ID to the Player sprite at beginning of the game. The second is to continuously monitor which cloud variable keeps static for a period long enough to indicate that user being offline. The last one is to decode the cloud variable values to make opponent player clones move and change costume.

Based on the above task assignment, let us rethink question #4. Assuming I am the user “Tester1”. I play the game and is assigned a Player ID of 3. If another user exiting the game once used cloud2 variable, soon opponent player sprite will identify the cloud2 variable becoming static. The corresponding opponent player clone will hide itself. This clone will show again only after a new user occupies cloud2 variable and updates it.

Now, assuming we are still user “Tester1”, but we exit the game and our occupied cloud variable cloud3 will keep static. Other users playing the game identify this static cloud3 and their opponent player clone with Player ID of 3 will be hidden. New users could use this variable.

In the following section, I will briefly introduce the added code in Player sprite and Opponent Player sprite to implement cloud game.

Player Sprite

Player sprite is responsible for encoding its values to cloud variable. the method is the same as what Griffpatch introduced, so I will not explain further.

There is one minor change to Griffpatch’s code. Instead of using “round (timer * 10)” to represent a random value, I use “pick random (from 100 to 999)” to create a random value and put it to the 1st item of the to-be-encoded characters. The advantage is that the number would always be 3-digit. Putting it to the 1st item makes it convenient to be decoded and used.

Opponent Sprite

For the opponent sprite, it shoulders more responsibility of cloud game functionality. I will explain those code segments one by one.

In “when Green Flag clicked” segment, the program does some initialization work, such as clearing the lists of “pre_value” and “tick_value”, and using 0 to refill lists. It sets MAX_PLAYER to 4 and Player # to 0.

when Green Flag clicked

“when I receive Setup_opponents” Code Segment, “when I start as a clone” Code Segment

The first step for Opponents Player sprite is to create some clones, which are done in the code segment of “when I receive Setup_opponents”. In “when I start as a clone” code segment, the program will compare My Player # to Player #. Please note that Player # is a local variable, therefore, each clone will have a different Player #, ranging from 1 to 4.

If My Player # is equal to Player #, this clone is representing the current player. Since Player sprite is doing all the stuff, we just make this Opponent Player clone fully transparent. For other Players, the program sets their color effect to 50 to differentiate them from the current player, and then calls a block “Tick” to update their appearance and behavior. The whole idea for this part follows Griffpatch’s instruction, so you could refer to the above videos as reference.

“when I receive Determine ID” Code Segment

In code segment of “when I receive Determine ID”, the program will first get the random value of each Player and store it to a variable “temp1”. After waiting for 3 seconds, it will get the random value of the same cloud variable. If the two values are the same, the program concludes that the cloud variable is not occupied, so the current player is assigned to that Player ID.

Please note that Player # is a local variable. Each clone will execute “when I receive Determine ID” code segment separately, so each cloud variable has been checked.

“Tick” Block Definition

The “Tick” block is responsible for decoding the data from cloud variable and assigning the values to the local clones. The decode method is the same as what Griffpatch introduced. The only difference is that Griffpatch’s code uses a local variable called “pre_value” to store each cloud variable’s previous value. Here, I use a list called “pre_value” to record cloud variables as different items. The advantage is that I could monitor the value of each cloud variable. If using local variable, we could not see their values at run time.

After 0.03 seconds, the Tick block will decode the cloud variable again, but this time, only check its first item: the random value. If the value is the same as that in “pre_value” list, increase the corresponding item’s value by 1 in “tick_value” list. If the value is different, reset item in “tick_value” list to 0 and assign the current value to “pre_value” item. In Griffpatch code, he again uses a local variable called “offline” to record the value. Using “tick_value” list makes it more convenient to record and check values.

“begin decode of encoded” Block and “value = decode the encoded” Block

The two blocks are responsible for decoding the cloud variable and storing it into variable “value”. They just follow Griffpatch’s method, so I will not explain in detail.

“Position” Block

Finally, do not forget that this is a scrolling platformer game, so we should make the Opponents Player clones scroll properly. Since cloud_x and cloud_y are local variables, each Opponents Player clone could position themselves differently on the stage.

That is the major code segments for implementing multiplayer cloud game. Hope you understand better after reading this post and know more about the power of Scratch 3.0. Enjoy the coding and have fun!

Please note: due to Scratch 3.0 platform restriction, this multi-player cloud game could only work on the project creator’s own account. That means, if you create a multiplayer project and login in on different computers using the same account, you could play this multi-player game. However, other persons using different accounts could only play the game in a single-user mode.

Note: All the analysis articles are copyright products of http://www.thecodingfun.com. Anyone re-posting them should credit author and original source. Anyone using them for commercial purposes or translating them into other languages should notify TheCodingFun and get confirmation first. All Rights Reserved.