[SOLVED] Multiplayer rotation with PlayCanvas and Photon

@Tirk182
A different topic, but I am wondering, is it possible to rotate the enemy player the enemy player model based on camera movement, the same way as animations? As in information is passed into player.js and then to game-room.js, it is broadcasted to everyone?

You need to do the same for rotation as you already do for position and animation.

Is there any sample code I could use to achieve this? I am not sure what information I need to send into both player.js and game-room.js .

How do I access the rotation of a model with code?

You can find the information you need on the page below.

https://developer.playcanvas.com/api/pc.Entity.html

https://developer.playcanvas.com/api/pc.Entity.html#getLocalEulerAngles

@Albertos

What exactly does getLocalEulerAngles do? I can’t seem to make the player model rotate using this code, at least not as much as I move the mouse, it rotates a bit, but not enough.

//here is the code I tried
var rotation = new pc.Vec3(0, this.eulers.x, 0);
this.parentEntity.setLocalEulerAngles(rotation);

Any suggestions on how to get it working smoothly so that the model rotates as much as the mouse moves?

To get the rotation you need to use getEulerAngles() or getLocalEulerAngles(), not sure which one in this case.

To set the rotation you need to use the teleport function, because I assume you use a dynamic rigidbody.

You can check the network.js script of my project below where I do the same.

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

How does this teleport function work? Would it not be taxing on the system if model is teleported upon each time the update function runs? Or is this the best way?

I think you already use this to set the position?

Do I add it into this first part of the code?

Player.prototype.raiseEvent = function () {
    if (!this.tmpVec.x || !this.tmpVec.y || !this.tmpVec.z) return;
    const data = {
        position: {
            x: this.tmpVec.x,
            y: this.tmpVec.y,
            z: this.tmpVec.z,
        },
        player: {
            playerAnim: this.entity.anim.baseLayer.activeState
        }
    };

    this.app.loadBalancing.raiseEvent(0, data);
};

Into position can I add the rotation like you did using socket?

That’s probably one of the steps. But I didn’t create the multiplayer logic of your game, so I can’t help you with that.

@Alexis_Shaju I am getting a bit confused

Are you still using Photon or another method for multiplayer.

Probably my fault, because I shared another multiplayer example. I assumed that sending and receiving works mostly the same.

@Tirk182
If it’s not too hard and do-able, we still intend to use photon, yes

@Alexis_Shaju I am thinking that you already have some understanding of Photon. Same rules apply as the support provided above. So if you want to pass more information about the players in the room you will do the same as before. Open player.js.

Player.prototype.raiseEvent = function () {
    if (!this.tmpVec.x || !this.tmpVec.y || !this.tmpVec.z) return;
    const data = {
        position: {
            x: this.tmpVec.x,
            y: this.tmpVec.y,
            z: this.tmpVec.z,
        },
        player: {
            playerAnim: this.entity.anim.baseLayer.activeState,
            playerRot: this.entity.getEulerAngles(),
            playerSomeThing: this.entity.getsomething()<<<<<< This is fictitious just to show how you can add 
        }

    };

    this.app.loadBalancing.raiseEvent(0, data);
};

Then once again you can go to game-room.js and

GameRoom.prototype.updatePlayerPosition = function (content, actorNr) {

    const { x, y, z } = content.position;
    const playerData = content.player;
    const player = this.entity.findByName(actorNr);
    const playerMat = this.app.assets.find(playerData.playerMat);

    // Display Actor
    this.playerName = player.findByName('State').element;
    this.playerName.text = playerData.name;

    // Do something with new data that effects player instantiation
    player.setEulerAngles(playerData.playerRot);

   player.set????(playerData.playerSomeThing);


    // Set the position
    player.setPosition(x, y, z);

};
1 Like

Is it not a dynamic rigidbody?

@Tirk182 This was the reasoning I had to do the player rotation. I was looking for the best way to add it. But for this rotation to work, do I need to first implement it in my firstPersonMovement.js? Or is this not necessary?

@Tirk182 I tried the method you gave, but I am getting a problem, if I write the above sample code, the second player basically spawns in and then vanishes immediately. Both players are shown to be in the same room with the roomcode, but cannot see each other.

@Alexis_Shaju Is there a new project link or is it the same from above?

@Tirk182
Same project. I believe the code should now be in master which you can view.

@Alexis_Shaju I do see the updates and should be able to fork your code later today. I would suggest commenting out the variable passing for the new variables and inserting console.log’s to see the values being passed. console.log >>>> this.entity.getEulerAngles() to see what the value is in your player.js so you can determine it is valid.