About multiplayer

Suggestions & Feedback
#1

I am currently evaluating if PlayCanvas is suitable for a project involving browser based multiplayer games. Multiplayer is clearly possible, but let me first complain about something - this official multiplayer tutorial for PlayCanvas is incomplete and broken: http://developer.playcanvas.com/en/tutorials/real-time-multiplayer

The code is different in the tutorial than in the example project. For example the tutorial code uses this.id when the example code uses Network.id - seems small thing, but I ended up spending hours trying to find out why my code wasn’t working.

Also, the different language versions (tried English and Japanese) have different code.

That tutorials is the first result if you google “PlayCanvas multiplayer”. I strongly suggest you update the tutorial - and maybe expand it a bit, since even something as trivial as player disconnection is not handled in the tutorial (although it is at least partially handled in the linked example project…?).

Furthermode, I personally think having to write your own network code from scratch is a bit against the idea of using an engine/tool like PlayCanvas in the first place. For example with Unity you can get basic multiplayer without writing any code with plugins like Photon.

Maybe you could add official support for Photon? Sure there seems to be some unofficial ones (like https://github.com/utautattaro/Photon-for-PlayCanvas), but I’m not sure if something 1 guy has made many years a go is reliable enough for production…

Or maybe you could add your own multiplayer solution to Playcanvas - like a component you could add to an entity to make it “networked” which would then sync its transform and spawning/destruction. Sure, that would still require some server side code, but that could be then something users could expand/modify.

#2

Hi @jariwake,

Definitely having a couple of working multiplayer tutorials would be great, as a starting point.

Providing a generic multiplayer solution though, in engine, is a hard task and not something that is easy to nail effectively. Multiplayer solutions usually solve a specific case/type of game (p2p, client/server, physics based etc.).

Playcanvas being a web based solution allows you to easily add support yourself of existing JS/web networking systems that can help you create an effective multiplayer solution (Web RTC, Node.js, realtime databases etc.).

#3

Sorry about this, the tutorial itself is pretty old and probably hasn’t been checked for a while. Both the socket.io and PlayCanvas engine has been updated since then.

I’ve created an issue so we don’t forget about it: https://github.com/playcanvas/developer.playcanvas.com/issues/123

The documentation is open source so if you would like to help us improve or even just report an issues that you have, that would be a great help: https://github.com/playcanvas/developer.playcanvas.com

The other language versions are done by the community so they can be a lot behind the English versions. Not 100% what to do about that going forward TBH as we go through improving the documentation and platform.

Yeah, I’ve been wanting to expand it out quite a bit to do a basic .io game with a shared game state. We are quite a small team and unfortunately it’s been a balance of priorities.

1 Like
#4

I do recommend looking for generic networking tutorials on the web like this one with socket.io that can be applied to PlayCanvas: https://victorzhou.com/blog/build-an-io-game-part-1/

1 Like
#5

@jariwake I can confirm that the github photon plugin linked in your post works quite well, and requires minimal setup before you start coding. It is quite a good option, maybe we could look into an official tutorial at least integrating that plugin @yaustar since it works well?

#6

We could do but we would have to fork and maintain that plugin ourselves.

#7

I completely understand, but doing so in the near future will really help PC grow as an engine, so it would be nice if you guys could look into it.

#8

http://developer.playcanvas.com/en/tutorials/real-time-multiplayer
Yep

#9

Hello,

Multiplayer cross origin request playcanvas/glitch, important thing with CORS issue in browsers that can save time, on glitch server.js add following line :

var io = require("socket.io")(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST","OPTIONS"],
    credentials: true
  }
});

Sample of server.js with console logs added :

var server = require("http").createServer();
var io = require("socket.io")(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST","OPTIONS"],
    credentials: true
  }
});

var players = {};

function Player(id) {
  this.id = id;
  this.x = 0;
  this.y = 5;
  this.z = 0;
  this.entity = null;
}


io.sockets.on("connection", function(socket) {
  socket.on("initialize", function() {
    
    var id = socket.id;
    var newPlayer = new Player(id);
    // Creates a new player object with a unique ID number.

    players[id] = newPlayer;
    // Adds the newly created player to the array.
	console.log(players[id] );
    socket.emit("playerData", { id: id, players: players });
    // Sends the connecting client his unique ID, and data about the other players already connected.

    socket.broadcast.emit("playerJoined", newPlayer);
    // Sends everyone except the connecting player data about the new player.
  });
  
socket.on('positionUpdate', function (data) {
	console.log('positionUpdate');
	console.log(data.id);
	console.log(data.x);

    players[data.id].x = data.x;
    players[data.id].y = data.y;
    players[data.id].z = data.z;

    socket.broadcast.emit ('playerMoved', data);
});
  
});
console.log("Server started.");
server.listen(3000);

Hope it helps…