[SOLVED] Multiplayer position problem

Sorry for raising this issue . But i am facing a problem in 3d multiplayer.

where the 1person movements cannot been seen by the 2nd person . The second person remains idle but he can move around

I think the problem arises in the network.js script for updating character movements for the other person which is inRoot heirarcy . I have tried but cannot find the solution . Each time the code breaks …

please review my network.js script below …

var Network = pc.createScript('network');

// static variables

Network.id = null;

Network.socket = null;

// initialize code called once per entity

Network.prototype.initialize = function() {

    this.player = this.app.root.findByName('Player');

    this.other = this.app.root.findByName('Other');

    var socket = io.connect('https://sore-bloom-beech.glitch.me'); // Glitch hosted server

    Network.socket = socket;

   

    socket.emit ('initialize');

   

    var self = this;

    socket.on ('playerData', function (data) {

        self.initializePlayers (data);

    });

    socket.on ('playerJoined', function (data) {

        self.addPlayer(data);

    });

    socket.on ('playerMoved', function (data) {

        self.movePlayer(data);

    });

    socket.on ('killPlayer', function (data) {

        self.removePlayer(data);

    });

   

};

Network.prototype.initializePlayers = function (data) {

    this.players = data.players;

    Network.id = data.id;

    for(var id in this.players){

        if(id != Network.id){

            this.players[id].entity = this.createPlayerEntity(this.players[id]);

        }

    }

   

    this.initialized = true;

    console.log('initialized');

};

Network.prototype.addPlayer = function (data) {

    this.players[data.id] = data;

    this.players[data.id].entity = this.createPlayerEntity(data);

};

Network.prototype.movePlayer = function (data) {

    if (this.initialized && !this.players[data.id].deleted) {

        this.players[data.id].entity.rigidbody.teleport(data.x, data.y, data.z);

    }

};

Network.prototype.removePlayer = function (data) {

    if (this.players[data].entity) {

        this.players[data].entity.destroy ();

        this.players[data].deleted = true;

    }

};

Network.prototype.createPlayerEntity = function (data) {

    var newPlayer = this.other.clone();

    newPlayer.enabled = true;

    this.other.getParent().addChild(newPlayer);

    if (data)

        newPlayer.rigidbody.teleport(data.x, data.y, data.z);

    return newPlayer;

};

// update code called every frame

Network.prototype.update = function(dt) {

    this.updatePosition();

};

Network.prototype.updatePosition = function () {

    if (this.initialized) {    

        var pos = this.player.getPosition();

        Network.socket.emit('positionUpdate', {id: Network.id, x: pos.x, y: pos.y, z: pos.z});

    }

};

here is the project link PlayCanvas | HTML5 Game Engine

Hi @anya!

This is as expected, because the default network script only sends the position to the other user and not the animation. The other user cannot know what another player in the game is doing, until you send this information with the network script.

With this code you send the position to the other user:

image

With this code you apply the new position of all players:

image

In the project below I extend the default network script a bit and send also the rotation to the other user. This way you have to send all information that is needed.

https://playcanvas.com/project/827020/overview/custom-multiplayer

Okay so i need to add these two codes in my project ?

No, that’s already in the script to send and apply the position. You have to do something similar for all other things, like the animation. Please check the post below.

1 Like

okay so do i need to change the server side code too for positionUpdate . Because i have tried but cannot find a solution. or do i need to change in playerMovement.js ? Can you please provide any copy and paste solution for that to finally solve the proble , as each time i update in script is start showing some errors

update : i have used the above code you have given but the problem is it only updates the position not the animation of the other player …

either can you tell me about this problem …

TypeError: Cannot read properties of undefined (reading ‘activeState’)

Network.prototype.updatePosition = function () {

    if (this.initialized) {    

        var pos = this.player.getPosition();

        var anim = this.player.anim.activeState();

        Network.socket.emit('positionUpdate', {id: Network.id, x: pos.x, y: pos.y, z: pos.z, a: anim});

    }

};

i have used this code above in the project …

It probably has to be like below.

var anim = this.player.anim.baseLayer.activeState;

the above code is also coming in type error …

can you please check the network.js where is getting the problem . I have tried whole day for this

please review my code

var Network = pc.createScript('network');

// static variables

Network.id = null;

Network.socket = null;

// initialize code called once per entity

Network.prototype.initialize = function() {

    this.player = this.app.root.findByName('Player');

    this.other = this.app.root.findByName('Other');

     

    // var socket = io.connect('https://soft-mixed-joke.glitch.me'); // Glitch hosted server

    var socket = io.connect('https://sore-bloom-beech.glitch.me'); // Glitch hosted server

    Network.socket = socket;

   

    socket.emit ('initialize');

   

    var self = this;

    socket.on ('playerData', function (data) {

        self.initializePlayers (data);

    });

    socket.on ('playerJoined', function (data) {

        self.addPlayer(data);

    });

    socket.on ('playerMoved', function (data) {

        self.movePlayer(data);

    });

    socket.on ('killPlayer', function (data) {

        self.removePlayer(data);

    });

   

};

Network.prototype.initializePlayers = function (data) {

    this.players = data.players;

    Network.id = data.id;

    for(var id in this.players){

        if(id != Network.id){

            this.players[id].entity = this.createPlayerEntity(this.players[id]);

        }

    }

   

    this.initialized = true;

    console.log('initialized');

};

Network.prototype.addPlayer = function (data) {

    this.players[data.id] = data;

    this.players[data.id].entity = this.createPlayerEntity(data);

};

Network.prototype.movePlayer = function (data) {

    if (this.initialized && !this.players[data.id].deleted) {

        this.players[data.id].entity.rigidbody.teleport(data.x, data.y, data.z, data.rx, data.ry, data.rz);

    }

};

Network.prototype.removePlayer = function (data) {

    if (this.players[data].entity) {

        this.players[data].entity.destroy ();

        this.players[data].deleted = true;

    }

};

Network.prototype.createPlayerEntity = function (data) {

    var newPlayer = this.other.clone();

    newPlayer.enabled = true;

    this.other.getParent().addChild(newPlayer);

    if (data)

        newPlayer.rigidbody.teleport(data.x, data.y, data.z);

    return newPlayer;

};

// update code called every frame

Network.prototype.update = function(dt) {

    this.updatePosition();

};

Network.prototype.updatePosition = function () {

    if (this.initialized) {    

        var pos = this.player.getPosition();

        var rot = this.player.getEulerAngles();

        Network.socket.emit('positionUpdate', {id: Network.id, x: pos.x, y: pos.y, z: pos.z, rx: rot.x, ry: rot.y - 360, rz: rot.z});

    }

};

Can you show me the error please? The script you share doesn’t have the animation parts in it?

I guess your anim component is not on the player itself.

I’ll see if I can make it work in my fork of your project.

It didn’t work anyway because you are using the animation component instead of the new anim component.

In the project below I fixed the rotation and animation for you. :partying_face:

https://playcanvas.com/project/954479/overview/multiplayerfork

2 Likes

thank you for the solution . Realy fantastic

1 Like