Updating other player frames for the user. Phaser 3 & socket.io

59 Views Asked by At

I have been struggling updating the other players frame for the user playing in my game. I have gotten to the point of having a new player created for each new connection, each user can walk around and the other users can see their updated position in real time but not a change in their direction due to the frame being at 0 which is down in my case.

// socket.js (server-side)
const socketIo = require("socket.io");
const { v4: uuidv4 } = require('uuid');

const players = {};

function initializeSocket(server, corsOptions) {
  const io = socketIo(server, {
    cors: corsOptions, // Use the provided CORS options from server.js
  });

  io.on("connect", socket => {

    // Generate a unique player ID for the connected player
    const playerId = uuidv4();

    // Display a message to ensure connection
    console.log(`Player ${playerId} connected`);

    // Store the player ID in the `players` object
    players[playerId] = { x: 0, y: 0, frame: 0 };

    // Send the player ID to the connected client
    socket.emit("playerId", playerId);

    // Listen for a change in the players position
    socket.on("playerPosition", (x, y, frame) => {

      // Update players coordinates in the players objects {x, y}
      players[playerId].x = x;
      players[playerId].y = y;
      players[playerId].frame = frame;

      // Broadcast the updated player positions to all connected clients
      socket.emit("updatePlayerPositions", players);

    });

    socket.on("disconnect", () => {
      // Display a message to ensure disconnection
      console.log(`Player ${playerId} disconnected`);
      
      // Remove the disconnected player from the players object {}
      delete players[playerId];

      // Broadcast the updated player positions to all connected clients
      socket.emit("updatePlayerPositions", players);
    });
    
  });

};

module.exports = initializeSocket;

This code below is from Socket.js on client-side...

    handleSocketEmitPlayerPosition(x, y, frame){
        this.socket.emit("playerPosition", x, y, frame.name);
    };

This code below gets called at the end of my Player update() function...

    this.socket.handleSocketEmitPlayerPosition(this.x, this.y, this.frame);

This code below is from my GameScene class (I made a comment showing what line causes an error when uncommented)...

    updatePlayerLocations(players) {
      console.log(players)
      // Loop through all the players sent back from server.
      for (const p in players) {
        // Make sure the player isn't the player playing before creating a new Player object.
        if (p !== this.playerId) {
          // Check to make sure the other player(s) have not been created yet.
          if (!this.players[p]) {
            this.players[p] = new Player(this, 0, 0, this.currentPlayerSpriteSheet, this.socket);
            this.players[p].setUiScene(this.uiscene);
            this.players[p].setEventListeners();
          };
          // Update all the other players (x, y) coordinates
          this.players[p].x = players[p].x;
          this.players[p].y = players[p].y;
          this.players[p].setPlayerFrame(players[p].frame); // This line causes error
        };
      };

      // Remove disconnected players
      for (const p in this.players) {
        if (!players[p]) {
          this.players[p].destroy();
          delete this.players[p];
        };
      };
    };

This is the error message I get when running that line uncommented...

Cannot read properties of undefined (reading 'isGLTexture')
TypeError: Cannot read properties of undefined (reading 'isGLTexture')
    at MultiPipeline.batchSprite (http://localhost:3000/static/js/bundle.js:168652:52)
    at Player.ImageWebGLRenderer [as renderWebGL] (http://localhost:3000/static/js/bundle.js:60843:27)
    at WebGLRenderer.render (http://localhost:3000/static/js/bundle.js:165597:23)
    at CameraManager.render (http://localhost:3000/static/js/bundle.js:23540:28)
    at Systems.render (http://localhost:3000/static/js/bundle.js:178756:28)
    at SceneManager.render (http://localhost:3000/static/js/bundle.js:176411:23)
    at Game.step (http://localhost:3000/static/js/bundle.js:28331:26)
    at TimeStep.step (http://localhost:3000/static/js/bundle.js:29219:20)
    at step (http://localhost:3000/static/js/bundle.js:40276:23)

I log the players object to the console as well to make sure the frame property exists and changes when a player moves a direction and it does, and here is the logged players objects output...

{57c8f1fa-7b55-491e-b5ec-550975de9090: {…}}
57c8f1fa-7b55-491e-b5ec-550975de9090
: 
frame
: 
16
x
: 
83.33333333333334
y
: 
0
[[Prototype]]
: 
Object
[[Prototype]]
: 
Object

How come the program crashes giving the error provided earlier above when using this line of code below?

this.players[p].setPlayerFrame(players[p].frame);

I have tried 4-5 different logical approaches and end up getting a relatively similar error when trying to update the frame for all other players showing a directional change for the user. With that line commented out all connected users can walk around and others can see the positional change in real-time but not the directional change. Is it possible from updating the other players frames too often?

Thank you for any feedback provided, been stuck for a bit now.

0

There are 0 best solutions below