About multiplayer

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.

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.).

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

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

@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?

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

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.

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

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…

Did this work for anyone?

Yes for me worked (more or less) untill i digged my own grave with google login. Anyway the main problem seems to be the glitch server shutdown in case of inactivity that give you just a console alert but show no disconnection. I guess with a bit of experience and some adjustment can work just fine. I think it need a lot of time to fully understand how it works.

1 Like

I wouldn’t recommend Glitch to be used beyond prototyping. Something like Heroku would be better and the free tier (after registering a credit card) has enough free hours for a single server to be 24/7.

They spin up faster and an uptime monitor can be used to prevent it spinning down assuming you have enough hours left on the free tier.

2 Likes

@yaustar The multiplayer tutorial really need an update. Please do that if you have time.
Thanks

Yep, as mentioned in this post: About multiplayer

We have an issue for it to be updated in the repro.

Not tryin’ to be rude, but I agree, the tutorials kinda bad. It is extremely outdated and about 90% of the code in the page tutorial PLAYCANVAS doesn’t even recognize anymore. When I tried following the tutorial, I got a bunch of “UNDEFINED” and “UNRECOGNIZED” errors. And not to mention, it’s also extremely hard to just use, And the old code (say I was to fork the project and just take out y’all’s server-id and put in mine) Isn’t supported anymore, so glitch cannot connect to PLAYCANVAS using the old code. I’ve noticed this in my previous thread where I asked if I could simply use the code from the tutorial and change the server id, tried it, nothing happens in the log, No client connected, No nothing. Simply because the new Glitch.com, cannot connect to PC anymore because the code is outdated. One of the various reasons why no one can use their own server. And everyone is running off the PLAYCANVAS glitch server. Which makes the multiplayer projects out there, REALLY SLOW. So please update the code, cuz I’m getting sick of having to run off of the PLAYCANVAS glitch server. As I’m always having beans all over the place because the games overlap because they’re on the same server. I would appreciate a fix.

Yet you are. This is not how you request for help.

1 Like

@Dylan_McDorman, actually if you read through the tutorial you will find that the code is very well written and provides a clear understanding of how to implement multiplayer between clients.

Adding multiplayer in your game requires mostly that, a clear comprehension of how everything connects and works. Rarely you will find a solution that you can use out of the box, copy pasting code. So focus on understanding first and polishing your networking coding skills.

3 Likes

As a short term fix, go to https://glitch.com/edit/#!/playcanvas-multiplayer

And click here to clone the project

As it says in the tutorial here:

The issue is that the socket.io libraries used when you create a new project on glitch is on version 3 which requires a different setup on the client and server side.

Edit: PR made to update tutorial to support socket.io v3: https://github.com/playcanvas/developer.playcanvas.com/pull/235

3 Likes

I know well that coding sometime is stressing, even more when you spend hours to try to make new things works.But it’s not nice to blame it on the staff, the guys always try to help us to find the most appropriate solution (also if it’s not related to playcanvas issues sometime). When i can’t find a solution i do different stuffs and get back on the problem some day after, doing this i often spot things that i didn’t noticed.

5 Likes

well i’m trying to be funny but fricken sorry, jease. : /