Multiplayer Network Games - Adding Network Sprites

[info-creaticode]

Introduction

 

In a multiplayer network game, sprites are still the key building blocks, just like any ordinary Scratch project. However, sprites can be either “network sprites” or “local sprites”.

• Local sprites are just ordinary sprites, same as what we have in MIT Scratch. A local sprite will only live in one player’s playground, and other players in the game will not see it. Also, the game server will not know about these sprites.

• Network sprites are managed by the game server. When player A creates a network sprite, the game server will start to keep track of this sprite, and a copy of this sprite will be created in all other players’ playgrounds. When player A moves this network sprite, the game server will make sure all the copies of this sprite also move the same way on other players’ computers.

 
 

Example

 

For example, suppose we are creating a multiplayer space-shooter game. How do we determine which sprites are “network sprites”?

For a simple rule-of-thumb, all sprites that interact with other sprites should be network sprites, such as spaceships, shells, asteroids, powerups, etc. For example, when a spaceship sprite is created, it should be added as network sprite, so that the game server keeps track of its position, and manages its copies on other players’ computers.

On the other hand, the local sprites would be sprites used for decoration or information, such as stars in the background that don’t interact with any other sprites, or healthbars/scores displayed on top of stage. For example, for the stars, they should be created on each player’s computer when they start the project.

In general, local sprites are created by every player on their own computers, and the game server doesn’t know about them. Network sprites are created by one player’s computer, and the game server manages its copies on other players’ computers.

 
 

Use Clones Instead of Sprites

 

Clones are an excellent tool for reusing code. Imagine we are creating a 4-player network car-race game, where each player controls one car from his/her computer.

A naive way to create this game is to use 4 sprites, such as “car A”, “car B”, “car C”, “car D”. Most of the code in these 4 sprites would be identical, except for the player name or costume of the car.

A much better solution is to only use one “car” sprite, and whenever a player creates or joins the game, create one new clone of this car sprite, and the game server will create clones of this sprite on all other players’ computers (the “remote copies”).

 
 

Adding a Sprite (Clone) to the Game Network

 

To add a sprite (clone) to the game network, you can use the following block:

 
The first input can be “Dynamic” or “Static”: dynamic sprites can move during the game, while static sprites will stay at the same position.

The second input is the shape of this sprite’s “collider”. It is either “Circle” or “Rectangle”. This is used to approximate the shape of the sprite for collision detection. When a sprite moves, the game server needs to check if it is colliding with other sprites or the world boundary. To make this calculation fast, we simply assume the sprite is a circle or a rectangle, like this:

 

When this block runs, a copy of this sprite will be created on other players’ computers at the same position.

 
 

Removing a Sprite from the Game Network

 

When we no longer need a sprite or clone, we can tell the game server to remove it from the game, so that the game server will no longer keep track of its movement, and its copies on other computers will be deleted as well. This can be done using the following block:

 
 

Demo Project

 

In this demo project, one player controls a blue ball and the other controls a yellow ball. The first player repeatedly creates clones of the blue ball, which is placed at a random position, and then added to the game network. When that happens, a copy of the blue ball will appear on the second player’s stage. Similarly, the second player repeatedly creates clones of the yellow ball, which are added to the game server, and copies are created on the first player’s computer.

After each clone is created, we wait some time, then remove the clone, and its copy on the other player’s computer will be removed as well.

To run it:

1. In the first browser tab, run the create game stack in the “BlueBall” sprite:

2. In the second browser tab (a different computer or an incognito window), log in as a different user, and run the join game stack in the “YellowBall” sprite:

3. In the first browser tab, run the repeat loop in the “BlueBall” sprite, which will create clones of the blue ball, add them to the game network:

4. In the second browser tab, run the same code, but in the “YellowBall” sprite:

5. As a result, you should see the same result in both computer tabs, with blue/yellow balls appearing and disappearing at the same positions:

 
Here is the demo project:

https://play.creaticode.com/projects/6604dcdd25dc753d5b677537