Multiplayer JavaScript game built with Node.JS - Separating players

Question

I have a question which I cannot find an answer to.

I'm experimenting with building a multiplayer game with Node.JS and Socket.IO. I have built a chat room as my first experiment, so I have broadcasts working etc. Now I'm at the point where I want to get something working with Canvas.

The problem I'm having is getting my head around multiple and independent players. I know that each player will send their x,y cords to the server and the server will broadcast those, but how does the client know how many players to display, I'm guessing they have to be stored in an array somewhere.

Answer 1

My implementation will be very naive and simplified, no lag compensation, extrapolation and such, but it should point out a general conception of "multiplayering" with node.

I think the simplest approach is to have an associative array containing players(entities) on both client and server. Then from client side you send commands like {action: "move", target:[32, 100]} and process this command with server logic (where the real game is running). To each socket on connection you should assign a player object or id so you can access it like:

var lastPlayerID = 0;
var players = {};

server.on("connection", function(socket) {

  var newcommer = new Player({id: lastPlayerID});      
  players[lastPlayerID] = newcommer;
  socket.player = newcommer; // or lastPlayerID
  lastPlayerID++;      

  socket.onMessage = function(message) {
    this.player.doSomething(); 
  }

});

Then each let's say 100ms you could send snapshots to all connected players:

{
  timestamp: game.delta,
  players: {
    1: {x: 32, y: 100},
    2: {x: 14, y: 11}
  }
}

And then at client side receive data and interpolate from old to new values.

// duration in this simplified example is snapshot sending interval in [ms]
Player.prototype.interpolateTo = function(data, duration) {
  if(typeof data.x != "undefined") {
    // step needed to get `destination x` within `duration` miliseconds
    this.stepValues.x = Math.abs(data.x - this.x) / duration;
    this.target.x = data.x;
  } 
  // ...
}

// step you call for each game loop iteration
Player.prototype.step = function(delta) {
  if(this.x < this.target.x) {
    this.x += delta * this.stepValues.x
  }
}

This is a sufficient algorithm for a semi-arcade game with 20 objects at maximum. Decreasing snapshot's interval makes it almost suitable for strategy game with more objects. Your main enemy is bandwidth usage which you can decrease minimizing packet's size. For instance read about BiSON, LZW and don't send data which haven't changed since last snapshot.

My reputation doesn't allow me to post all the links, so I have attached them here: http://pastebin.com/Kh3wvF1D

General introduction to multiplayer conceptions by Glenn Fiedler:

http://gafferongames.com/networking-for-game-programmers/what-every-programmer-needs-to-know-about-game-networking/

Some multiplayer techniques from Quake: This will give u a clue about interpolation and extrapolation(prediction)

http://fabiensanglard.net/quakeSource/quakeSourcePrediction.php

Valve's article about latency compensation and general optimisations:

https://developer.valvesoftware.com/wiki/Latency_Compensating_Methods_in_Client/Server_In-game_Protocol_Design_and_Optimization

Multiplayer techniques in Age of Empires:

http://zoo.cs.yale.edu/classes/cs538/readings/papers/terrano_1500arch.pdf#search=%22Real%20time%20strategy%20networking%20lockstep%22

You can also read my article about optimizing bandwidth usage

http://rezoner.net/minimizing-bandwidth-usage-in-html5-games-using-websocket,299

+1 for Ivo's Wetzel Mapple.js it's a big pile of knowledge.

https://github.com/BonsaiDen/Maple.js

Answer 2

Players don't send their x,y co-ordinates to the server, that would allow for cheating by manually sending the co-ordinates.

Each player sends "moving left/right/up/down" events to the server. The server then updates positions and periodically broadcasts the position (or the deltas in position) of all the players.

Each client then takes all these player deltas and renders them. In terms of client side implementation I would have some kind of Board/Map object and it would have a list of RenderableEntities. I then just update the RenderableEntities with new positions and periodically redraw all the entities.

I recommend you take a look at Maple.js

Answer 3

Another way to synchronize the X & Y coordinates of each player is to use the Lance. It is an open-source JavaScript library that handles position correction for multiple players with an authoritative server.

It will be useful if you need to synchronize other things besides the coordinates, like the object name or the avatar properties. Or if your players have velocities.