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.