Multiplayer game with SOCKET.io, how to add players?

[jjwallace]

Hi guys, I have a socket.io server running with node.js and i am trying to add players/sprites to my game.  I am trying to figure out the best way to do this.

As of now i have been working towards using object arrays but i know this is a better way.

socket.on('addPlayer',function(data){
            var thisID = data;//myArrayID;
            
            if(data.id == myID){
                
            }else{
                console.log(thisID);
                pFish[thisID] = this.add.sprite();
                pFish[thisID].x = this.world.centerX;
                pFish[thisID].y = this.world.centerY;
                pFish[thisID].anchor.setTo(0.5, 0.5);

                pMouth[thisID] = this.add.sprite(0, 0, 'spMouth');
                pMouth[thisID].anchor.setTo(0.5, 1);
                pMouth[thisID].animations.add('eat');
                pMouth[thisID].animations.play('eat', 30, true);

                pTail[thisID] = this.add.sprite(0, 0, 'spTail');
                pTail[thisID].anchor.setTo(0.5, 0);
                pTail[thisID].animations.add('swim');    
                pTail[thisID].animations.play('swim', 30, true);
                pTail[thisID].y = spMouth.y - 12;

                pFish[thisID].addChild(spMouth[thisID]);
                pFish[thisID].addChild(spTail[thisID]);

                pFish[thisID].scale.setTo(0.2, 0.2);
                pFish[thisID].angle = 110;
            }
        })        

So what i really want to do is add a player object.  This way i can have all 3 sprites inside the object and i can just change the object.  Of course i will need to update each player with the corisponding input comming in from the server.

Any good examples of how to do this in a OOP method for Phaser.?

Example:

BasicGame.Game.prototype = {

    preload: function () {
        //this.load.script('io', 'node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js');
        //console.log('NODE LOADED');
    },
    
    create: function () {

 

[JokerJESUS]

So this is my function for adding players if new player joined

var Players = game.add.physicGroup(); is a group created in main script

JESUS.prototype.SyncPlayers = function(data){

		data = JSON.parse(data);
		PlayersData = data;

		jQuery.each(PlayersData, function(index, value) {


			if(index !== player.nickname){
			if(!Players.getByName(index)){

				
			Players.create(game.world.randomX, game.world.randomY, 'med1', 0, true, 0).name = index;
			Players.getByName(index).anchor.x = 0.5;
			Players.getByName(index).anchor.y = 0.5;
			Players.getByName(index).health = 100;

			}
			
			Players.getByName(index).x = PlayersData[index].x;
			Players.getByName(index).y = PlayersData[index].y;
		}
		});

}

io.on("newPlayer",function(data){
   JESUS.SyncPlayers(data);
})

And on server

io.sockets.on('connection', function(socket){
    console.log('socket connection');

    socket.on('NewPlayerJoined',function(data){
        console.log(data);

// in data, i m sending Nickname of a players and putting it in playersData = {}

        PlayersData[data] = {x:0,y:0};



        io.sockets.emit("newPlayer",data);
        console.log("newPlayerjoined");
    });

This is a testing code. But i hope you will get it

[Ralph]

I would recommend you change the player "object" to a single variable, and set children. That way you can modify it all as 1 object in relation to each other. Rather than 3/4 separate sprites.

Also, io.socket.broadcast is a tool you can use, (I think that's the syntax, idk look it up), so you can send a socket message to all clients EXCEPT the one that caused the call in the first place, so you dont have to check ID's if you have no reason to upon receiving a message. (at the top of the very first code you posted)

[JokerJESUS]

Hey, thank you. Thats pretty good idea. 

But tell me, has io.socket.broadcast its own loop? or i have to send it by phaser : update?

And i have all of other players in group Players, only client player is in one variable like var player = game.add.sprite

 

[Raggar]

The API changed at some point. so I'm pretty sure that it's:

socket.emit(), send to the server from the client, or from the server to the specified socket(client).

io.emit(), send to everyone(server-side), unless you have multiple socket connections on the client, too.

socket.broadcast.emit(), send to every clients except the one that created and uses the socket.

 

You'll have to implement the loops yourself, or use Phaser's own implementation.

Socket.io is simply to create a connection and send some data. How often is up to you.

[JokerJESUS]

Thank you, with socket.broadcast.emit() i can use less code.

[jjwallace]

Wow 'broadcast.emit()' sounds really cool