Multi-player functionality

[socialdecisionlab]

Description: I should be able to (1) see where other players are, (2) what is their water status, and (3) not collide with them.

Status: So far, I was able to get X and Y location of each player to propagate and be saved to database.

Todo: Add another player Move all players propagate water status

[socialdecisionlab]

6/12 Update I uploaded a new version to my branch, where multiple players are presented and moving, but still need to find out how to propagate movement across players. main things I learned and changed:

Communication from phaser to empirica:

In the phaser game code (Game.js) use EventBus.emit('Message', parameters) to send information to the react part of the code. We use it three times,

1. to emit a message the the scene is ready: EventBus.emit('current-scene-ready', this);
   2. to emit a message that a player joined the experiment:
      EventBus.emit('player_generated', this.gridEngineConfig.characters[0]);
   3. when the player moved into a new tile: EventBus.emit('position-change',this.playerID, enterTile.x, enterTile.y);

These can be read in react, in the GridWorld.jsx file using:

EventBus.on('player_generated',(message)=>{ commands.... });

I used it to add the new player to the players array, and to update the player's position in the players array.

From react to phaser:

You can call a function from phaser in the react file, and send information as parameter to it. In the GridWorld.jsx file, after creating the players array, I call a function: scene.AddPlayers(ThisPartners,player.get("participantIdentifier"));//send new players to This sends the new players array called ThisParners and the current player's name to the AddPlayers function in phaser (Game.js) I also use it to update players position: scene.MovePlayers(ThisPartners);

In the phaser code, in Game.js, I created functions that receive these parameters to populate the grid and to update players' positions: e.g. AddPlayers (players,curPlayerID) {...};

Logic of adding players to the grid: I changed Natalia's code, which added one player to the GridEngine characters array, and instead I populate this array in the AddPlayers function. I loop through all players in the players array, and push them to the characters array. I then generate the config command to populate the grid. This allowed me to have all players with the name they input in the beginning of the experiment, all on the grid. It also meant that I broke some of Natalia's nice animations - I think it is possible to recover them but did not manage to do it yet. For the time being they are commented out.

Logic of position share between players: Whenever a player enters a new tile, it sends its location to react. This is then updated in the players array which is sent back to phaser. I then loop over all players, and update the character position of all players. This means that whenever someone moves he will also see the new position of all other players. The problem I still have is that position update is triggered by the player's own movement, and does not triggered automatically when other players move. It is also very glitchy. I still cannot find how to trigger the position update when other players move. I think it can be done using a react hook and a UseEffect https://react.dev/reference/react/useEffect but I am not sure exactly how to implement it yet, or what should be the trigger.

That's it for today :)

[nataliavelez]

Wow, @socialdecisionlab, this is a really exciting update!! I’m excited to dig into the code and see how you changed things. No problem re: animations - it’s an easy fix :)